O'Reilly Network    
 Published on O'Reilly Network (http://www.oreillynet.com/)
 See this if you're having trouble printing code examples


Building a Game in Mozilla

by David Boswell, Brian King and Robert Watt
06/30/2000

This column is a work in progress -- a chronicle of the authors' effort to rebuild an 80s arcade game in Mozilla using XML, Cascading Style Sheets (CSS), and JavaScript. The authors are testing their theory that Mozilla is a capable, versatile, cross-platform environment. Join them on their journey to develop an application that runs equally well on Macs, PCs, and Linux. This is a "warts and all" project, so if it fails, you'll see why.


For the Record
We discovered that the game that inspired our work is still protected under copyright (all these years later), so we were careful not to copy it or refer to it using its original name. We are able to say, however, that we are creating a Powerpellet And Ghost Mozilla Architected Node. For convenience, we'll just refer to our Mozilla game as PAGMAN for the rest of the article.

Bleeding-edge early 80s technology: Part One

In a way, this is like connecting a DSL line to a Commodore 64 computer. We're working on rewriting an arcade game from the early 80s using Mozilla technologies. By combining two different technologies from two very different times, we hope to be able to learn something new from examining a classic example of programming in a new way.

Our intention is to show that Mozilla has the ability to be more than a web browser. Other demonstrations of alternate uses of Mozilla like the Script Editor and XMLTerm already do this, although these tend to feel more like extensions of the existing Mozilla framework. A more radical non-browser application of Mozilla would have the benefit of extending the discussion of Mozilla as a platform and might bring new people into the community who are interested in this new aspect of the project.

Why this game? Why Mozilla?

In the 20 years since the arcade game that we are emulating came out, many different versions have been created in many different ways. We'll re-create this game one more time because it's a programming tradition to take an old concept and rehash it in new ways to learn more about a language or technology.

Other web-based clones of this game exist on the Internet. Most of these versions were created in one of two ways: using the inconsistent and limited implementations of DHTML in current browsers, or using Java, which can be buggy and may result in horrendous lag time.

Mozilla offers a new choice -- one that's open source and in full compliance with current Internet standards. For this reason, many people are looking to Mozilla as a development platform. This project takes advantage of Mozilla's support for JavaScript 1.5, the Document Object Model, and XML. We can create a XUL framework for PAGMAN that resembles a real arcade game, and with a little hacking at the Mozilla code itself, we can even enable joystick support.

Dynamic XML

PAGMAN is being developed in XML because of its efficient data-handling capability. Because we're working in Mozilla, we won't worry about the problem that prevents XML from being more widely deployed on the web today: lack of browser support. (Even Internet Explorer 5's XML support is partial and not compliant with the W3C's standard.)

Working in Mozilla also ensures full support for the Document Object Model, JavaScript, and CSS. This will allow us to dynamically control our XML foundation.

DHTML has also languished to some degree because of incomplete support in the browser. As Mozilla's popularity spreads, we can expect to advance the evolution of DHTML into DXML, or Dynamic XML. This is the real reason we decided to use XML in our project. We certainly could have used HTML that would work in 4.0 and higher browsers, but the goal of this project is to use new technologies to create possibilities that didn't exist before.

The XML grid

The game maze is represented as an XML grid of graphical elements. We only need a handful of these elements to create the grid: dots, power pellets, vertical walls, horizontal walls, blanks, and four different corner elements (upper right, upper left, lower right, and lower left).

Our XML file is fairly simple. It allows each of the graphics to map to a unique section of the grid structure. We haven't built the entire maze yet, but have proven the concept with a sample 6x5 grid. Our sample contains each of the different graphic elements to show how they work together.

The XML tagset contains column tags contained within row tags. In our sample grid, 30 unique points have been created that can be tracked individually. Although we are using generic graphic elements, each point on the grid is unique. This means we can control each point on the grid, allowing us to change a dot to a blank after the dot has been eaten. Here's an example of the code for one row of the sample grid:


	<row_04>
		<col_01 class="vert_wall" />
		<col_02 class="powerup" />
		<col_03 class="vert_wall" />
		<col_04 class="blank" />
		<col_05 class="blank" />
		<col_06 class="vert_wall" />
	</row_04>
See the full code for the sample XML grid file.

The grid created with this file can be displayed on-screen using an associated CSS file. The style sheet maps the different graphic elements to each of the grids using the class values assigned to the tags in the XML file.

The fully working XML+CSS grid has not been completed yet, but an HTML version of this sample grid shows the different elements together. One view of the grid shows the individual pieces separated, and the other shows the same images joined to form a coherent section of the maze.

Now, it's simply a matter of expanding the XML file to map each of the different grid points to finish the maze. Once this basic foundation is in place, the other elements can be added and hooked in to the functionality that will make the game run.

Next steps

In the next article of this series, we'll take a look at the layer that sits on top of the XML grid. This layer will contain the moving elements that make the game playable, the ghosts and our some-other-color-than-yellow PAGMAN. The functionality of this layer will be created using JavaScript and style sheets to manipulate the graphic elements across the grid.

This series will end with an article that details taking the working game and wrapping it inside an arcade-like XUL shell complete with movement commands and game options built into our Mozilla-based application. We hope this will demonstrate the creation of a full-featured non-browser application that runs on Windows, Linux, and Macintosh computers.

Related Articles:

Tap the Power of Mozilla's User Style Sheets

Extending the Mozilla Editor

Of course, the next article might be all about how we were completely wrong about our XML grid approach to creating this game. We are developing PAGMAN at the same time we are writing about it, so we can only guess how this project will turn out. We will be keeping track of our errors along with our progress, and we will tell about both in future articles in this series.


Discuss this article in the O'Reilly Network Browsers Forum.

Return to the O'Reilly Network Hub.

Copyright © 2009 O'Reilly Media, Inc.