本文实例为大家分享了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;
//历史食物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;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_41043296/article/details/114527235
查看更多关于原生js canvas实现简单贪吃蛇的详细内容...