| 本文实例为大家分享了JavaScript实现经典贪吃蛇游戏的具体代码，供大家参考，具体内容如下 主要使用单例模式，所有元素动态创建； 1.创建地图 var Map; function map(){ this.mapp=null; this.makemap=function(){ this.mapp=document.createElement ("div"); this.mapp.className ="mymap"; document.body.appendChild(this.mapp ); } }2.创建贪吃蛇模型 创建一个集合，存放蛇的前三节，遍历集合，创建蛇的大小和颜色，设置每个小节的宽高为30px;初始化蛇头方向向右 var Snack; function snack(){ this.snackk=[["red",3,1,null],["pink",2,1,null],["pink",1,1,null]]; this.direct="right"; this.makesnack=function(){ for(var i=0;i<this.snackk.length;i++){ if(this.snackk[i][3]==null){ this.snackk[i][3]=document.createElement ("div"); this.snackk[i][3].className ="eatsnack"; this.snackk[i][3].style.backgroundColor =this.snackk[i][0]; Map.mapp.appendChild(this.snackk[i][3]); } this.snackk[i][3].style.left=this.snackk[i][1]*30+"px"; this.snackk[i][3].style.top=this.snackk[i][2]*30+"px"; } };3.动态蛇，从后向前遍历存放蛇的每一节的集合snackk，将每小节的属性从后想前传递，并且设置蛇头移动方向，方向改变蛇的左边距和上边距也会跟着改变，再设置一个计时器，每100ms让蛇动起来一次； this.movesnack=function(){ var long=this.snackk.length-1; for(var i=long; i>0; i--){ this.snackk[i][1]=this.snackk[i-1][1]; this.snackk[i][2]=this.snackk [i-1][2]; } switch(this.direct){ case "right": //向右 this.snackk[0][1] +=1; break; case "left": //向左 this.snackk[0][1] -=1; break; case "down": //向下 this.snackk[0][2] +=1; break; case "up": //向上 this.snackk[0][2] -=1; break; }
4.创建食物。 在地图上随机产生食物，食物的大小和每一小节蛇的大小一样 var Guoguo; function guozi(){ this.guoo=null; this.x; this.y; this.makeguozi=function(){ this.x=Math.floor( Math.random() * 30); //0-29 this.y=Math.floor( Math.random() * 20); //0-19 if(this.guoo==null){ this.guoo=document.createElement ("div"); this.guoo.className ="guozi"; Map.mapp.appendChild(this.guoo); } this.guoo.style.left=this.x * 30+"px"; this.guoo.style.top =this.y * 30+"px"; } }5.设置键盘事件，上下左右键控制蛇头的变化方向 document.body.onkeyup=function(e){ // console.log(e); switch(e.keyCode){ case 37: //左 if(Snack.direct!="right"){ Snack.direct ="left"; } break; case 39:// 右 if(Snack.direct!="left"){ Snack.direct ="right"; } break; case 38: //上 if(Snack.direct!="down"){ Snack.direct ="up"; } break; case 40: //下 if(Snack.direct!="up"){ Snack.direct ="down"; } break; case 87: if (Snack.direct != "down") { Snack.direct = "up"; } break; case 65: if (Snack.direct != "right") { Snack.direct = "left"; } break; case 68: if (Snack.direct != "left") { Snack.direct = "right"; } break; case 83: if (Snack.direct != "up") { Snack.direct = "down"; } break; } };6.检测蛇头和食物的位置，蛇头吃到食物，蛇的长度变长，给snackk集合追加元素，接着在随机创建食物，再检测食物位置，再吃到食物； if(this.snackk[0][1]==Guoguo.x && this.snackk[0][2]==Guoguo.y ){ this.snackk.push([ "pink", this.snackk[this.snackk.length-1][1], this.snackk[this.snackk.length-1][2], null ]); Guoguo.makeguozi (); }7.设置蛇身可以穿墙而过，如果蛇头的上下左右边距等于0时，改变边距到最大值； if(this.snackk[0][1]>29){ this.snackk[0][1]=0 ; //从右边穿墙 } if(this.snackk[0][1]<0){ this.snackk[0][1]=29 ; //从右边穿墙 } if(this.snackk[0][2]>19){ this.snackk[0][2]=0 ; //从右边穿墙 } if(this.snackk[0][2]<0){ this.snackk[0][2]=19 ; //从右边穿墙 } this.makesnack(); this.stopsnack(); };8.设计游戏结束，贪吃蛇撞在自己的身体就死了，游戏结束，关闭计时器
当蛇头的上边距，左边距等于蛇身体某一块的上编剧和左边距时，游戏结束，弹出游戏结束的提示图片 this.stopsnack=function(){ for(var k=this.snackk.length-1;k>0;k--){ if(this.snackk[0][1]==this.snackk [k][1] && this.snackk[0][2]==this.snackk [k][2]){ clearInterval(time); var gameover=document.createElement ("div"); gameover.className ="over"; gameover.style.display ="block"; Map.mapp.appendChild (gameover); } }}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
React项目中应用TypeScript的实现
用JS编写选项卡效果 |
