原生js canvas实现简单贪吃蛇_js教程

本文实例为大家分享了js canvas实现简单贪吃蛇的具体代码，供大家参考，具体内容如下

Js原生贪吃蛇：canvas

HTML

				?

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

CSS

				?

									#can{

									 background: #000000;

									 height: 400px;

									 width: 850px;

									}

				?

									//公共板块

									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;

									}