HTML5 Snake Game Implementation ideas and source code

Comments: The difficulty of the game is to simulate the movement of snakes. If it is just a square, it is obviously very simple. But how to control the length of a snake when it grows? The following describes how to implement it. If you are interested, refer to it and hope to help you.
Game operation instructions

The arrow keys are used to control the movement of the snake between the top, bottom, and left. After a snake eats food, the length will grow.

Specific game implementation

The difficulty of the game is to simulate the movement of snakes. If it is just a square, it is obviously very simple. But how can we control the length of a snake?

What about the movement of each square?

If you observe the movement of the snake, you can find that, from the snake's head to the tail, each square is located at the next moment, that is, its previous square is at the current moment.

. So what we need to do is to control the movements of the snake's head. The positions of other parts can be same.

Another noteworthy issue is:

Where should the newly added square be placed after a snake eats food.

The answer is that the newly added square should appear at the end of the current moment at the next moment.

Therefore, after eating food, you should add a square before updating each position of the snake and set its position at the end of the current time point.

Then, the positions of all blocks except the newly added blocks are updated at the current time.

Index.html
 
Snake. js

The Code is as follows:
Var canvas;
Var ctx;
Var timer;
// Measures
Var x_cnt = 15;
Var y_cnt = 15;
Var unit = 48;
Var box_x = 0;
Var box_y = 0;
Var box_width = 15 * unit;
Var box_height = 15 * unit;
Var bound_left = box_x;
Var bound_right = box_x + box_width;
Var bound_up = box_y;
Var bound_down = box_y + box_height;
// Images
Var image_sprite;
// Objects
Var snake;
Var food;
Var food_x;
Var food_y;
// Functions
Function Role (sx, sy, sw, sh, direction, status, speed, image, flag)
{
This. x = sx;
This. y = sy;
This. w = sw;
This. h = sh;
This. direction = direction;
This. status = status;
This. speed = speed;
This. image = image;
This. flag = flag;
}
Function transfer (keyCode)
{
Switch (keyCode)
{
Case 37:
Return 1;
Case 38:
Return 3;
Case 39:
Return 2;
Case 40:
Return 0;
}
}
Function addFood ()
{
// Food_x = box_x + Math. floor (Math. random () * (box_width-unit ));
// Food_y = box_y + Math. floor (Math. random () * (box_height-unit ));
Food_x = unit * Math. floor (Math. random () * x_cnt );
Food_y = unit * Math. floor (Math. random () * y_cnt );
Food = new Role (food_x, food_y, unit, unit, 0, 0, 0, image_sprite, true );
}
Function play (event)
{
Var keyCode;
If (event = null)
{
KeyCode = window. event. keyCode;
Window. event. preventDefault ();
}
Else
{
KeyCode = event. keyCode;
Event. preventDefault ();
}
Var cur_direction = transfer (keyCode );
Snake [0]. direction = cur_direction;
}
Function update ()
{
// Add a new part to the snake before move the snake
If (snake [0]. x = food. x & snake [0]. y = food. y)
{
Var length = snake. length;
Var tail_x = snake [length-1]. x;
Var tail_y = snake [length-1]. y;
Var tail = new Role (tail_x, tail_y, unit, unit, snake [length-1]. direction, 0, 0, image_sprite, true );
Snake. push (tail );
AddFood ();
}
// Modify attributes
// Move the head
Switch (snake [0]. direction)
{
Case 0: // down
Snake [0]. y + = unit;
If (snake [0]. y> bound_down-unit)
Snake [0]. y = bound_down-unit;
Break;
Case 1: // left
Snake [0]. x-= unit;
If (snake [0]. x <bound_left)
Snake [0]. x = bound_left;
Break;
Case 2: // right
Snake [0]. x + = unit;
If (snake [0]. x> bound_right-unit)
Snake [0]. x = bound_right-unit;
Break;
Case 3: // up
Snake [0]. y-= unit;
If (snake [0]. y <bound_up)
Snake [0]. y = bound_up;
Break;
}
// Move other part of the snake
For (var I = snake. length-1; I> = 0; I --)
{
If (I> 0)
// Snake [I]. direction = snake [I-1]. direction;
{
Snake [I]. x = snake [I-1]. x;
Snake [I]. y = snake [I-1]. y;
}
}
}
Function drawScene ()
{
Ctx. clearRect (box_x, box_y, box_width, box_height );
Ctx. strokeStyle = "rgb (0, 0 ";
Ctx. strokeRect (box_x, box_y, box_width, box_height );
// Detection collisions
// Draw images
For (var I = 0; I <snake. length; I ++)
{
Ctx. drawImage (image_sprite, snake [I]. x, snake [I]. y );
}
Ctx. drawImage (image_sprite, food. x, food. y );
}
Function init ()
{
Canvas = document. getElementById ("scene ");
Ctx = canvas. getContext ('2d ');
// Images
Image_sprite = new Image ();
Image_sprite.src = "images/sprite.png ";
Image_sprite.onLoad = function ()
{}
// Ojects
Snake = new Array ();
Var head = new Role (0 * unit, 0 * unit, 5, 0, 1, image_sprite, true );
Snake. push (head );
Window. addEventListener ('keylow', play, false );
AddFood ();
SetInterval (update, 300); // note
SetInterval (drawScene, 30 );
}

Related reading: html5 snake games are perfectly implemented using 63 lines of code