# CSS game: Plankman

![person walking the plank on a pirate ship](https://cdn.hashnode.com/res/hashnode/image/upload/v1639764926136/2JzNqpsST.png)

CSS game: Plankman
==================

css html webdev codepen

Ahoy, mateys! Do you like games? "Arrr" you "hooked" into movies? Here is a pirated-themed version of the [Hangman](https://en.wikipedia.org/wiki/Hangman_(game)) game [developed using only HTML and CSS (no JavaScript and no images)](https://codepen.io/alvaromontoro/full/XWdrQOg):

<iframe height="600" src="https://codepen.io/alvaromontoro/embed/XWdrQOg?height=600&amp;default-tab=result&amp;embed-version=2" style="width:100%"></iframe>

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](https://css-tricks.com/are-there-random-numbers-in-css/). 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](https://codepen.io/alvaromontoro/full/PoNoBRj), and I'm particularly happy with how it looks.

* * *

If you like CSS games like this one, [check this CodePen collection](https://codepen.io/collection/nvJYmm) or [visit this GitHub repo](https://github.com/alvaromontoro/CSS-Games).

Article originally published on August 06, 2020
