快捷導(dǎo)航

原生js canvas實現(xiàn)簡單貪吃蛇

更新時間：2021年03月10日 08:01:11 作者：深夜猿

這篇文章主要為大家詳細介紹了原生js canvas實現(xiàn)簡單貪吃蛇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js canvas實現(xiàn)簡單貪吃蛇的具體代碼，供大家參考，具體內(nèi)容如下

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();
//食物數(shù)組
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;
//添加一個標(biāo)記,標(biāo)記食物是否被吃掉
//默認值：沒有被吃掉
var isFood = false;
//判斷游戲狀態(tài)
//默認游戲繼續(xù)
var gameState = false;

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

//貪吃蛇分數(shù)
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();
 //設(shè)置食物默認值
 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("游戲結(jié)束");
  }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);
  //蛇身數(shù)組
  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;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: