A DOM-Based Snakes Game, Part II

A DOM-Based Snakes Game, Part II

In our previous column, A DOM-Based Snakes Game, Part I, we showed you the architecture of the Snakes game and the structure of the DOM that models it. We explained to you how to write the main script and we went over the global variables and their roles. In this column, we'll explain the rest of the script. We'll go over all functions and explain their objectives and algorithms.

The game's version presented here is slightly different than the one presented in the previous column. First, we have added several checks that made the game more robust. Secondly, we have implemented levels. The snake's speed doubles every time the player scores another 6 points. Go ahead and try the new version now. As an exercise, take the code from the previous column and try to implement the levels. See how different is your code from our version.

In this column we want to emphasize two particular programming aspects. The first one is how to build a JavaScript application around the DOM. We'll cover a lot of code in this column so you'll have to pay close attention to details. The second one is the software engineering side of the script. As a habit, we give long descriptive names to functions and variables. This practice makes the code relatively more readable and almost nullifies the need for easy-to-get-stale in-line documentation.

In particular, you'll learn:

• How to build the game's DOM
• How to load the game's board
• How to load the game's objects
• How to interact with the users
• How to move the snake
• How to handle collisions with the border and with itself
• How to win points in the game

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

Produced by Yehuda Shiran and Tomer Shiran

Created: Aug 30, 1999
Revised: Aug 30, 1999

URL: https://www.webreference.com/js/column47/