hangman

Key press hangman javaScript game with a sans-serif theme

html / css / javaScript / design
created 2016
github (hangman)

Minimal Style

I wanted a minimal style for the look of the game with an emphasis on the word to be guessed and the letters the user has chosen. We were also discussing some typographic concepts during class that week which inspired the idea of using sans-serif typefaces as the game's theme.

Initial Hangman game screen

Vanilla JS

This project was created before we got into jQuery so it's gloriously vanilla, which I enjoy writing. I used document.onkeyup to capture the keyboard press events for the main functionality of the game. An intro to objects and methods was also a primary focus. Lots of fun.

Hangman's Sense of Impending Doom

I remember the sense of doom that would build when I played this game as a kid. Most would exaggerate the look of the hanging man. I didn't want to be that graphic, but still wanted to impart the tension that builds as you get closer to the noose.

Hangman game screen with letters incorrectly chosen to show the red bars across the screen.

I got the idea to fade in red bars across the screen as players incorrectly guess from red Swiss typography posters. It works great. The bars become incrementally redder as each one appears building on that sense of dread.

Hangman game win screen.

Warp World ?

secrets are fun to discover in games. So I implemented a color mode if the player guesses all possible words. It can take a bit to get to as the words are Math.floor(Math.Random())-ly generated, but the game lets you know how many unique words you've guessed and hints at the unlockable color theme to tease the player to continue playing.

Hangman game with secret color background if all words have been correctly chosen.