JavaScript实现网页版贪吃蛇游戏
更新时间：2021年07月28日 11:14:31 作者：晚安小点点
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文介绍在表单提交之前修改提交的值的方法，希望给需要的朋友一些帮助。2016-04-04
scrapyd schedule.json setting 传入多个值问题
这篇文章主要介绍了scrapyd schedule.json setting 传入多个值，本文给出了问题分析及思路解决方案，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2019-08-08
这篇文章主要介绍了javascript正则表达式之search()用法,实例分析了search()的使用技巧,需要的朋友可以参考下2015-01-01
下面小编就为大家分享一篇用JS实现非首屏图片延迟加载的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
JavaScript 数据响应是一种重要的前端开发概念,是指在应用程序中的数据发生变化时,能够自动更新与这些数据相关的用户界面（UI）部分的能力,本文我们来总结一下目前可以简单实现 JavaScript 中的数据响应的方法,需要的朋友可以参考下2023-09-09
JavaScript精炼之构造函数 Constructor及Constructor属性详解
对象的constructor属性用于返回创建该对象的函数，也就是我们常说的构造函数，除了创建对象，构造函数(constructor) 还做了另一件有用的事情—自动为创建的新对象设置了原型对象(prototype object)2015-11-11
在本篇内容里小编给大家整理的是关于js逆向解密之网络爬虫的相关知识点内容，需要的朋友们参考下。2019-05-05
这篇文章主要介绍了js判断undefined类型的实现方法,需要的朋友可以参考下2014-02-02
深入理解JavaScript系列（34）：设计模式之命令模式详解
这篇文章主要介绍了深入理解JavaScript系列（34）：设计模式之命令模式详解,命令模式(Command)的定义是：用于将一个请求封装成一个对象,从而使你可用不同的请求对客户进行参数化,对请求排队或者记录请求日志,以及执行可撤销的操作,需要的朋友可以参考下2015-03-03
javascript AutoScroller 自动滚动类代码，学习类的朋友可以参考下。2009-05-05
最新评论