原生js canvas实现简单贪吃蛇

本文实例为大家分享了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;
    //历史食物varvar 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;
}
    

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

• JS写的贪吃蛇游戏(个人练习)
• javascript贪吃蛇完整版(源码)
• js实现贪吃蛇小游戏（容易理解）
• JS实现的贪吃蛇游戏完整实例
• 20行js代码实现的贪吃蛇小游戏
• js编写贪吃蛇的小游戏
• js贪吃蛇游戏实现思路和源码
• javascript 贪吃蛇实现代码
• javascript实现简单的贪吃蛇游戏
• 原生js实现的贪吃蛇网页版游戏完整实例

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！