原生JS Canvas实现简单贪吃蛇游戏

贪吃蛇游戏实现概述

本文分享了一个使用JavaScript和Canvas技术实现的简易贪吃蛇游戏完整代码，供读者参考学习。

使用原生JavaScript通过Canvas绘制贪吃蛇游戏界面。

HTML结构搭建

HTML结构部分。

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

CSS样式设置

CSS样式部分。

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

JavaScript核心逻辑

JavaScript逻辑部分。

//公共板块

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,y:0},{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.getContext('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,x1,y1){
 setInterval(function (){
  if (gameState){
   return;
  }
  //1,擦除画板
  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("游戏结束");
  }else {
   //蛇移动
   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,判断食物是否被吃掉，吃掉刷新,不吃掉不刷新
  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);
  //蛇身数组
  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,blockSize);
  }
  // //判断蛇头咬到了蛇身
  Thesnakebody.forEach(item=>{
   if(item.x == snake[0].x && item.y == snake[0].y){
    gameState = true;
    setIntervalSnake(tools,x1,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;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。