Native js canvas Implementation of Simple Snake

This article example for everyone to share js canvas implementation of simple snake specific code, for your reference, the specific content is as follows

Js Native Snake: canvas

HTML

<canvas id="can"></canvas>

CSS

#can{
 background: #000000;
 height: 400px;
 width: 850px;
}

JS

// Public sector 

var blockSize = 10;
// The height and width of a map 
var mapW = 300;
var mapH = 150;
// Historical food var
var historyfood = new Array();
// Food array 
var img = new Image()
var arrFood = ["ananas.png","hamburg.png","watermelon.png"]
historyfood =[{x: 0,y:0}];
// Snake Default 
var snake = [{x:3,y:0},{x:2,y:0},{x:1,y:0}]

// Snake-eating direction 
var directionX = 1;
var directionY = 0;
// Add 1 Tags , Mark whether the food has been eaten 
// Default: Not eaten 
var isFood = false;
// Judge the state of the game 
// The default game continues 
var gameState = false;

// Restrict the direction in which the snake moves. You can't operate in the opposite direction 
var lockleft = true;
var lockright = true;
var lockup = true;
var lockdown = true;

// Snake score 
var count = 0;
// Snake speed 
var speed = 1000 - (count + 5);
$(function () {
 $("#divContainer").height($("#can").height());
 //1, Get to Canvas Object 
 var can = document.getElementById("can");
 //2, Get to the Drawing Toolbox 
 var tools = can.getContext('2d');
 tools.beginPath();
 // Set food defaults 
 var XY = Randomfood();
 console.log(XY);
 var x1 = Randomfood().x;
 var y1 = Randomfood().y;
 img.src = "/aimless/img/GluttonousSnakeFood/"+ arrFood[Math.floor(Math.random() * arrFood.length)];
 // Control the movement of gluttonous snakes 
 document.addEventListener('keydown',function (e){
  switch (e.keyCode) {
   case 38:
    if (lockup){
     directionX = 0;
     directionY = -1;
     lockdown = false;
     lockleft = true;
     lockright = true;
    }
    break;
   case 40:
    if (lockdown){
     directionX = 0;
     directionY = 1;
     lockup = false;
     lockleft = true;
     lockright = true;
    }
    break;
   case 37:
    if (lockleft){
     directionX = - 1;
     directionY = 0;
     lockright = false;
     lockup = true;
     lockdown = true;
    }
    break;
   case 39:
    if (lockright){
     directionX = 1;
     directionY = 0;
     lockleft = false;
     lockup = true;
     lockdown = true;
    }
    break;
  }
 })
 setIntervalSnake(tools,x1,y1);
 //4, Find a position 
})


function setIntervalSnake(tools,x1,y1){
 setInterval(function (){
  if (gameState){
   return;
  }
  //1, Erase the drawing board 
  tools.clearRect(0,0,850,420);
  var oldHead = snake[0];

  if (oldHead.x < 0 || oldHead.y < 0 || oldHead.x * blockSize >= mapW || oldHead.y * blockSize >= mapH){
   gameState = true;
   alert(" Game over ");
  }else {
   // Snake movement 
   if (snake[0].x * blockSize === x1 && snake[0].y * blockSize === y1){
    isFood = true;
   } else {
    snake.pop()
   }
   var newHead = {
    x: oldHead.x + directionX,
    y: oldHead.y + directionY
   }
   snake.unshift(newHead);
  }
  //2, Judge whether the food has been eaten, eat and refresh , Don't eat, don't refresh 
  if (isFood){
   count = count + 1;
   $("#count").html(count);
   x1 = Randomfood().x;
   y1 = Randomfood().y;
   img.src = "/aimless/img/GluttonousSnakeFood/"+ arrFood[Math.floor(Math.random() * arrFood.length)];
   isFood = false;
  }
  tools.drawImage(img,x1,y1,blockSize,blockSize);
  // Snake body array 
  var Thesnakebody = new Array();
  //3, Draw a snake 
  for (var i = 0; i < snake.length; i++){
   if (i == 0){
    tools.fillStyle = "#9933CC";
   } else {
    var newHead1 = {
     x: snake[i].x,
     y: snake[i].y
    }
    Thesnakebody.unshift(newHead1);
    tools.fillStyle = "#33adcc";
   }
   tools.fillRect(snake[i].x * blockSize,snake[i].y * blockSize,blockSize,blockSize);
  }
  // // Judge that the snake head bit the snake body 
  Thesnakebody.forEach(item=>{
   if(item.x == snake[0].x && item.y == snake[0].y){
    gameState = true;
    setIntervalSnake(tools,x1,y1);
   }
  })
  //4, Draw a map 
  var width = Math.round($("#can").width() / blockSize);
  var height = Math.round($("#can").height() / blockSize);
  for (var i = 1; i < width;i++){
   tools.moveTo(0,blockSize * i);
   tools.lineTo($("#can").width(),blockSize * i);
  }
  for (var i = 1; i < height;i++){
   tools.moveTo(blockSize * i,0);
   tools.lineTo(blockSize * i,$("#can").height());
  }
  tools.strokeStyle = "#FFFFFF";
  //5, Draw 
  tools.stroke();
 },speed / 3);
}


// Random food does not 
function Randomfood() {
 var RandomX = Math.floor(Math.random() * mapW / blockSize) * blockSize;
 var RandomY = Math.floor(Math.random() * mapH / blockSize) * blockSize;
 setInterval(function (){
  snake.forEach(item=>{
   console.log(RandomX / blockSize,RandomY / blockSize);
   // console.log(item.x,item.y);
   if(item.x == RandomX / blockSize && item.y == RandomY / blockSize){
    return Randomfood();
   } else {
    return ;
   }
  })
 }, 10 / 3);
 var newRandom = {
  x: RandomX,
  y: RandomY
 }
 return newRandom;
}