The WordWrestler Game, Explained
There are many games to be played online, but the vast majority of them require Flash. We set out to create a web-based game that would work using only basic web technologies: that is HTML, CSS, Javascript on the client side.
In this article, we look at how to create WordWrestler: a simple, jumble-style game. If you would like to skip the diatribe, feel free to download the Javascript file and hack along.
Basic setup#
HTML file#
The game will be hosed in an HTML file. The only requirement for the HTML file is the existence of a DIV with ID ww-game. The Javascript file will then fill the DIV with all the necessary HTMLElement objects.
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.
CSS file#
The Javascript file will handle the parts of the presentation that are non-negotiable to the proper functioning of the program. This means:
- 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.
Javascript file#
The game itself is drawn and controlled by one Javascript file. As always, we have taken care to use plain Javascript, rather than to work on top of other frameworks. We find that Javascript can be fun to use when you stop worrying what those non-compliant browsers think.
Game class#
Our strategy is to create a Javascript Game class, whose constructor takes only one parameter, the HtmlDivElement which will encapsulate the game, as discussed in the section on # Html file. The one and only instantiation of the Game class is performed as part of the window's load event listener.
Animations#
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;
Class methods#
The Javascript file defines several methods that are integral to the gameplay. They are:
| Method | Description |
|---|---|
| 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 |
| playLastWord | |
| validateDeck | checks if tiles on deck spell out a valid word from bank |
| shuffleHand | |
| 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 |
Lessons learned#
The state of the web today makes writing HTML/CSS/Javascript games possible. Indeed, it is often easier to develop a game in these technologies than in the more traditional routes which target a specific system. Because they don't use Flash, these games are also iDevice friendly, and can be made to interact with a server on the back-end (to fetch the next game level, for instance, or to submit scores, perhaps).
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!