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.

Screenshot of possible HTML file

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.


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

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!