Word Game

Word game is a classic game which first a word should be selected and then player will have some spaces for any character of selected word like this:

Selected word is: ‘game’

Player will see: _ _ _ _

Player should guess the characters of the selected word. If the character is one of the selected word characters, we should place it in its position like this:

_ _ m _

If not we should place it under the lines. The player has as length of selected word as chance to select wrong characters.

If player guesses the word, he/she will be successful else will lose.

Now we are going to write this program via javascript and jquery.

First of all we should create a game scene. Like this:

Our game scene has two major parts:

1.       Static part:

In this part we have some elements what will be created once in whole application lifecycle like keyboard area and timer.

2.       Dynamic part:

In this part we have some elements what will be recreating any time the game will be ended (like player win time or lose time or when player click clear button) like drawing some dash for each character of the selected word.

For these two parts we will have 2 html divs:

1.       sceneContainer (for static part)

2.       scene (for dynamic part): this div is appended to sceneContainer.

There are some fields which handle the game.

1.       bank: An array of available words. The selected word is selected from here.

2.       current: Index of selected word in bank array

3.       scene: Div of scene

4.       sceneContainer: Div of sceneContainer

5.       faults: the count of wrong selected character of player

6.       correct: the count of correct selected character of player

7.       blackList: An array of player selected characters. (the player selected character should not be reselected)

8.       currentTime: The current time of new game.

Scene is created in createScene method. In this method we use createBtn method. This method should create an html button tag with specific character. In its onclick event should raise check method. The check method will be explained latter.

triggerTimer method should write current time into the timer span with id of “timer”. Then it should triggers itself after 1 second by this command:

setTimeout(function() {$.wordGame.triggerTimer();}, 1000);

In init method we have two functions.

1.       reset: in this method we reset all wordGame fields.

2.       offerNewWord: in this method first we select a word in back of the word by calling suggestCurrent method. suggestCurrent method create a random value from the mod of the current time and bank array length (as we know the result will be between 0 to bank array length - 1). The other job of the offerNewWord method is to create spaces for characters of the selected word. We should have two rows of spans. One for correct selections the other for wrong selections. The correct row of spans should have bottom border to illustrate dash as placements for player.

In check method we should check the first if selected character is in the black list or not. We do it by existInBlackList

At last we should start the game in or page. We should just call $.wordGame.createScene() method.

The game diagram is available here:

you can download full source code from here

all rights reserved by mostafa rastgar and prgassist weblog