Building A Game In Mozilla: Part Two
Pages: 1, 2

Rethinking the grid structure

We rethought the implementation of the grid based on reader feedback. Initially, we liked the idea of having an XML grid, but it became clear that this was not the way to go, and we have since discovered that building the grid in XUL makes more sense. XUL is an XML-based language, so it was not a big leap to change our code, plus we get the benefit of being able to take advantage of existing layout built into XUL elements. The new grid structure looks like:

        <image class="horizontal-wall"/>
        <image class="horizontal-wall"/>
    <!-- more rows -->
    <image class="ghost1"></image>
    <-- more characters -->

See the full code for the XUL grid.

This code needs some explanation. The <stack> element makes it possible to place content on top of other content. In this instance we created a number of columns and rows for the ghosts and chomper to wander around. Columns and rows can be expanded or reduced depending on what size you want the game grid to be. Each row contains a set of images that piece the grid together. These are placed inside the aptly named <grid> element.

Layered on top of the XUL grid, a new XUL widget is placed. This <bulletinboard> feature's functionality was written only days before this implementation. XUL is still an evolving language, so it presents surprises like this almost every day. The bulletin board can best be described as a content container. Each child element in the bulletin board can be positioned at any given left and top offsets. From that position, they can be moved around. This is ideal for the PAGMAN characters to be moved around on top of the grid.

The new bulletin board feature was brought to our attention by a member of the XPFE team, Eric Vaughan. Eric sent us an example of a grid written in XUL that worked in the most recent nightly builds of Mozilla.

Figure 2. A grid written in XUL

Figure 2. A grid written in XUL

There's some JavaScript hooked up to make the ghosts move around, but it is by no means a working game. It's flexible in that it can be opened in a browser window or launched as a separate window. The interface controls for each individual game will need to be bound in with the game, or it can be in a different file brought in as an XUL overlay.

To view this XUL grid in Mozilla:

  1. Get a current nightly build of Mozilla, at least newer than 7/10/00.
  2. Download the file.
  3. Unzip and open pagman.xul in Mozilla.
  4. Next steps

    To turn this file into a game, we'll need to program some functionality into this framework, including collision detection, score keeping, intelligence for ghosts, and controls for moving the character. In the next article, we'll go over how we were able to get this in place and what problems we ran into during this process.

    After this game is finished, we hope to be able to provide a general framework that will allow others to write Mozilla-based games more easily so we will be able to play more than just PAGMAN. This might involve working with the Amoeba project to create a general purpose gaming environment for Mozilla. Before we can do any of this though, we'll need to get the first game working. Read our next article to see how we managed to do this.

    David Boswell, Robert Watt has been involved in the Mozilla community for more than six years. He is also a coauthor of Creating Applications with Mozilla and helped launch

    Also this week:

    Mindstorms in Education

    Linux Gaming Resources

    Get the Inside Scoop on the Mozilla Project

    Open Source Roundtable: Where's That Lizard?!With audio

    Discuss this article in the Browsers Forum.

    Return to the Mozilla DevCenter.