DEV Community

Cover image for CSS game: Plankman
Alvaro Montoro
Alvaro Montoro

Posted on

CSS game: Plankman

Ahoy, mateys! Do you like games? "Arrr" you "hooked" into movies? Here is a pirated-themed version of the Hangman game developed using only HTML and CSS (no JavaScript and no images):

The topic is "movie titles"

For this game, I chose to not use SCSS or Pug (or any other preprocessor) as the logic is fairly simple... a decision I'd regret soon enough later, as it is really tedious too (using preprocessors would make adding new movie titles so much easier.)

There are 10 movie titles that are "randomized" for the game using the CSS pseudo-randomization algorithm explained in this article. It would have been easier to have them in order, but the "random" factor makes it more interesting.

The images are not really images –not even inline SVGs–, it's all cartoons done with CSS and styled using shadows, clip paths, and border-radius. Developing the shark was fun, and I'm particularly happy with how it looks.


If you like CSS games like this one, check this CodePen collection or visit this GitHub repo.

Top comments (12)

Collapse
 
darkmg73 profile image
DarkMG73

I love seeing people show how dynamic and awesome modern CSS really is. Very cool.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks 😊

Collapse
 
ishiku_ultra profile image
Sam Goodnight

Holy CSS...

Collapse
 
5t3ph profile image
Stephanie Eckles

Really well done Alvaro!! So far I've walked the plank twice πŸ˜… Arrrgh!

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks! :)

Collapse
 
iamschulz profile image
Daniel Schulz

This is really cool. I need to steal your randomizer for something, that's really clever :)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Please go ahead, and share what you do with it.

Collapse
 
kingleo10 profile image
Niroj Dahal

Awesome ! I fell off the plank unless I went through CSS :).

Collapse
 
aaronmccollum profile image
Aaron McCollum

Yeah I just burned like 30 minutes of my day on this. This is really fun!

Collapse
 
blanchloe profile image
Seonyoung Chloe (she/they)

Wow, I really love it!

Collapse
 
michaeltharrington profile image
Michael Tharrington

This is great!! Nice touch with the spelling of ARRNAMATIONS, haha!

Collapse
 
felipperegazio profile image
Felippe Regazio

Awesome!