The domain model of a web application using Object Oriented JavaScript.

As I mentioned in Part 0, this series of blogs requires a simple web application which we will implement with object oriented techniques in order to learn how JavaScript behaves by doing. The ‘simple web application’ I’ve chosen is the game of memory. Memory is a simple tile based game where the player turns over two tiles at a time in an attempt to find a match. When a match is found, the player earns a few points and can turn over more tiles until the entire board is solved.

I called it a tile game, but it’s also easy to think of it as a card game. Tiles or cards, take your pick. I probably use a little of each analogy in my objects.

The following object/class diagram describes the objects we need in order to implement our game.

I won’t walk through each object, but I will mention a few notions that aren’t expressly identified in this diagram.

• each object contains an init() function which is used to set the initial values of its instance variables.
• container instance variables are pointers to the HTML element that is used to display the object.
• update() functions update the UI by updating the innerHTML of the container object.
• PageManager uses the TagFactory to get new HTML Elements inserted into the Body element of the current web page. It then assigns that new ‘container’ to the object that will use it.
• Board uses ItemFactory to get a new Item for each Tile as it generates the set of Tiles that make up the playing area. The file0 and file1 instance variables in items reference the filename of graphics that will be used for each side of the tile. (All tiles share the side0 graphic, of course.)
• PageManager, TagFactory, and ItemFactory are Singletons.

Don’t worry too much about how this is supposed to work! We’ll gain an intimate knowledge of this domain model as we delve around in its innards over the course of a few more posts.

Copyright © 2010 Brian O’Dell