原生js实现的贪吃蛇网页版游戏完整实例
本文实例讲述了原生js实现的贪吃蛇网页版游戏。分享给大家供大家参考。具体实现方法如下:
<html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>原生js写的贪吃蛇网页版游戏</title> </head> <body> </body> <script> Star={ init:function(){ varbigDiv=this.appendEle(this.addStyle(this.creatEle(), {w:'900',h:'600',p:'absolute',t:10,l:500})); for(vari=0;i<600/30;i++){ Star.data.arrayAll[i]=[]; for(varj=0;j<900/30;j++){ div=this.addStyle(this.creatEle(),{w:(!+[1,]?30:28),h:(!+[1,]?30:28),f:'left',border:'1pxsolid#666'}); div.setAttribute('number',i*30+j) this.appendEle(div,bigDiv) Star.data.arrayAll[i][j]=div; } } bigDiv=this.appendEle(this.addStyle(this.creatEle(), {w:'900',h:'600',p:'absolute',t:10,l:500})); this.pushEleInSelect(Star.data.arrayAll[9][15],Star.data.arrayAll[9][14],Star.data.arrayAll[9][13]) this.keyBoard.apply(this,arguments); this.appearPoint(); this.leftGo(); }, appearPoint:function(){ vararrayIn=[]; varnumber; for(vari=0;i<600;i++){ if(!this.hasInArray(Star.data.arrayAll[parseInt(i/30)][i%30].getAttribute('number'),Star.data.arraySelect)){ arrayIn.push(Star.data.arrayAll[i]) } } Star.data.foodNumber=number=parseInt(Math.random()*arrayIn.length); this.giveColor(number) }, giveColor:function(number){ vardiv=Star.data.arrayAll[parseInt(number/30)][number%30]; Star.timeInterval.timeB=setInterval(function(){ if(div.className=='shanshuo'){ div.className='' div.style.backgroundColor='#fff' } else{ div.className='shanshuo'; div.style.backgroundColor='#f00' } },500) }, disappearColor:function(){ clearInterval(Star.timeInterval.timeB); Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30].style.backgroundColor='#f00'; }, hasInArray:function(number,array){ for(variinarray){ if(array[i]instanceofArray){ if(this.hasInArray(number,array[i])){ returntrue; } } if(array[i].getAttribute&&array[i].getAttribute('number')==number)returntrue; } returnfalse; }, keyBoard:function(){ varself=this; document.onkeydown=function(e){ e=e?e:window.event; switch(e.keyCode){ case37:if(Star.keycode==37||Star.keycode==39){return;};self.leftGo();break; case38:if(Star.keycode==38||Star.keycode==40){return;};self.upGo();break; case39:if(Star.keycode==37||Star.keycode==39){return;};self.rightGo();break; case40:if(Star.keycode==38||Star.keycode==40){return;};self.downGo();break; } } }, leftGo:function(){ vardiv,number,self=this; Star.keycode=37; clearInterval(Star.timeInterval.timeA) Star.timeInterval.timeA=setInterval(function(){ number=Star.data.arraySelect[0].getAttribute('number'); if(number%30<=0||self.hasInArray(number-1,Star.data.arraySelect)){ self.guanle(); } else{ if(Star.data.foodNumber==number-1){ self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]); self.disappearColor(); self.appearPoint(); } else{ div=Star.data.arraySelect.pop(); div.style.background='#fff'; self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30-1]); } } },Star.timeInterval.speed) }, upGo:function(){ vardiv,number,self=this; Star.keycode=38; clearInterval(Star.timeInterval.timeA) Star.timeInterval.timeA=setInterval(function(){ number=parseInt(Star.data.arraySelect[0].getAttribute('number')); if(parseInt(number/30)<=0||self.hasInArray(number-30,Star.data.arraySelect)){ self.guanle(); } else{ if(Star.data.foodNumber==number-30){ self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]); self.disappearColor(); self.appearPoint(); } else{ div=Star.data.arraySelect.pop(); div.style.background='#fff'; self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)-1][number%30]); } } },Star.timeInterval.speed) }, rightGo:function(){ vardiv,number,self=this; Star.keycode=39; clearInterval(Star.timeInterval.timeA) Star.timeInterval.timeA=setInterval(function(){ number=parseInt(Star.data.arraySelect[0].getAttribute('number')); if(parseInt(number%30)>=29||self.hasInArray(number+1,Star.data.arraySelect)){ self.guanle(); } else{ if(Star.data.foodNumber==number+1){ self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]); self.disappearColor(); self.appearPoint(); } else{ div=Star.data.arraySelect.pop(); div.style.background='#fff'; self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)][number%30+1]); } } },Star.timeInterval.speed) }, downGo:function(){ vardiv,number,self=this; Star.keycode=40; clearInterval(Star.timeInterval.timeA) Star.timeInterval.timeA=setInterval(function(){ number=parseInt(Star.data.arraySelect[0].getAttribute('number')); if(parseInt(number/30)>=19||self.hasInArray(number+30,Star.data.arraySelect)){ self.guanle(); } else{ if(Star.data.foodNumber==number+30){ self.pushEleInSelect(Star.data.arrayAll[parseInt(Star.data.foodNumber/30)][Star.data.foodNumber%30]); self.disappearColor(); self.appearPoint(); } else{ div=Star.data.arraySelect.pop(); div.style.background='#fff'; self.pushEleInSelect(Star.data.arrayAll[parseInt(number/30)+1][number%30]); } } },Star.timeInterval.speed) }, guanle:function(){ alert('撞墙了,总分:'+(Star.data.arraySelect.length-3)*parseInt(1000/Star.timeInterval.speed)); location.reload(); }, creatEle:function(tag){ vartagName=tag||'DIV' returndocument.createElement(tagName) }, appendEle:function(ele,father){ varfather=father||document.body||document.documentElement father.appendChild(ele) returnele; }, addStyle:function(ele,css){ for(variincss){ switch(i){ case'b':ele.style.background=css[i];break; case'l':ele.style.left=css[i]+'px';break; case'r':ele.style.right=css[i]+'px';break; case't':ele.style.top=css[i]+'px';break; case'd':ele.style.down=css[i]+'px';break; case'p':ele.style.position=css[i];break; case'w':ele.style.width=css[i]+'px';break; case'h':ele.style.height=css[i]+'px';break; case'f':ele.style.cssFloat=css[i];ele.style.styleFloat=css[i];break; default:ele.style[i]=css[i];break; } } returnele; }, pushEleInSelect:function(){ for(vari=0;i<arguments.length;i++){ Star.data.arraySelect=[arguments[i]].concat(Star.data.arraySelect) this.addStyle(arguments[i],{b:'#f00'}) } } } Star.data={ arrayAll:[], arraySelect:[], newPoint:null, foodNumber:0 } Star.timeInterval={ timeA:null, timeB:null } Star.keycode=0; window.onload=function(){ varselect=Star.creatEle('select'); varoptionDefault=Star.creatEle('option'); optionDefault.innerHTML='请选择关卡' Star.appendEle(optionDefault,select) Star.addStyle(select,{w:200,h:30,p:'absolute',left:'40%',top:'40%'}) for(vari=0;i<10;i++){ varoption=Star.creatEle('option'); option.innerHTML='第'+(i+1)+'关' Star.appendEle(option,select); } Star.appendEle(select) select.onchange=function(){ selectValue=select.options[select.selectedIndex].value||select.options[select.selectedIndex].innerHTML varnumber=selectValue.match(/\d+/)[0] Star.timeInterval.speed=parseInt(200/number); Star.addStyle(select,{display:'none'}); Star.init(); } } </script> </html>
希望本文所述对大家的javascript程序设计有所帮助。