The WordWrestler Game, Explained
The screenshot above shows the bare necessities. The entire game can then be embedded in other pages by using an <object> element that links to this file.
- z-index values
- positioning elements
- width/height settings
A separate CSS file may be used, however, to personalize the look and feel of the game:
- the background image/color
- the font-type used
- the overall color scheme
The HTML page should include any extra CSS files to be used for the game.
While a full discussion of the logic of the program is outside the scope of this text (and would be quite boring to boot), it is worthwhile reviewing the way tile animations are performed.
The class method playTile will promote the given tile from the player's hand to the deck, placing it in the next available spot. It does so by updating the top and left CSS properties of the tile element. The animation is achieved by letting CSS transitions do the work, with the rules:
- transition: top 0.2s linear, left 0.2s linear;
|init||used to setup the environment|
|showMessage||helper method to broadcast messages to the user|
|panic||to handle unexpected events (and for debugging)|
|load||which is used to fetch the word bank to be used, depending on protocol|
|ready||to be called once all resources have been properly fetched|
|startRound||starts the clock on the next randomly chosen round|
|endRound||called when time expires or all words have been found|
|playTile||promotes a tile from the hand to the deck|
|removeTile||demotes a tile from the deck back to the hand|
|clearDeck||demotes all tiles|
|organizeDeck||ascertains proper alignment of tiles on deck|
|validateDeck||checks if tiles on deck spell out a valid word from bank|
|setScore, addScore, getScore||deal with points|
|updateTimer, startTimer||control the time left in the round|
|gameOver||helper method to be called when a game ends|
|_||internationalization (string translator) method|
Developing in other languages is also very easy with this methodology. We created a Spanish version of the game to illustrate this flexibility.
As always, we encourage you to learn by doing. Take a look at the source code and adapt as needed. Develop your own wordbank, or your very own game.
Now go wrestle some words!