Sporclone

Mon Apr 25 2016 00:00:00 GMT+0000 (Coordinated Universal Time)

Sporclone is a word guessing game that can be played in a web browser. There are several clues provided on the board, which players must match with the associated word before the timer runs out.

Construction

This project was created as part of my high school coursework for my Web Design I class. The instructor (@joncoop) provided us with a basic template, and asked us to fill in missing portions of the JavaScript and document structure.

The base assignment requirements were (roughly):

• the timer should count down after the start button was pressed
• the guesses should be shown on the game board when the user types
• the scoring system should show the number of correct guesses
• at least 2 different games should be available

However I quickly implemented these and got bored, so I decided to do some expansions.

Expansion 1: Gameboard Obfuscation

The original program always showed the game board even before the user pressed the "Play Game" button. I found this to be unacceptable because it allowed the player to see what words they would be required to guess prior to even starting the timer.

I wanted the gameboard to be hidden from view, but didn't want it to suddenly and jarringly appear on the page when the game started. This meant that instead of a simple

, I would need to cook up some kind of animation.

Not wanting to bring in additional JavaScript dependencies, I decided I would try to learn about CSS animations since they were starting to gain decent levels of browser support by that time.

1#answerDisplay {
2  filter: blur(15px);
3  transition-property: filter, -webkit-filter;
4  transition-duration: 2s;
5  transition-timing-function: ease;
6}
7
8.unhide {
9  filter: blur(0px) !important;
10}

Expansion 2: Answer Obfuscation

The original program also included the answers to the puzzles embedded into the document structure, which I thought made it a little too easy to cheat.

1Tortoise*Toucan*Clownfish|Nemo*30