疫情期间呆在家里无聊，于是深入学习了一下JS。自己也模仿写一个贪吃蛇的小游戏，本人刚接触JS不久如有错误，望评论区指出。
因为一般贪吃蛇游戏中的CSS样式较为简单，所以这里主要讲一下JS的写法。

食物生成

贪吃蛇中的食物是随机生成的且可以删除，这就需要我们利用js生成div。方便生成与删除，首先将食物存放进数组中方便删除，在利用随机数函数生成在地图的其他位置

var ele =[];//将食物存放进数组中 //构建食物结构体 function Food(x,y,width,height,color){ this.x=x;//横坐标 this.y=y;//纵坐标 this.width=width||20;//宽度 this.height=height||20;//高度 this.color=color||"white";//颜色 //还可以在加入其他style } //食物原型         Food.prototype.init= function(map){ //先删除小球 remove(); var div=document.createElement('div');//创建div             map.appendChild(div);//设为地图的子元素             div.style.width=this.width+'px';//宽度             div.style.height=this.height+'px';//高度             div.style.backgroundColor=this.color;//颜色 this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;//根据地图和食物大小计算生成范围 this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;             div.style.position="absolute";//脱离文档流，使用绝对定位             div.style.left=this.x+'px';             div.style.top=this.y+'px'; //先将小球存入数组中，方便删除时调用             ele.push(div); } //编写删除小球的函数 function remove(){ for(var i=0;i<ele.length;i++){ var eles=ele[i];                 eles.parentNode.removeChild(eles);//移除元素                 ele.splice(i,1); } } 

蛇

蛇的原理和食物差不多，只不过这里将蛇分成一个个body，方便生成和调用

var ele=[]; function snake(width,height,direction){ //设置蛇的样式 this.width=width||20;//每一个body的宽度 this.height=height||20;//高度 this.body=[ {x:3,y:2,color:"white"},//蛇头 {x:2,y:2,color:"red"},//蛇身 {x:1,y:2,color:"red"}, ] this.direction=direction||"right";//默认初始方向 }         snake.prototype.init=function(map){ //和食物原理一样，先移除再生成 remove(); for(var i=0;i<this.body.length;i++){ var obj=this.body[i]; var div=document.createElement("div");                 map.appendChild(div);                 div.style.width=this.width+'px';//宽度                 div.style.height=this.height+'px';//高度                 div.style.position="absolute";//脱离文档流，绝对定位                 div.style.left=obj.x*this.width+'px';//横坐标                 div.style.top=obj.y*this.height+'px';//纵坐标                 div.style.backgroundColor=obj.color;//颜色                 ele.push(div);//存入数组 } };         snake.prototype.move=function(food,map,event){ var i=this.body.length-1; for(;i>0;i--)//逆循环{ this.body[i].x=this.body[i-1].x;//将i-1的body的位置穿给i this.body[i].y=this.body[i-1].y; } switch(this.direction)//选择器{ case "right":this.body[0].x+=1;break;//更改蛇头方向 case "left":this.body[0].x-=1;break; case "top":this.body[0].y+=1;break; case "bottom":this.body[0].y-=1;break; } //判断蛇是否吃掉食物 var snakex=this.body[0].x*this.width;//获取蛇的坐标 var snakey=this.body[0].y*this.height; var foodx=food.x;//获取食物横坐标 var foody=food.y;//获取食物纵坐标             console.log(foodx);             console.log(snakex); if(snakex==foodx&&snakey==foody//判断是否先等){ var last=this.body[this.body.length-1];//获取最后一个body //增加body this.body.push({                     x:last.x,                     y:last.y,                     color:last.color                 })                 food.init(map); } }; //移除小蛇，原理和食物一样 function remove(){ for(var i=0;i<ele.length;i++){ var eles=ele[i];                 eles.parentNode.removeChild(eles);                 ele.splice(i,1); } }; 

添加游戏自调用函数

//编写游戏的自调用方便使用 function game(map) { this.food= new Food(); this.snake=new snake(); this.map=map;             that=this; }         game.prototype.init=function () { //调用食物和蛇 this.food.init(this.map); this.snake.init(this.map); this.run(this.food,this.map); //键盘监听 this.key(); }         game.prototype.run=function(food,map){ //设置定时器，使小蛇动起来 var time=setInterval(function(){ this.snake.move(food,map); this.snake.init(map); var snakex=this.snake.body[0].x;//获取蛇头位置 var snakey=this.snake.body[0].y; //判断蛇头位置是否出界 if(snakex<0||snakex>=40){ clearInterval(time);                     window.alert("失败"); } if(snakey<0||snakey>=30){ clearInterval(time);                     window.alert("失败"); } }.bind(that),100) } //键盘监听函数         game.prototype.key=function(){             document.addEventListener("keydown",function (e) { switch (e.keyCode) { case 37:this.snake.direction="left";break; case 38:this.snake.direction="bottom";break; case 39:this.snake.direction="right";break; case 40:this.snake.direction="top";break; } }.bind(that),false) } 

全部代码

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>贪吃蛇</title> <style> .map{             width: 800px;             height: 600px;             background-color: black;             position: relative; } </style> </head> <body> <div class="map"> </div> <script> (function (){ var ele =[]; function Food(x,y,width,height,color){ this.x=x; this.y=y; this.width=width||20; this.height=height||20; this.color=color||"white"; }         Food.prototype.init= function(map){ remove(); var div=document.createElement('div');             map.appendChild(div);             div.style.width=this.width+'px';             div.style.height=this.height+'px';             div.style.backgroundColor=this.color; this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width; this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;             div.style.position="absolute";             div.style.left=this.x+'px';             div.style.top=this.y+'px';             ele.push(div); } function remove(){ for(var i=0;i<ele.length;i++){ var eles=ele[i];                 eles.parentNode.removeChild(eles);                 ele.splice(i,1); } }         window.Food=Food; })(); (function(){ var ele=[]; function snake(width,height,direction){ this.width=width||20; this.height=height||20; this.body=[ {x:3,y:2,color:"white"}, {x:2,y:2,color:"red"}, {x:1,y:2,color:"red"}, ] this.direction=direction||"right"; }         snake.prototype.init=function(map){ remove(); for(var i=0;i<this.body.length;i++){ var obj=this.body[i]; var div=document.createElement("div");                 map.appendChild(div);                 div.style.width=this.width+'px';                 div.style.height=this.height+'px';                 div.style.position="absolute";                 div.style.left=obj.x*this.width+'px';                 div.style.top=obj.y*this.height+'px';                 div.style.backgroundColor=obj.color;                 ele.push(div); } };         snake.prototype.move=function(food,map,event){ var i=this.body.length-1; for(;i>0;i--){ this.body[i].x=this.body[i-1].x; this.body[i].y=this.body[i-1].y; } switch(this.direction){ case "right":this.body[0].x+=1;break; case "left":this.body[0].x-=1;break; case "top":this.body[0].y+=1;break; case "bottom":this.body[0].y-=1;break; } var snakex=this.body[0].x*this.width; var snakey=this.body[0].y*this.height; var foodx=food.x; var foody=food.y;             console.log(foodx);             console.log(snakex); if(snakex==foodx&&snakey==foody){ var last=this.body[this.body.length-1]; this.body.push({                     x:last.x,                     y:last.y,                     color:last.color                 })                 food.init(map); } }; function remove(){ for(var i=0;i<ele.length;i++){ var eles=ele[i];                 eles.parentNode.removeChild(eles);                 ele.splice(i,1); } };         window.snake=snake; })(); (function(){ function game(map) { this.food= new Food(); this.snake=new snake(); this.map=map;             that=this; }         game.prototype.init=function () { this.food.init(this.map); this.snake.init(this.map); this.run(this.food,this.map); this.key(); }         game.prototype.run=function(food,map){ var time=setInterval(function(){ this.snake.move(food,map); this.snake.init(map); var snakex=this.snake.body[0].x; var snakey=this.snake.body[0].y; if(snakex<0||snakex>=40){ clearInterval(time);                     window.alert("失败"); } if(snakey<0||snakey>=30){ clearInterval(time);                     window.alert("失败"); } }.bind(that),100) }         game.prototype.key=function(){             document.addEventListener("keydown",function (e) { switch (e.keyCode) { case 37:this.snake.direction="left";break; case 38:this.snake.direction="bottom";break; case 39:this.snake.direction="right";break; case 40:this.snake.direction="top";break; } }.bind(that),false) }         window.game=game; }()); var game=new game(document.querySelector(".map"));     game.init(); </script> </body> </html> 

结语

这个方法是跟着黑马程序员学习的，里面有许多原型用法，下次准备详细介绍JS中原型的写法，如有错误请在评论区指出，有疑惑的可以私聊我，谢谢。