原生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 = 'https://www.haobala.com/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 = 'https://www.haobala.com/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;}

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