本文例項為大家分享了js canvas實現簡單貪吃蛇的具體程式碼，供大家參考，具體內容如下

Js原生貪吃蛇：canvas

HTML

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

css

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

JS

//公共板塊

var blockSize = 10;
//地圖的高寬
var mapW = 300;
var mapH = 150;
//歷史食物var
var historyfood = new Array();
//食物陣列
var img = new Image()
var arrFood = ["ananas.png","hamburg.png","watermelon.png"]
historyfood =[{x: 0,y:0}];
//貪吃蛇預設值
var snake = [{x:3,y:0},{x:2,{x:1,y:0}]

//貪吃蛇方向
var directionX = 1;
var directionY = 0;
//新增一個標記,標記食物是否被吃掉
//預設值：沒有被吃掉
var isFood = false;
//判斷遊戲狀態
//預設遊戲繼續
var gameState = false;

//限制貪吃蛇所移動的方向不能反方向操作
var lockleft = true;
var lockright = true;
var lockup = true;
var lockdown = true;

//貪吃蛇分數
var count = 0;
//貪吃蛇速度
var speed = 1000 - (count + 5);
$(function () {
 $("#divContainer").height($("#can").height());
 //1,獲取到畫布物件
 var can = document.getElementById("can");
 //2,獲取到畫圖工具箱
 var tools = can.getCont
 
程式設計客棧ext('2d');
 tools.beginPath();
 //設定食物預設值
 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)];
 //控制貪吃蛇移動
 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,找位置
})


function setIntervalSnake(tools,y1){
 setInterval(function (){
  if (gameState){
   return;
  }
  //1,擦除畫板
  tools.clearRect(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("遊戲結束");
  }else {
   //蛇移動
   if (snake[0].x wbxMsI* blockSize === x1 && snake[0].y * blockSize === y1){
    isFood = true;
   } else {
    snake.powww.cppcns.comp()
   }
   var newHead = {
    x: oldHead.x + directionX,y: oldHead.y + directionY
   }
   snake.unshift(newHead);
  }
  //2,判斷食物是否被吃掉，吃掉重新整理,不吃掉不重新整理
  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,y1,blockSize,blockSize);
  //蛇身陣列
  var Thesnakebody = new Array();
  //3,畫蛇
  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);
  }
  // //判斷蛇頭咬到了蛇身
  Thesnakebody.forEach(item=>{
   if(item.x == snake[0].x && item.y == snake[0].y){
    gameState = true;
    setIntervalSnake(tools,y1);
   }
  })
  //4,畫地圖
  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,繪製
  tools.stroke();
 },speed / 3);
}


//隨機食物不
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;
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。