今天教大家如何用js编写一个网页版的贪吃蛇。
具体效果如下:
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();}};再是定义蛇，这里面的蛇的初始化的身体是有三个部分组成的，也就有三个Block。
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();}};然后这一部分是核心，定义的是蛇的上下左右移动，还有食物的刷新。当蛇吃到食物之后的处理。
完整的核心代码如上，也并没有想象中那么难。
欢迎和我讨论有关程序的问题，也可以答疑。关注公众号：诗一样的代码，交一个朋友。