Maison > interface Web > js tutoriel > Version JavaScript de 2048 compétences mini-game_javascript

Version JavaScript de 2048 compétences mini-game_javascript

WBOY
Libérer: 2016-05-16 16:08:46
original
1088 Les gens l'ont consulté

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 :



2048 DÉMO




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>


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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal