A DOM-Based Sliding Puzzle

A DOM-Based Sliding Puzzle

Now that we have laid down the foundations for the Document Object Model, it's about time to have some fun using it. So far we have taught you the DOM's methods and parameters. In this and next few columns we'll teach you how to write complete DOM-based applications. We chose to start off with a sliding 3x3 puzzle, featuring one of the South Park TV Series' characters. Thanks to Sweeet.com for their permission to use this picture. Go ahead and try it now.

The purpose of this column is to show you how to use the DOM's concepts in writing Internet applications. You'll learn how to design and architect your application as well as how to structure it internally. We'll show you different ways to use DOM's properties and methods, eliminating almost completely the need for the Dynamic HTML Model. We'll demonstrate to you that we can build a Web application which is based on mostly DOM code and almost without any HTML statements. DOM-based programming is much easier than HTML- or DHTML-based programming. This column is also a refresher on JavaScript programming. We'll emphasize along the way various coding and structuring techniques you should know about and feel comfortable to use.

In particular, you'll learn:

• How to architect the application
• How to analyze its DOM tree
• How to write the main program
• How to build the puzzle's DOM
• How to load the puzzle's picture
• How to scramble the puzzle
• How to interact with the player

We also include the game's complete listing and its zipped version as well.