您正在使用IPV4(18.205.176.39)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       深圳小产权房      

【腾讯云】热门云产品首单特惠秒杀,2核2G云服务器45元/年      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 儿童节 15
2022年 端午节 17
2023年 元 旦 229
2023年 春 节 250
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
JavaScript实现网页版贪吃蛇游戏
内容摘要: !DOCTYPEhtmlhtmlheadtitle贪吃蛇/title/headbodycanvasid='canvas'width='400'height='400'/canvasscriptsrc='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'/scriptscriptvarcanv=d......
<!DOCTYPEhtml>

<html>

<head><title>贪吃蛇</title>

</head>

<body>

<canvasid="canvas"width="400"height="400"></canvas>

<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

<script>

varcanv=document.getElementById("canvas");

varctx=canv.getContext("2d");

varscore=0;

//定义一个方块的构造函数

varBlock=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)

}

//定义对象蛇

varsnake={

body:[

newBlock(20,20,10),

newBlock(20,21,10),

newBlock(20,22,10)

],

direction:"right",

};

//定义画蛇的函数

snake.draw=function()

{

for(vari=0;i<this.body.length;i++)

{

this.body[i].draw();

}

};

snake.move=function()

{

varhead=this.body[0];

if(snake.direction=="right")

{

varnewhead=newBlock(head.col+1,head.row,head.size)

}

if(snake.direction=="left")

{

varnewhead=newBlock(head.col-1,head.row,head.size);

}

if(snake.direction=="up")

{

varnewhead=newBlock(head.col,head.row-1,head.size)

}

if(snake.direction=="down")

{

varnewhead=newBlock(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(vari=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)

{

varcheckApple=false;

apple.posX=Math.floor(Math.random()*40);

apple.posY=Math.floor(Math.random()*40);

for(vari=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();

}

};

//创建苹果对象

varapple={

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";

};

//结束

vargameover=function()

{

ctx.font="60pxComicSansMS";

ctx.textAlign="center";

ctx.textBaseline="middle";

ctx.fillText("GAMEOVER!",200,200)

};

//定时功能

varintervalId=setInterval(function()

{

ctx.clearRect(0,0,400,400);

ctx.font="20pxArial";

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>

上一篇:vue3限制table表格选项个数的解决 下一篇:css实现文字断裂效果的示例代码
发布日期:2022/4/20
手机扫二维码直达本页
发布时间:13:14:57
点击:268
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.2.1.220509(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022