HTML5 Snake Game Implementation ideas and source code _ html5 tutorial skills-

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,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, unit, unit, 5, 0, 1, image_sprite, true); snake.push(head); window.addEventListener('keydown', play, false); addFood(); setInterval(update, 300); //note setInterval(drawScene, 30); }