Interactive Fun and Games with WAP and WML

Friday Sep 27th 2002 by Steve Schafer

Take WAP and WML to the next level. Learn to create a hangman game.

This series of articles describes how to provide Webcontent to mobile devices through WML (Wireless Markup Language). This articlecovers creating an interactive game for deployment on mobile WML devices.

Note: These articles cover WML and WMLScript version 1.1,which are supported by the majority of mobile devices in use today. Thearticles assume a working knowledge of HTML and general Web technologies, andfurther assume that you have read the previous article(s) in this series.

Uses for Mobile Devices

Mobile devices are the most useful when they are connected to data sources and have the ability to deliver various data whenever needed. However, mobile devices are also very useful for entertainment purposes-I've spent many hours in airports with only my PDA and phone for company. Although WML doesn't lend itself to a complex gaming experience, it is fairly easy to create interactive entertainment. In this article I will lead you through the steps to create a rudimentary "hangman" game.

Project Specifications

Hangman is a straightforward game. For anyone unfamiliarwith the game, a word is shown as blanks and the player guesses letters thatmay be in the word. If a letter guessed is in the word, all instances of that letterare revealed. If a guessed letter is not in the word, part of a hanging stickfigure is drawn on a scaffold, at the end of a nooseusually starting with thehead, then the body, then the limbs (one at a time). The game ends when theword is guessed or the figure is completely drawn. In the former case theplayer wins, in the latter the player loses.

The functionality for our project is as simple as the pen-and-paper version of the game:

  1. A word is chosen and displayed as blanks.
  2. The player picks a letter.
  3. The letter is compared to the letters in the word; if the letter is in the word, the appropriate blanks are changed to display the letter. If the letter is not in the word, a piece is added to the hanging stick figure.
  4. The game ends when the user knows the word or the figure is complete.

Once the functionality has been determined, the interface must be drafted.

  • All output must fit on a display that is approximately 16 characters wide and 4-10 lines tall.
  • The stick figure will be represented by ASCII characters instead of graphics since we can't ensure that the player will be using a graphics-capable device. The figure will be made of 6 segments, giving the player 6 letter selections.
  • Several cards will be used, one for each function. That will help segregate the functions and keep the display lean.
  • The words must be random and taken from a decent-sized list to keep the player engaged.
  • To simplify coding, all words will be in lowercase and the player's input will be forced to lowercase.

Coding the Basics

This project will utilize WML for the input and output andWMLScript for the behind-the-scenes processing. Because debugging tools forWMLScript are limited, we will build this project in small stages, addingfeatures only after the current feature set is solid.

To start, we will create a simple deck of two cards. Thefirst card will call a WMLScript function to initialize the game's variables.The second card will then be displayed, showing the word as blanks and as plaintext (for debugging purposes).

Our skeletal code looks like this:


  1. <?xml version="1.0"?>
  3. "">

  1. <wml>
  1. <card id="card1" title="Hangman">
  2. <!-- When this card is entered, call the init routine -->
  3. <onevent type="onenterforward">
  4. <go href="hangman.wmls#init()"/>
  5. </onevent>
  6. <p>
  7. <!-- Tell the user we are initializing. When the
  8. init function is finished it will call card2 -->
  9. Initializing...
  10. </p>
  11. </card>
  1. <card id="card2" title="Hangman">
  2. <p>
  3. $word<br/>
  4. $blank
  5. </p>
  6. </card>
  1. </wml>


  1. extern function initword() {
  2. // Define word list (pseudo array)
  3. var words = "animal announce banana doctor elephant giraffe";
  4. var idx,x = 0;
  5. var blank,word = "";
  1. // Randomize a word
  2. idx = Lang.random(6);
  3. word = String.elementAt(words,idx," ");
  1. // Add an "*" for every letter in the chosen word
  2. for (x = 1; x <= String.length(word); x++ ) {
  3. blank = blank + "*";
  4. }
  1. // Set the WML vars and call card2
  2. WMLBrowser.setVar("word", word);
  3. WMLBrowser.setVar("blank",blank);
  4. WMLBrowser.go("hangman.wml#card2");
  5. }

The first design decision is how to store the word list.Because standard WML technologies do not provide a convenient link to theoutside world (databases, etc.), the list has to be stored internally, withinthe script itself. The lack of true arrays in WMLScript contributes to theproblem as well. However, WMLScript's string handling solves the problem wellenoughthe words will be stored in delimited form within one long string (WMLSline 3). The String.elementAt function could then be used to parse one of thewords from the list (WMLS line 8).

Next the "blank" template must be constructed forthe word (lines 9-12). At this point, the variable $word will contain theactual word, while $blank contains the blank representation. The variables arepushed out to the browser and the next card is displayed, showing all thevalues.

Note: Even this partof the script was developed in pieces, though for the sake of brevity in thisarticle I've chosen to start with this chunk of code. Initially, I created thestub WML code to call the init function, which simply set a variable. Then Icreated the word list and randomized a word, which was displayed by the WML.Finally, I created the blanking code to create the blank word.

Tip: The Openwave SDK provides a great environment todevelop applications in a stairstep method. Visit the developer site at