js实现贪吃蛇游戏含注释
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下
两个小时完成的，有点简陋。
直接看效果。打开调试面板，在resource面板，新建snippet
粘贴以下代码，右键snippet，run。
clearInterval(timer);
document.body.innerHTML="";
//每秒移动多少格
letspeed=10;
letspeedUpMul=3;
//是否能穿墙
letisThroughTheWall=true;
//行数
letrow=40;
letheadColor='red';
letbodyColor='green';
letfoodColor='yellow';
letborderColor='grey';
//游戏全局变量
lethasFood=false;
//游戏状态
letgamestaus='start';
lethasAccelerate=false;
letmainContainer=document.createElement("div");
mainContainer.style.width=20*row+1+"px";
mainContainer.style.height=20*row+1+"px";
mainContainer.style.margin="0auto";
mainContainer.style.position="relative";
mainContainer.style.border="1pxsolid"+borderColor;
document.body.appendChild(mainContainer);
for(leti=0;irow-1)x=0;
if(y<0)y=row-1;
if(y>row-1)y=0;
}else{
if(x<0||y<0||x>row-1||y>row-1){
clearInterval(timer);
alert('游戏结束');
return;
}
}
this.x=x;
this.y=y;
this.color=color;
lettempDiv=document.getElementById(x+'div'+y);
if(tempDiv)tempDiv.style.backgroundColor=color;
}
}
snake={
head:{},
body:[],
dire:1
}
letheadx=Math.floor(Math.random()*14)+3;
letheady=Math.floor(Math.random()*14)+3;
snake.head=newCell(headx,heady,headColor);
//上右下左
letdirection=[1,2,3,4]
snake.dire=direction[Math.floor(Math.random()*4)];
if(snake.dire==1){
snake.body.push(newCell(snake.head.x,snake.head.y+1,bodyColor));
snake.body.push(newCell(snake.head.x,snake.head.y+2,bodyColor));
snake.body.push(newCell(snake.head.x,snake.head.y+3,bodyColor));
}
if(snake.dire==2){
snake.body.push(newCell(snake.head.x-1,snake.head.y,bodyColor));
snake.body.push(newCell(snake.head.x-2,snake.head.y,bodyColor));
snake.body.push(newCell(snake.head.x-3,snake.head.y,bodyColor));
}
if(snake.dire==3){
snake.body.push(newCell(snake.head.x,snake.head.y-1,bodyColor));
snake.body.push(newCell(snake.head.x,snake.head.y-2,bodyColor));
snake.body.push(newCell(snake.head.x,snake.head.y-3,bodyColor));
}
if(snake.dire==4){
snake.body.push(newCell(snake.head.x+1,snake.head.y,bodyColor));
snake.body.push(newCell(snake.head.x+2,snake.head.y,bodyColor));
snake.body.push(newCell(snake.head.x+3,snake.head.y,bodyColor));
}
functiongame(){
if(gamestaus=='pause'){
return;
}
if(gamestaus=='gameover'){
clearInterval(timer);
alert('游戏结束');
return;
}
initFood();
letsnakeHeadX=snake.head.x;
letsnakeHeadY=snake.head.y;
letcolor='';
if(snake.dire==1){
lettempDiv=document.getElementById(snakeHeadX+'div'+(snakeHeadY-1));
if(tempDiv)color=tempDiv.style.backgroundColor;
snake.head=newCell(snakeHeadX,snakeHeadY-1,headColor);
}
if(snake.dire==2){
lettempDiv=document.getElementById((snakeHeadX+1)+'div'+snakeHeadY);
if(tempDiv)color=tempDiv.style.backgroundColor;
snake.head=newCell(snakeHeadX+1,snakeHeadY,headColor);
}
if(snake.dire==3){
lettempDiv=document.getElementById(snakeHeadX+'div'+(snakeHeadY+1));
if(tempDiv)color=tempDiv.style.backgroundColor;
snake.head=newCell(snakeHeadX,snakeHeadY+1,headColor);
}
if(snake.dire==4){
lettempDiv=document.getElementById((snakeHeadX-1)+'div'+snakeHeadY);
if(tempDiv)color=tempDiv.style.backgroundColor;
snake.head=newCell(snakeHeadX-1,snakeHeadY,headColor);
}
snake.body.unshift(newCell(snakeHeadX,snakeHeadY,bodyColor));
if(color&&color==foodColor){
hasFood=false;
initFood();
}elseif(color&&color==bodyColor){
gamestaus='gameover';
}else{
letlastBody=snake.body.pop();
newCell(lastBody.x,lastBody.y,'');
}
}
vartimer=setInterval(game,10/speed*100)
/**
*初始化食物
*/
functioninitFood(){
while(!hasFood){
letx=Math.floor(Math.random()*row);
lety=Math.floor(Math.random()*row);
letsnakeBody=snake.body;
letenable=true;
if(snake.head.x==x&&snake.head.y==y){
enable=false;
}
for(sBodyofsnakeBody){
if(sBody.x==x&&sBody.y==y){
enable=false;
break;
}
}
if(enable){
newCell(x,y,foodColor);
hasFood=true;
}
}
}
document.onkeydown=function(e){
if(e.keyCode==38){
//上
if(snake.dire!=3&&snake.dire!=1){
snake.dire=1;
}elseif(snake.dire==1){
if(!hasAccelerate){
clearInterval(timer);
hasAccelerate=true;
speed=speed*speedUpMul;
timer=setInterval(game,10/speed*100)
}
}
}
if(e.keyCode==39){
//右
if(snake.dire!=4&&snake.dire!=2){
snake.dire=2;
}elseif(snake.dire==2){
if(!hasAccelerate){
clearInterval(timer);
hasAccelerate=true;
speed=speed*speedUpMul;
timer=setInterval(game,10/speed*100)
}
}
}
if(e.keyCode==40){
//下
if(snake.dire!=1&&snake.dire!=3){
snake.dire=3;
}elseif(snake.dire==3){
if(!hasAccelerate){
clearInterval(timer);
hasAccelerate=true;
speed=speed*speedUpMul;
timer=setInterval(game,10/speed*100)
}
}
}
if(e.keyCode==37){
//左
if(snake.dire!=2&&snake.dire!=4){
snake.dire=4;
}elseif(snake.dire==4){
if(!hasAccelerate){
clearInterval(timer);
hasAccelerate=true;
speed=speed*speedUpMul;
timer=setInterval(game,10/speed*100)
}
}
}
//空格键暂停
if(e.keyCode==32){
if(gamestaus=='start'){
gamestaus='pause';
}elseif(gamestaus=='pause'){
gamestaus='start';
}
}
}
document.onkeyup=function(e){
if(e.keyCode==38){
//上
if(snake.dire==1&&hasAccelerate){
clearInterval(timer);
hasAccelerate=false;
speed=speed/speedUpMul;
timer=setInterval(game,10/speed*100)
}
}
if(e.keyCode==39){
//右
if(snake.dire==2&&hasAccelerate){
clearInterval(timer);
hasAccelerate=false;
speed=speed/speedUpMul;
timer=setInterval(game,10/speed*100)
}
}
if(e.keyCode==40){
//下
if(snake.dire==3&&hasAccelerate){
clearInterval(timer);
hasAccelerate=false;
speed=speed/speedUpMul;
timer=setInterval(game,10/speed*100)
}
}
if(e.keyCode==37){
//左
if(snake.dire==4&&hasAccelerate){
clearInterval(timer);
hasAccelerate=false;
speed=speed/speedUpMul;
timer=setInterval(game,10/speed*100)
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。