Snake − LX

For this game a little XSS is used. It uses background colors of table cells, so if some values are changed here they also have to be changed in the code.

---

In the CSS part the background color of the snake's container and the size of one table cell is defined:

So one cell ist 15×15 pixels. Now to the actual script. At first the usual global variable declarations. A counter variable

the direction the snake is heading

a variable to block further key presses

if the game is over or not

the cell currently worked on

countdown

for a fruit

current level

amount of fruits that still have to be eaten

additional variables

the snake

head of the snake

The following function is called when a key is pressed. It changes the Richtung variable if a certain cursor key is pressed.

Following are some arrays containing images that are shown on screen at certain times. Among them are the countdown numbers (C1 to C3), the smiley when you beat a level, a sad smiley when you lost the game and 2 more smileys which create an animated cheering smiley if you beat the whole game. I leave out the values for those arrays here, they can be found in the source code of the game itself or you can create your own images.

Afterwards the arrays for the different levels.

The following function is called when a game is started.

At first the New Game button is hidden and the number of the current level is printed out. Also block is set to 1 to block key presses.

If the Countdown variable contains a value and at the same time fnord==0 (i.e. if the game is not paused) the the countdown decrements. The screen is cleared (call of reset()), the current value of Countdown is displayed and the variable decremented by 1. Afterwards Start() is called again after 1 second.

Is the countdown however at 0 the actual level is started. The screen is also cleared and the number of fruits to collect is set to 10

The Snake[] array is cleared and the position of the snake and its head on the field is written in the corresponding variables.

The key lock is revoked, the direction of the snake's movement after the beginning is set, a new fruit is generated (with Happen()), the obstacles of the current level are drawn (with Hindernisse()), the Pause button is hidden and the game flow function is called.

Function Pause() is used to stop the game between levels. It uses the variable fnord which is checked as seen in the Start() function. Is this variable 1 the game is paused, otherwise it continues. Also the Pause button is labelled correspondingly. After every click on the Pause button Countdown is reset to 3.

Happen() creates a fruit. Since the playing field has 220 cells a random number between 0 and 219 is generated. Afterwards it's checked if the cell with that number is blocked by a part of the snake's body, by a wall or by an area in which no fruit is allowed because the snake couldn't reach it. If one of those cases is met the function is called again, if not the cell of the fruit is colored red.

Hindernisse() colors the cells of the Wall[] array grey.

Now we come to the heart of the game: the game flow function. It is responsible for the cycles of the game. The snake should always be in motion and the most important events are checked.

At first the position of the snake's head after the next movement is calculated by adding the value of Richtung to Kopf. Afterwards it's checked whether the head is still in the container or if it hit a wall. It's also checked if the snake bit its own tail and finally if it hit an obstacle.

If none of those cases is met it's checked if the snake just ate a fruit. If not, the first element of Snake[] is removed and the head is added as the last element (the snake practically moved one cell). If the fruit was eaten the number of fruits to collect is decremented and the head is added to Snake[] without cutting its tail (the snake grows by one cell with each eaten fruit). Finally a new fruit is created.

Of course the snake has to be drawn...

Now it's checked if there are more fruits to collect. If so the key lock is revoked for the next move and the function is called again after 300 milliseconds (so the snake makes a little more than 3 movements per second).

However if all needed fruits were already eaten the smiley image is drawn, the key lock set and the level number incremented. If the 15th level is beaten the cheering animation is started, if not the Countdown is set to 3 and the Start() function is called.

This branch is executed if the snake bit a wall, an obstacle or itself. In this case the sad smiley is drawn and the Countdown is reset for another game.

The following function animates the cheering smiley. It consists of 2 Frames which are swapped every 120 milliseconds.

This function draws the smiley. Additionally zuEnde is set to 0 since the current level is finished.

Here the sad smiley is printed out.

The following function draws the snake. The cell of the first element of the Snake() array is colored green and the rest of the array is colored black.

reset() clears the screen by coloring the cells with the green background color.

Now the HTML part of the game. At first we need a text element in which the current level number is written. It doesn't matter much which kind of an element is used here, what matters is the attribute id="Level" by which it is referred to by the functions. I chose the H2 tag because its default formatting fits the purpose of this element.

Also in the BODY you need the check if a key is pressed...

... and the playing field is created. This part could be hardcoded but I think this method is more elegant. Therefor counter variables for rows and columns are created and the HTML code is generated. Again the id="" is important here because every cell has to have a unique value, which consists of the word "Zelle" and a consecutive number.

Also an input field is needed to show the amount of fruits to eat.

Finally 2 buttons: one to start the game and another one to pause between levels. this.blur() in the event handler causes to remove focus from the button after it is pressed. Therefore it can't be hit again by using the space bar after it is hidden via CSS.