原生js canvas实现简单贪吃蛇

2023-07-04 11:34:04 303

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

Js原生贪吃蛇：canvas

HTML

CSS

#can{
background:#000000;
height:400px;
width:850px;
}

//公共板块

varblockSize=10;
//地图的高宽
varmapW=300;
varmapH=150;
//历史食物var
varhistoryfood=newArray();
//食物数组
varimg=newImage()
vararrFood=["ananas.png","hamburg.png","watermelon.png"]
historyfood=[{x:0,y:0}];
//贪吃蛇默认值
varsnake=[{x:3,y:0},{x:2,y:0},{x:1,y:0}]

//贪吃蛇方向
vardirectionX=1;
vardirectionY=0;
//添加一个标记,标记食物是否被吃掉
//默认值：没有被吃掉
varisFood=false;
//判断游戏状态
//默认游戏继续
vargameState=false;

//限制贪吃蛇所移动的方向不能反方向操作
varlockleft=true;
varlockright=true;
varlockup=true;
varlockdown=true;

//贪吃蛇分数
varcount=0;
//贪吃蛇速度
varspeed=1000-(count+5);
$(function(){
$("#divContainer").height($("#can").height());
//1,获取到画布对象
varcan=document.getElementById("can");
//2,获取到画图工具箱
vartools=can.getContext('2d');
tools.beginPath();
//设置食物默认值
varXY=Randomfood();
console.log(XY);
varx1=Randomfood().x;
vary1=Randomfood().y;
img.src="/aimless/img/GluttonousSnakeFood/"+arrFood[Math.floor(Math.random()*arrFood.length)];
//控制贪吃蛇移动
document.addEventListener('keydown',function(e){
switch(e.keyCode){
case38:
if(lockup){
directionX=0;
directionY=-1;
lockdown=false;
lockleft=true;
lockright=true;
}
break;
case40:
if(lockdown){
directionX=0;
directionY=1;
lockup=false;
lockleft=true;
lockright=true;
}
break;
case37:
if(lockleft){
directionX=-1;
directionY=0;
lockright=false;
lockup=true;
lockdown=true;
}
break;
case39:
if(lockright){
directionX=1;
directionY=0;
lockleft=false;
lockup=true;
lockdown=true;
}
break;
}
})
setIntervalSnake(tools,x1,y1);
//4,找位置
})


functionsetIntervalSnake(tools,x1,y1){
setInterval(function(){
if(gameState){
return;
}
//1,擦除画板
tools.clearRect(0,0,850,420);
varoldHead=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()
}
varnewHead={
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);
//蛇身数组
varThesnakebody=newArray();
//3,画蛇
for(vari=0;i{
if(item.x==snake[0].x&&item.y==snake[0].y){
gameState=true;
setIntervalSnake(tools,x1,y1);
}
})
//4,画地图
varwidth=Math.round($("#can").width()/blockSize);
varheight=Math.round($("#can").height()/blockSize);
for(vari=1;i{
console.log(RandomX/blockSize,RandomY/blockSize);
//console.log(item.x,item.y);
if(item.x==RandomX/blockSize&&item.y==RandomY/blockSize){
returnRandomfood();
}else{
return;
}
})
},10/3);
varnewRandom={
x:RandomX,
y:RandomY
}
returnnewRandom;
}

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

原生js canvas实现简单贪吃蛇

热门推荐

随机推荐