疫情期间呆在家里无聊,于是深入学习了一下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中原型的写法,如有错误请在评论区指出,有疑惑的可以私聊我,谢谢。

技术
©2019-2020 Toolsou All rights reserved,
uni-app中使用 async + await 实现异步请求同步化Dart中的Isolate十分钟掌握Pytorch搭建神经网络的流程利用python对monkey日志完成自动化分析二进制模2除法(CRC循环冗余检验)vue实现pc端的自适应,rem适配希尔排序Unity面试经验(两天面六家,四个offer,济南)C++实现《走迷宫》小游戏VR、AR和MR这些技术的区别