在该游戏中，玩家操纵一条贪吃的蛇在长方形场地里行走，贪吃蛇按玩家所按的方向键折行，蛇头吃到食物(豆)后，分数加 10 分，蛇身会变长，如果贪吃蛇碰上墙壁或者自身的话，游戏就结束了(当然也可能是减去一条生命)。
贪吃蛇游戏的运行界面如上图所示。
01、贪吃蛇游戏设计的思路
把游戏画面看成 40×30 的方格。食物（豆）和组成蛇的块均在屏幕上占据一个方格。游戏设计中主要用到的 4 个类如下。
Farm 类：主要用来显示场地，随机生成食物，初始化一条蛇。
Food 类：抽象了食物(豆)的属性和动作。
Snake 类：抽象了贪吃蛇的属性和动作，调用 Block 类来组成蛇，并处理键盘输入事件和蛇的移动。
Block 类：表示组成蛇的块(实心圆)。一条蛇可以看成由许多“块”(或称节)拼凑而成，块是蛇身上最小的单位。
02、贪吃蛇游戏设计的步骤
游戏页面 index.html
<!DOCTYPE html><html lang = "en">< head ><meta charset ="UTF - 8"< title>小游戏之贪吃蛇</title>< style># canvas{border: 3px solid red;</style></head>< body><canvas id='canvas'width=800'height =00'></canvas><div id="textmsg">分数</div></body
复制代码
设计脚本
1． 食物(豆)类(Food)设计
在此游戏中，首先会在场地的特定位置出现一个豆，豆要不断被蛇吃掉，当豆被吃掉后，原豆消失，又在新的位置出现新的豆。这些豆都是由豆(Food)类创建的对象。
foodInit()函数用于在屏幕上显示一个豆(实心圆)，设计方法是直接在场地(canvas)上画一个实心圆。
equal()函数用于判断是否与蛇身“块”node 重合，也就是蛇吃到食物。
//食物类function Food(x，y，w) {var t= this;t.x=x;t.y=y;t.w=w;//食物//X坐标//Y坐标//大小t.foodInit = function() [//画一个实心圆ctx.beginPath();ctx.arc(x+w/2，y+w/2，w/2，0，360，false);ctx.fillStyle="red";//填充颜色，默认是黑色//画实心圆ctx.fill();ctx.closePath();//判断是否重合t.equal = function(node) if(this.x == node.x && this.y== node.y) return true;else(return false;}}}
复制代码
2． 块类(Block)
在贪吃蛇游戏中，块用来构成蛇，在蛇出现时，要把构成蛇的块一个个地输出(显示)，在蛇消失时，要把块消除掉，显示和消除哪一个块都要由位置决定，并且由于蛇是由多个块构成的，每个块要填到 snakes 数组中。
//蛇块类function Block(x,Y,w)(var t = this;t.x= x;t.y=y;t.w= w;//画一个蛇块t.drawBlock = function()ctx.beginPath();ctx.arc(x+w/2，y+w/2，w/2，0，360，false);//填充颜色,默认是黑色ctx.fillStyle="blue";ctx.fill();//画实心圆//清除蛇块t.clear = function()!ctx.fillStvle=white';ctx.strokeStyle = white';ctx.fillRect(x,Y,w,w);ctx.strokeRect(x,Y, w,w);//判断是否重合t.equal = function(node)if(this.x== node.x && this.y== node.y){return true;elsereturn false;}}
复制代码
3． 蛇类(Snake)设计
现在到了最难的步骤，就是处理蛇，一条完整的贪吃蛇是由一块一块组成的。snakes 数组用于存放组成蛇的所有块；其中保存的第一个元素是蛇的头部，最后一个元素是蛇的尾巴。当蛇运动的时候，它头部增加一块而尾部减少一块。如果它吃到了豆，头部增加一块而尾部不减少。也就是说，蛇是从头部开始长的。蛇运行过程中要不断地改变方向；如果蛇头碰到了它自身，蛇就要死亡，即程序结束。
首先，画一条蛇并移动它。
//蛇类function Snake(x，y len，speed) {var t = this;t.x=x;t.y=y;t.dir='R';t.len = len;//dir 方向，R'向右var nx = x;ny =y;//初始蛇最初 len(5)块，并启动定时t.init = function()for(var i=0;i< len; i++){var tempBlock = new Block(nx，ny，gridWidth);tempBlock.drawBlock();nx-= gridWidth;snakes.push(tempBlock);snake interval = setInterval(t.move，speed);//定时移动蛇}
复制代码
然后，识别键盘事件，修改移动方向 dir，初始移动 dir 方向为'R'(向右)。
//取得键盘方向document.onkevdown = function(e)var code = e.keyCode;t.odir = t.dir;switch(code)case 37:t.dir='L';break;case 38:t.dir='u';break;case 39:t.dir='R';break;case 40 :t.dir='D';//向左键//向上键//向右键//向下键break;}}
复制代码
以下主要是让蛇动的 move()函数。主要是根据原来蛇头 snakes［0］的位置和移动方向确定新的蛇头位置，绘制新的蛇头，并清除原来的蛇尾即达到移动效果。
在蛇移动时，判断蛇头是否和食物相撞，是否碰撞到了场地的壁以及是否与自己相撞。
//移动蛇t.move = function()var newHead;//是否碰撞到了场地的壁if(snakes0].x+ snakes0].w >= canvas.width snakes0].x- snakes0].w<0snakes[0].y- snakes[0].w < 0 snakes[0].y + snakes[0].w > canvas.height)(gameover();else{//根据原来蛇头 snakes[0]的位置和移动方向确定新的蛇头位置if(t.dir=='R'){newHead= new Block(snakes[0].x + gridWidth,snakes[0].y，gridWidth);) else if (t.dir =='L')(newHead = new Block(snakes[0].x- gridWidth,snakes[0].y，gridWidth);else if (t.dir==D') !newHead = new Block(snakes[0].x，snakes[0].y + gridWidth,gridWidth);else if (t.dir==u') !newHead= new Block(snakes[0].x，snakes[0].y- gridwidth,gridWidth)//禁止反向跑if(newHead.x == snakes[1].x && newHead.y == snakes[1].y)t.dir = t.odir;return;//画新的蛇头newHead.drawBlock();//追加到数组中(长度会自动加)snakes.unshift(newHead);//清除原来尾部snakes[snakes.length - 17.clear();//并从数组中移除(长度会自动减)snakes.pop()//清除(蛇尾)块/判断食物是否和蛇头相撞for(var i=0;i< foods.length; i++)if(foods[ i].equal( snakes[0]))//给蛇增加长度t.growth();score= score +10:textmsq.innerHTML = score +“分”t.len = t.len + 1;//蛇生长方法//增加 10 分//显示分数clearInterval(snake interval);//速度加快snake interval = setInterval(t.move，speed);speed = speed < 20 ? speed : speed -10;//判断是否与自己相撞for(var i=1;i< snakes.length; i++)if(snakesil.equal(snakes[0T)) gameover();)//move()函数结束
复制代码
用于实现蛇生长 growth()函数的具体功能是当蛇吃到一个豆后，蛇就要在它的尾巴上增加一块即蛇增长。设计思路是找到蛇尾 snakes［snakes．length-1］，根据蛇尾与蛇的倒数第 2 块 snakes［snakes．length-2］的位置关系，计算出蛇尾新增一块的位置。
//给蛇增加长度(在尾巴加)t.growth = function() var tail1 = snakes[ snakes.length - 1]；var tai12 = snakes[snakes.ength - 2];var addBlock;if(tai11.x== tai12.x) {if(tail1.y>= tail2.y）}addBlock =new Block(tail1.x，tail1.y + gridWidth，gridWidth);elseaddBlock =new Block(tail1.x，tail1.y-gridWidth，gridWidth);elseif(tai11.x>= tail2.x)addBlock =new Block(tail1.x + gridWidth，tail1.y，gridWidth);elseaddBlock =new Block(tail1.x-gridWidth，tail1.y，gridWidth);//数组加入尾部snakes.push(addBlock);addBlock.drawBlock();console.log(snakes.length);)//growth()函数* snake 类结束 */
复制代码
4． 场地类(Farm)设计
为游戏的主场地，豆要在此范围内出现，蛇要在此范围内运行，显示场地内的所有对象、场地边框、豆和蛇。
//场地类,生成一个画布和豆、蛇function Farm()var t = this;ctx.fillStyle ='white';ctx.fillRect(0，0，canvas.width,canvas.height);foods =l;//有环莲浮墩甘伴榜机郧扒唉癌挨膊鞍皑傲卑唉扮诚成一个食物t.addfood = function()var x= parseInt(canvas.width / gridWidth * Math.random()) * gridWidth;var y=parseInt(canvas.height / gridWidth * Math.random()) * gridWidth;var food = new Eood(x，y，gridWidth);food把椽斌新foodInit();//重新初始化豆数组，不要把前一次游戏的数组元素遗留foods.push(food);//重新初始化蛇身(块)数组，不要把前一次游戏的数组元素遗留snakes =;//更新速度 500 毫秒(即移动速度)t.snake= new Snake(100，100，5，500); //初始 5 节长度,位置(100,100)处//*彼啊画钻班等滁癌报蛇t.snake.init();}
复制代码
5． 主程序
在游戏开始后，要首先初始化场地 Farm 类，显示场地内的所有对象，场地边框、豆和蛇。同时要 2 秒随机产生一个新豆并显示。
var canvas = document.getElementById("canvas”)var ctx = canvas.getContext( 2d');var gridWidth = 20;var score = 0;var foods = new Array()，snakes = new Array();//开始游戏function gameStart(var farm = new Farm();//放豆和蛇的数组//2 秒产生一个豆food interval = setInterval(farm.addfood，2000);gameStart();//结束function gameover()var judge = confirm("游戏结束，是否重新开始”);score =0;textmsg.innerHTML = score +“分clearInterval(snake interval);//清除产生蛇移动定时//清除产生新豆定时clearInterval(food interval);if(!judge){//选择不重新开始return false;gameStart();}
复制代码
至此，贪吃蛇游戏编写完成。
评论