jQuery实现吃蛇游戏(带源代码下载)

时间：2021-09-05 来源：互联网编辑：宝哥软件园浏览：次

序

相信大家都玩过吃蛇的游戏。在那个水果机不流行，人们有诺基亚的时代，吃蛇是手机里必不可少的游戏。闲着无聊的时候，就拿出手机玩几局，挑战一下自己的记录。

后来上了大学，玩c语言的吃蛇游戏，但主要是函数控制(PS:现在看不懂代码( ))。现在，在学习了前端框架之后，我们使用jQuery实现了一个吃蛇游戏的效果。虽然游戏界面比(人)(智)简单(bu)，比(shi)差，但我们主要学习的是面向对象的思想，在游戏中从局部到整体。

设计原理

在开始写代码之前，我们先构思一下整个游戏的实现过程：

所需的对象

首先，既然是食蛇者，游戏中必然涉及到两个对象，一个是蛇对象，一个是食物对象。食物对象必须有一个属性是食物的坐标点，蛇对象有一个属性是一个数组来存储蛇体的所有坐标点。

如何移动

此外，整个世界都需要一个计时器来定期移动蛇的身体。由于蛇的身体是弯曲的，形状多样，我们只处理蛇的头部和尾部。我们每次移动，都会根据移动方向加一个新的头，然后把尾巴擦掉，看起来像一条向前爬行的蛇。

方向控制

由于蛇有移动方向，我们还需要全局定义一个方向对象，其中有上、下、左、右表示的值。同时，我们还需要在snake对象的属性中定义一个方向属性，用来指示当前snake移动的方向。

冲突检出

在蛇向前爬行的过程中，有三种不同的情况，需要不同的判断和测试。第一种情况是吃食物，那么就要在蛇阵中加入食物的坐标点；第二种情况是触碰自己的身体，第三种情况是触碰边界，两者都导致游戏结束；如果不是以上三个条件，蛇是可以正常活动的。

开始编程

有了总体思路，我们将开始编写下面的代码。

搭建窗帘

首先整个游戏需要一个搭建活动的场景，我们用一个桌子布局作为整个游戏的背景。

style type=' text/CSS ' # panel table { border-collapse : collapse；} # pannel td { width: 10pxheight: 10pxborder: 1px固体# 000；} # pannel TD . food { background : green；} # pannel TD . body { background : # f60；}/style div id=' pannel '/div select name=' id=' palSize '选项值=' 10 ' 10 * 10/选项值=' 20 ' 20 * 20/选项值=' 40 ' 30 * 30/选项/select select select name=' id=' palspeed '选项值=' 500 ' speed-slow/选项值=' 250 ' speed-normal/选项值=' 100 ' speed-fast/option/select button id=' start BTN ' start我们使用两种样式来表示不同的对象。身体代表了蛇的体型。食物代表了食物的风格。

Var设置={//pannel面板pannelSize:的长度10，//snake移动速度的速度3360 500，//snake工作线程workthread 3360 null，}；函数SetPanel(size){ var content=[]；content . push(' table ')；for(设I=0；isizeI){ content . push(' tr ')；for(设j=0；jsizej){ content . push(' TD class=' TD _ ' I ' _ ' j ' '/TD ')；} content . push('/tr ')；} content . push('/table ')；$('#pannel ')。html(content . join('))；} SetPanel(settings . PannelSize)；我们定义了一个全局设置来存储全局变量，例如窗帘的大小、蛇的移动速度和工作线程。然后通过一个函数拉上窗帘，最后的效果是这样的：

方向和定位

现在我们的“舞台”已经搭好了，如何定义我们“演员”的位置和移动方向？首先定义一个全局方向变量，对应的数值就是我们的上下左右方向键所代表的键码。

var Direction={ UP: 38，DOWN: 40，LEFT: 37，RIGHT: 39，}；我们在上面拉上窗帘的时候，通过两次穿越，画出了一个类似中学学过的坐标系，包括X轴和Y轴。如果用{x:x，y:y}来表示(mei)、(bi)和(ge)，我们可以定义一个坐标点对象。

函数Position(x，y){ //距离x轴的长度，取值范围是0~pannelSize-1这个。x=x | | 0；//距离Y轴长度，取值范围0~pannelSize-1这个。y=y | | 0；}咖啡食品

现在坐标点对象已经定义好了，我们可以先看一个简单的对象，也就是我们的Food对象，它有一个重要的属性，也就是它的坐标点。

function Food(){ this . pos=null；//随机生成Food坐标点，避开蛇这个。create=function () {if (this。pos){这个。handledot (false，this。pos，‘food’)；}让isOk=truewhile(isOk){ let x=parsent(math . random()* settings . pannelsize)，y=parsent(math . random()* settings . pannelsize)；if(！$('.td_' x '_' y)。has class(' body '){ isOk=false；让pos=新位置(x，y)；this.handleDot(true，pos，' food ')；this.pos=pos} } };//画这个。handledot=function (flag，dot，classname) {if (flag) {$(')。TD _' dot.x' _' dot.y)。添加类(类名)；} else { $('。td_ '点。X '_ '点。y)。removeClass(类名)；} };}既然食物有坐标点的属性，我们什么时候给它赋值？我们知道食物是随机生成的，所以我们定义了一个Create函数来生成食物的坐标点。但是，生成的坐标点不能在蛇的身体上，所以使用while循环来生成坐标点，如果坐标点正确，则循环终止。另外，为了方便我们统一处理坐标点的样式，定义了一个handleDot函数。

咖啡大师-蛇

终于到了我们的主咖啡，蛇。首先定义蛇的基本属性，最重要的一定是蛇的身体属性。每次移动时，您都需要对该阵列执行一些操作。接下来是蛇的方向。我们给它一个默认的向下方向。然后是食物。在蛇构造器中，我们传入食物对象，需要在后续的运动中判断是否吃过食物。

函数Snake(my food){//Snake body this . body=[]；//snake的方向this.dir=Direction。向下；//蛇食this.food=myFood//创建这条蛇。create=function(){让isok=truewhile(isOk){ let x=parsent(math . random()*(settings . panelsize-2))1，y=parsent(math . random()*(settings . panelsize-2))1；console.log(x，y) if(！$('.td_' x '_' y)。has class(' food '){ isOk=false；让pos=新位置(x，y)；this.handleDot(true，pos，' body ')this . body . push(pos)；} } };this.handleDot=函数(标志、点、类名){ if(标志){ $(')。td_ '点。X '_ '点。y)。addClass(类名)；} else { $('。td_ '点。X '_ '点。y)。removeClass(类名)；} };}移动功能处理

下面讨论蛇的移动过程。既然我们每次都是以头尾相加的方式移动，那么每次只需要注意蛇的头尾就可以了。我们同意数组的第一个元素是头，最后一个元素是尾。

这个。Move=function(){让oldHead=Object.assign(新位置()、this.body[0])、oldTail=Object.assign(新位置()、this.body[this.body.length - 1])、newHead=Object.assign(新位置()、oldHead)；开关(这个方向){方向。UP:新头。X=newHead。x-1；打破；案例方向。向下：纽海德。X=newHead。x1；打破；案例方向。左：新头。Y=newHead。Y-1；打破；案例方向。右转：纽海德。Y=newHead。y1；打破；default: break}//将this.body.unshift(newHead)添加到数组中；//数组结束this . body . pop()；};检测功能处理

所以我们已经完成了蛇身阵列。但是，我们需要在newHead上做一些碰撞检测，判断new head上是否还有别的东西(碰撞检测)。

//食物检测this . EatFood=function(){ 0让NewHead=这个。正文[0]；if(newHead .x==这个。食物。pos。xnewhead。y==这个。食物。pos。y){ 0返回true } else { return false } }//边界检测this . konckwall=function(){ 0让NewHead=这个。正文[0]；if(newHead .X==-1 || newHead .Y==-1 || newHead .x==设置。PannelSize | | NewHead .y==设置。PannelSize){ return true；} else {返回false } }//蛇身检测这个。konckbody=function(){让newHead=this。body[0]，flag=falsethis.body.map(函数(elem，index){ if(index==0)返回；if(elem .X==newHead .X elem .Y==newHead .y){ flag=true；} });返回标志；};重新绘制

因此我们需要对移动函数进行一些扩充：

这个移动=函数(){ //.数组操作如果(这个。吃点食物吧。尸体。推(老尾)；这个。食物。create()；this.rePaint(true，newHead，old tail)；} else if(这个。konckwall()| |这个。konckbody()){这个.over()；} else { this.rePaint(false，newHead，old tail)；}};这个over=function(){ clearInterval(设置。workthread)；控制台日志("游戏结束");};这个。repair=function(iseat food，newHead，oldTail){ if(isEatFood){ //加头this.handleDot(true，newHead，' body ')；} else { //加头this.handleDot(true，newHead，' body ')；//去尾this.handleDot(false，oldTail，‘body’)；}};因为在移动函数处理数组的后我们的蛇身还没有重新绘制，因此我们很巧妙地判断如果是吃到食物的情况，在数组中就把原来的尾部添加上，这样就达到了吃食物的效果。同时我们定义一个重新油漆函数进行页面的重绘。

游戏控制器

我们的"幕布"、"演员"和"动作指导"都已经到位，那么，我们现在就需要一个"摄影机"进行拍摄，让它们都开始"干活"。

函数Control(){ this。snake=null//按钮的事件绑定这个。bind click=function(){ var=that this；$(文档)。开('向下键'，函数(e){ if(！那条蛇)回来；var canChangrDir=真开关（例如键码){外壳方向。向下： if(that.snake.dir==方向. UP){ canChangrDir=false；}休息案例方向如果(那。蛇。方向==方向.DOWN){ canChangrDir=false；}休息案例方向LEFT: if(that.snake.dir==方向. RIGHT){ canChangrDir=false；}休息案例方向。右如果(。蛇。dir==方向左){ canChangrDir=false} break default : canChangrDir=false；打破；} if(canChangrDir){ that。蛇。dir=e .键码；} });$('#palSize ').on('change '，function(){ settings。PannelSize=$(this).val()；setpanel(设置。PannelSize)；});$('#palSpeed ').on('change '，function(){ settings。速度=$(这个)).val()；});$('#startBtn ').on('click '，function(){ $(').食物)。移除类(“食物”)；$('.正文')。removeClass("正文");那个。start game()；});};//初始化这个。init=function(){ this。bind click()；setpanel(设置。PannelSize)；};//开始游戏这个。start game=function(){ var Food=new Food()；食物create()；变种蛇=新蛇(食物);蛇create()；这条蛇=蛇；设置。workthread=setInterval(function(){ snake .move()；}，设置。速度)；}这个。init()；}我们给文件绑定一个按键事件，当触发按键时改变蛇的移动方向，但是如果和当前蛇移动方向相反时就直接返回。最后的效果如下：