Hangman, a simple yet easy to understand guessing game that is sneakily quite a bit of fun.
My earliest memories of hangman were of my 2nd grade teacher assigning each of us a partner and paper of hard (at the time) vocabulary words. For hard words such as “dangerous” and “instrument”, hangman actually made learning how to spell extremely fun. However with a game like hangman there are various ways to tweak it to make it a great learning tool. Whether it’s a simple, yet competitive, “guess my word” approach, a “guess the word from a definition” method, or even a “everyone take turns wheel of fortune-esque” style. The idea of guess the word still remains the same.
So going back to the tweaking idea, we here at 7 Generation Games saw an opportunity to use this great learning tool for our games. Let me start by getting this out of the way first, we don’t hang people. Not even fictitious stick figures. So what’s the next best thing? How about building a scarecrow to scare away some crows?
The concept is still hangman at its core. Guessing a word from a random number of underscores and a hint of what the word could be. But now we have you, the hero, trying to build a scarecrow to scare away nasty crows before they get to the farmer’s crops. Every correct guess gets you closer to building the big scarecrow to save the day. Every wrong guess brings one of these pesky crows closer to the crops.
To start of jQuery is the first thing that we include in this game.
<link rel="stylesheet" href="../jquery/jquery-ui/jquery-ui.min.css" />
var words = [‘ocean’, ‘wallet’, ‘superman’];
var definitions = [‘Definition: A large body of water’, ‘Definition: A place to put your money’, ‘Definition: An invincible superhero(except with kryptonite)’]
The game’s layout itself is built on tables. We decided to go with tables because they offered a simple way to organize all the inputs and images. Two separate tables were used for the game. We used one table for all the word inputs and the scarecrow images. The second table was used to show the crows getting closer and closer to the farmer’s beloved crops.
Here is the first table
<div class=’container-title’>Guess A Letter!</div>
<input id=’letter-input’ type=’text’ maxlength=’1′ />
<button value=”push” id=”press”>Submit Letter</button>
<div class=’container-title’>Guessed Letters</div>
<div id=”wrong-letters” class=’input-area’></div>
<div class=’container-title’>What’s That Word?</div>
<img id=”scarecrow” src=”../hangman/images/blank_0.png” />
The second table shows the crows approaching the crops as you get letters wrong.
<td class=”crowbox”><img class=”hide” id=”crow1″ src=”../hangman/images/crow.jpg” /></td>
<td class=”crowbox”><img class=”hide” id=”crow2″ src=”../hangman/images/crow.jpg” /></td>
<td class=”crowbox”><img class=”hide” id=”crow3″ src=”../hangman/images/crow.jpg” /></td>
<td class=”crowbox”><img class=”hide” id=”crow4″ src=”../hangman/images/crow.jpg” /></td>
<td class=”crowbox”><img class=”hide” id=”crow5″ src=”../hangman/images/crow.jpg” /></td>
<td class=”crowbox”><img class=”hide” id=”crow6″ src=”../hangman/images/crow.jpg” /></td>
<td><img src=”../hangman/images/veggies.jpg” /></td>
If you noticed there are 6 similar td tags. Each one has a hidden crow(the “hide” class might have something to do with it) and the last one has the crops(showing at all times). As you guess wrong we will activate each column and show the crow until it gets to the last column and you lose the game!
Very cool! Thank you for the Code 101!