Version JavaScript de 2048 compétences mini-game_javascript

Aucun contenu technique, juste utilisé pour pratiquer la logique du code. Afin d'avoir une structure de code claire, j'ai écrit la partie de contrôle logique dans des variables globales, et les opérations de l'interface utilisateur ont été encapsulées dans des objets d'interface utilisateur, et c'est tout. Pour référence seulement. Au travail, quelqu'un s'est plaint que mon style de codage était trop compliqué, alors j'ai voulu essayer d'écrire quelque chose qui ne l'était pas si compliqué. .

Copier le code Le code est le suivant :

MSIE est SB
<script><br> //全局方法用于逻辑控制<br> fonction x4(n){<br>     var t=[];<br>     while(n-->0)t.push([]);<br>     retourne t;<br> ><br> fonction xx(f){<br>     pour(var i=0;i<UI.nw;i ){<br />         pour(var j=0;j<UI.nw;j ){<br />             f(i,j);<br />         ><br />     ><br /> ><br /> fonction make(n){<br />     revenir {<br />         numéro :n,<br />         moveStep :0,<br />         nouveauNuméro :n,<br />         besoinKill:0<br />     };<br /> ><br /> fonction tran(_arr,md){<br />     var annuler=x4(UI.nw);<br />     var out=x4(UI.nw);<br />     var ud=UI.undo;<br />     if(ud.push(undo)>32)ud.shift();<br>     pour(var i=0;i<UI.nw;i ){<br />         var t=[],o=md%2^1;<br />         pour(var k=0;k<UI.nw;k ){<br />             annuler[i][k]=_arr[i][k].number;<br />             if(md<3)t.push(_arr[i][k]);else t.push(_arr[k][i]);<br />         ><br />         o && t.reverse();<br />         t=trans(t);<br />         if(o)t[0].reverse(),t[1].reverse();<br />         pour(var j=0;j<UI.nw;j ){<br />             var x=i,y=j;<br />             si(md>2)x=j,y=i;<br>             _arr[x][y]=t[0][j];<br>             out[x][y]=t[1][j];<br>         ><br>     ><br>     retourner [_arr,out];<br> ><br> fonction trans(arr){<br>     pour(var i=0,m=0;i<UI.nw;i ){<br />         if(arr[i].number===0)m ;else arr[i].moveStep =m;<br />         var _i=arr[i];<br />         pour(var j=i-1;j>=0;j--){<br>             if(!arr[j].number)continue;<br>             if(arr[j].needKill)break;<br>             if(arr[j].number==_i.number){<br>                 arr[j].needKill=1;<br>                 arr[i].newNumber*=2;<br>                 arr[i].moveStep ;<br>                 m ;<br>             ><br>         ><br>     ><br>     var out=[];<br>     pour(var i=UI.nw;i--;){<br>         !arr[i].needKill && arr[i].number && out.unshift(arr[i].newNumber);<br>     ><br>     while(out.length<UI.nw)out.push(0);<br />     retourner [arr,out];<br /> ><br /> //界面操作开始，界面操作的参数通过全局方法来获得<br /> function $(a){return document.getElementById(a);}<br /> UI={};<br /> UI.update=fonction(d){<br />     if(UI.locked)return;<br />     var map=this.map;<br />     var n=this.times;<br />     UI.locked=1;//未完成动画之前阻止用户动作<br />     var out=tran(map,d)[1];<br />     var _n=0,_begin=x4(UI.nw);<br /> (function(){<br /> if(_n>n){<br>             var _q=0;<br>             xx(function(i,j){<br>                 _q=_q||this.map[i][j].moveStep;<br>                 var o=$('i'+i+'j'+j);<br>                 o.innerHTML=out[i][j]||'';<br>                 o.className='x r'+o.innerText;<br>                 this.map[i][j]=make(out[i][j]);<br>                 o=o.style;<br>                 o.display='block';<br>                 o.left=UI.size*j+"px";<br>                 o.top=UI.size*i+"px";<br>             });<br>             return _q ? UI.addNew():(UI.locked=0);<br>         }<br>         xx(function(i,j){<br>             var o=$('i'+i+'j'+j),t,o1=o.style,s=d<3&#63;'left':'top';<br /> if(t=map[i][j][_n==n&#63;'newNumber':'number'])o.innerHTML=t;else o1.display='none';<br /> if(_begin[i][j]===undefined)_begin[i][j]=parseInt(o1[s]);<br /> o1[s]=(_begin[i][j]+(map[i][j].moveStep*100/n*_n)*Math.pow(-1,d))+'px';<br /> });<br /> _n++;<br /> setTimeout(arguments.callee,10);<br /> })();<br /> }<br /> UI.undo=[];<br /> UI.addNew=function(_q){<br /> UI.locked=1;<br /> var r=[];<br /> xx(function(i,j){<br /> this.map[i][j].number || r.push([i,j]);<br /> });<br /> if(!r.length)return UI.locked=0;<br /> var q=new Date%r.length;q=r[q];<br /> var b=$('i'+q[0]+'j'+q[1]);<br /> var m=this.map[q[0]][q[1]];<br /> b.innerHTML=m.number=m.newNumber=2<<new Date%2;<br /> b.className='x r'+b.innerText;<br /> var o=0,q=5;<br /> (function(){<br /> if(o<100)setTimeout(arguments.callee,10);<br /> b.style.opacity=Math.min(o+=q++,100)/100;<br /> })();<br /> UI.locked=0;//解除锁定<br /> };<br /> //创建<br /> UI.init=function(nw,maxUndo,size,times){<br /> UI.times=times||8;//动画过度次数<br /> UI.nw=nw||5;//方阵边长<br /> UI.map=map=x4(UI.nw);//创建数字块对象<br /> UI.size=size||100;//单元格宽度<br /> UI.maxUndo=maxUndo||5;//最大撤销步数<br /> $('box').innerHTML='';<br /> xx(function(i,j){<br /> map[i][j]=make(0);<br /> document.write("<div class='x' id='i"+i+"j"+j+"'\<br /> style='left:"+(UI.size*j)+"px;top:"+(UI.size*i)+"px;'></div>\<br>          <div class='y' \<br /> style='left:"+(UI.size*j)+"px;top:"+(UI.size*i)+"px;'></div>");<br>     });<br>     UI.addNew();<br>     UI.addNew();<br> };<br> UI.init(6,3,100,20);<br> //自动播放，仅用来做演示的。没有做事件绑定<br> setInterval(function(){UI.update([1,2,3,4][Math.random()*4|0]);},200);<br> </script>

以上就是本文所述的全部内容了，希望大家能够喜欢。