Hangman Pt. 1 1

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 2^nd 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.

Now comes our favorite part…building the game itself. In this part we will only be talking about the html that went into building the game. We can go over the nitty gritty that is the JavaScript in a future post.

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" />
<script type="text/javascript" src="../jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-ui/jquery-ui.min.js"></script>

And then in a separate script tag we’ll have the most important piece of JavaScript:

<script type="text/javascript">

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)’]

</script>

Instead of adding the words and definitions into the game’s separate JavaScript file, we added it to the page itself. Adding the words to the html file will allow us to create any different number of hangman games with interchangeable words. All that each hangman page needs to do is reference the Hangman JavaScript file. As promised, we’ll get more into the JavaScript later.

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

<table>

<tr>

<td colspan=”2″>

<div class=’side-container’>

<div class=’container-title’>Guess A Letter!</div>

<div class=’input-area’>

<input id=’letter-input’ type=’text’ maxlength=’1′ />

</div>

<button value=”push” id=”press”>Submit Letter</button>

</div>

</td>

<td colspan=”2″>

<div class=’side-container’>

<div class=’container-title’>Guessed Letters</div>

<div id=”wrong-letters” class=’input-area’></div>

</div>

</td>

<td colspan=”2″>

<div class=’word-box’>

<div class=’container-title’>What’s That Word?</div>

<div class=’word-display’>

</div>

</div>

</td>

<td>

<div class=’hang-container’>

<img id=”scarecrow” src=”../hangman/images/blank_0.png” />

</div>

</td>

</tr>

<tr>

<td colspan=”9″>

<span id=”hint”></span>

</td>

</tr>

</table>

Walking through the table you will see the table has one row split into 4 separate columns. The first three columns are in regards to the words. The first is a place to submit your letters. The second column show which letters you have guessed incorrectly. The third column holds the word as you guess it. So this one will start off blank and build you as you guess each letter correctly. The last column has an image tag in which we will use different images for the scarecrow as it gets built. There are a lot of different id’s and classes scattered throughout the table. While they don’t make much sense on their own, they are there for JavaScript purposes.

The second table shows the crows approaching the crops as you get letters wrong.

<table>

<tr>

<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>

</tr>

</table>

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!

So this was the basic rundown of the html portion of the hangman game. Tune in next time and we’ll get into the gears and that make the engine go…the JavaScript!