JavaScript实现网页版贪吃蛇游戏
程序员文章站
2022-07-02 11:46:56
本文实例为大家分享了javascript实现网页贪吃蛇游戏的具体代码，供大家参考，具体内容如下以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。...
本文实例为大家分享了javascript实现网页贪吃蛇游戏的具体代码，供大家参考，具体内容如下
<!doctype html>
<html>
<head><title>贪吃蛇</title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
var canv=document.getelementbyid("canvas");
var ctx=canv.getcontext("2d");
var score=0;
//定义一个方块的构造函数
var block=function(col,row,size)
{
this.col=col;
this.row=row;
this.size=size;
};
//定义block函数的原型方法draw；
block.prototype.draw =function()
{
ctx.fillrect(this.col*this.size,this.row*this.size,this.size,this.size)
}
//定义对象蛇
var snake ={
body:[
new block(20,20,10),
new block(20,21,10),
new block(20,22,10)
],
direction:"right",
};
//定义画蛇的函数
snake.draw=function()
{
for(var i=0;i<this.body.length;i++)
{
this.body[i].draw();
}
};
snake.move = function()
{
var head = this.body[0];
if(snake.direction=="right")
{
var newhead=new block(head.col+1,head.row,head.size)
}
if(snake.direction =="left")
{
var newhead = new block(head.col-1,head.row,head.size);
}
if(snake.direction=="up")
{
var newhead=new block(head.col,head.row-1,head.size)
}
if(snake.direction=="down")
{
var newhead=new block(head.col,head.row+1,head.size)
}
if(newhead.col<0 || newhead.col>39 )
{
clearinterval(intervalid);
gameover();
}
if(newhead.row<0 || newhead.row>39 )
{
clearinterval(intervalid);
gameover();
}
for(var i=0;i<this.body.length;i++)
{
if(this.body[i].col==newhead.col &&this.body[i].row==newhead.row)
{
clearinterval(intervalid);
gameover();
}
}
this.body.unshift(newhead);
if(newhead.col==apple.posx &&newhead.row==apple.posy)
{
score=score+100;
while(true)
{
var checkapple =false;
apple.posx=math.floor(math.random()*40);
apple.posy=math.floor(math.random()*40);
for(var i=0; i<this.body.length;i++)
{
if(this.body[i].col==apple.posx &&this.body[i].row==apple.posy)
checkapple=true;
}
if(!checkapple)
break;
}
}
else{
this.body.pop();
}
};
//创建苹果对象
var apple={
posx:math.floor(math.random()*40),
posy:math.floor(math.random()*40),
sizer:5
}
//画苹果函数
apple.draw=function()
{
ctx.fillstyle="green";
ctx.beginpath();
ctx.arc(this.posx*10+5,this.posy*10+5,5,0,math.pi*2,false);
ctx.fill();
ctx.fillstyle="black";
};
//结束
var gameover=function()
{
ctx.font="60px comic sans ms";
ctx.textalign="center";
ctx.textbaseline="middle";
ctx.filltext("game over!",200,200)
};
//定时功能
var intervalid=setinterval (function ()
{
ctx.clearrect(0,0,400,400);
ctx.font="20px arial";
ctx.filltext("score:"+score,5,15);
snake.draw();
snake.move();
apple.draw();
ctx.strokerect(0,0,400,400);
},200);
//贪吃蛇的按键控制
$("body").keydown(function(event)
{
console.log(event.keycode);
if(event.keycode==37 &&snake.direction!="right")
{
snake.direction="left";
}
if(event.keycode==38 &&snake.direction!="down")
{
snake.direction="up";
}
if(event.keycode==39 &&snake.direction!="left")
{
snake.direction="right";
}
if(event.keycode==40 &&snake.direction!="up")
{
snake.direction="down";
}
}
);
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。