A DOM-Based Sliding Puzzle: A Final Word

A DOM-Based Sliding Puzzle (10)

A Final Word

In this column we showed you how to write a DOM-based JavaScript application. We picked a sliding puzzle as an example. We showed you the architecture of the game and the relationship between the game pieces and the DOM tree. We started from the main script and explained to you its overall flow. We then showed you how to build the DOM tree, how to load the picture, and how to scramble it before every game. In this column we demonstrated that DOM-based programming is more versatile and much more convenient than DHTML-based programming. We also rehashed several methods that we introduced in previous columns. In particular, we used methods that create, clone, append, and swap DOM tree nodes. In this column you learned:

• 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 included the game's complete listing and its zipped version as well.