本文實例為大家分享了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 = 'http://www.4tl426be.cn/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 = 'http://www.4tl426be.cn/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;}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。