Html5 snake canvas games

A snake is a classic game. Although I was a little bit of a game, I was able to play this kind of game that didn't require brainpower.

The snake-greedy algorithm is not complex. It mainly refers to the decomposition and storage of each part of the snake body in the array. When every movement, a [n-1] = a [n], assign the value of each previous element to the next element. Finally, reset the position and direction of the first element a [0.

// R indicates the snake, and co indicates the direction of the Snake. The default value is downward. e indicates the food var r = [{x: 10, y: 9}, {x: 10, y: 8}], co = 40, e = null;

Below is the snake's mobile Algorithm

Function move () {// whether the game is over if (check (r [0], 0) | r [0]. x <0 | r [0]. x> = 24 | r [0]. y <0 | r [0]. y> = 24) {return;} // if there is any food, determine whether the food has been eaten Based on the forward direction of the snake, and change the last element in the snake array to the First e! = Null & (co = 40 & r [0]. x = e. x & r [0]. y + 1 = e. y) | (co = 38 & r [0]. x = e. x & r [0]. y-1 = e. y) | (co = 37 & r [0]. x-1 = e. x & r [0]. y = e. y) | (co = 39 & r [0]. x + 1 = e. x & r [0]. y = e. y ))? (R. unshift (e), e = null, r. unshift (r. pop (), console. log ('food'): (r. unshift (r. pop (), console. log ('no food'); // Based on the direction, reset the coordinates of the snake array elements to move (co = 40 | co = 38 )? (R [0]. x = r [1]. x, r [0]. y = r [1]. y + (co = 40? 1:-1): (r [0]. x = r [1]. x + (co = 39? 1:-1), r [0]. y = r [1]. y); console. dir (r); // clear screen ctx. clearRect (0, 0,240,240); // if there is food, draw the food if (e) {ctx. fillRect (e. x * 10, e. y * 10, 10, 10);} // draw a snake for (var I = 0; I <r. length; I ++) {ctx. fillRect (r [I]. x * 10, r [I]. y * 10, 10, 10);} // if there is no food, add a random food while (e = null | check (e )) {e = {y: (Math. random () * 24> 0), x: (Math. random () * 24 >>> 0)}; console. dir (e);} // determines whether the game is over if (Check (r [0], 0) | r [0]. x <0 | r [0]. x> = 24 | r [0]. y <0 | r [0]. y> = 24) {alert ('game over! The length is: '+ (r. length-2 ));}}

Last bind button

// Add a keyboard event and use the arrow key to control the forward direction of the snake document. onkeyup = function (event) {co = event. keyCode> = 37 & event. keyCode <= 40 & (Math. abs (event. keyCode-co )! = 2 )? Event. keyCode: co ;}

When a random food is generated: determines whether the food matches a snake.

// Determine whether the specified Position overlaps with the snake. function check (e, j) {for (var I = 0; I <r. length; I ++) {if (j! = I & r [I]. x = e. x & r [I]. y = e. y) {return true;} return false ;}}

Complete html file on my github: https://github.com/chenkehxx/practice/blob/test/gluttonousSnake.html