No technical content, just used to practice code logic. For the clarity of the code structure, I write the logic control part in the global variable, the user interface operation is encapsulated in the UI object, presumably. For reference only. At work, my coding style was a bit messy, so I tried to write something that wasn't that messy.
<HTML>
<title>2048 demo</title>
<meta charset= ' Utf-8 '/>
<!--
708616 JavaScript present
Http://treemonster.sinaapp.com
1696292264@qq.com
-->
<div id= ' box ' >
MSIE is SB
<script>
Global methods for logical control
function x4 (n) {
var t=[];
while (n-->0) T.push ([]);
return t;
}
function xx (f) {
for (Var i=0;i<ui.nw;i++) {
for (Var j=0;j<ui.nw;j++) {
f (i,j);
}
}
}
function make (n) {
return {
Number:n,
movestep:0,
Newnumber:n,
needkill:0
};
}
Function Tran (_ARR,MD) {
var undo=x4 (UI.NW);
var out=x4 (UI.NW);
var Ud=ui.undo;
if (Ud.push (undo) >32) Ud.shift ();
for (Var i=0;i<ui.nw;i++) {
var t=[],o=md%2^1;
for (Var k=0;k<ui.nw;k++) {
Undo[i][k]=_arr[i][k].number;
if (md<3) T.push (_arr[i][k]); else T.push (_arr[k][i));
}
o && t.reverse ();
T=trans (t);
if (o) t[0].reverse (), T[1].reverse ();
for (Var j=0;j<ui.nw;j++) {
var x=i,y=j;
if (md>2) x=j,y=i;
_ARR[X][Y]=T[0][J];
OUT[X][Y]=T[1][J];
}
}
return [_arr,out];
}
function trans (arr) {
for (Var i=0,m=0;i<ui.nw;i++) {
if (arr[i].number===0) M++;else arr[i].movestep+=m;
var _i=arr[i];
for (Var j=i-1;j>=0;j--) {
if (!arr[j].number) continue;
if (Arr[j].needkill) break;
if (Arr[j].number==_i.number) {
arr[j].needkill=1;
arr[i].newnumber*=2;
arr[i].movestep++;
m++;
}
}
}
var out=[];
for (Var i=ui.nw;i--;) {
!arr[i].needkill && arr[i].number && out.unshift (arr[i].newnumber);
}
while (OUT.LENGTH<UI.NW) out.push (0);
return [Arr,out];
}
Interface operation begins, the parameters of interface operation are obtained by global method
function $ (a) {return document.getElementById (a);}
ui={};
Ui.update=function (d) {
if (ui.locked) return;
var Map=this.map;
var n=this.times;
ui.locked=1;//prevents user actions before animation is completed
var Out=tran (map,d) [1];
var _n=0,_begin=x4 (UI.NW);
(function () {
if (_n>n) {
var _q=0;
XX (function (i,j) {
_q=_q| | This.map[i][j].movestep;
var o=$ (' I ' +i+ ' J ' +j);
o.innerhtml=out[i][j]| | ';
O.classname= ' x R ' +o.innertext;
This.map[i][j]=make (Out[i][j]);
O=o.style;
o.display= ' block ';
o.left=ui.size*j+ "px";
o.top=ui.size*i+ "px";
});
Return _q? Ui.addnew ():(ui.locked=0);
}
XX (function (i,j) {
var o=$ (' I ' +i+ ' J ' +j), t,o1=o.style,s=d<3? ' Left ': ' Top ';
if (t=map[i][j][_n==n? ') Newnumber ': ' Number ']) o.innerhtml=t;else o1.display= ' None ';
if (_begin[i][j]===undefined) _begin[i][j]=parseint (O1[s]);
O1[s]= (_begin[i][j]+ (map[i][j].movestep*100/n*_n) *math.pow ( -1,d)) + ' px ';
});
_n++;
SetTimeout (arguments.callee,10);
})();
}
Ui.undo=[];
Ui.addnew=function (_q) {
ui.locked=1;
var r=[];
XX (function (i,j) {
This.map[i][j].number | | R.push ([i,j]);
});
if (!r.length) return ui.locked=0;
var q=new date%r.length;q=r[q];
var b=$ (' I ' +q[0]+ ' J ' +q[1]);
var m=this.map[q[0]][q[1]];
B.innerhtml=m.number=m.newnumber=2<<new date%2;
B.classname= ' x R ' +b.innertext;
var o=0,q=5;
(function () {
if (o<100) settimeout (arguments.callee,10);
B.style.opacity=math.min (o+=q++,100)/100;
})();
ui.locked=0;//unlock
};
Create
Ui.init=function (nw,maxundo,size,times) {
ui.times=times| | 8;//animation excessive number of times
ui.nw=nw| | Side length of 5;//phalanx
UI.MAP=MAP=X4 (UI.NW);//Create a number block object
ui.size=size| | 100;//Cell width
ui.maxundo=maxundo| | 5;//Maximum undo Step number
$ (' box '). innerhtml= ';
XX (function (i,j) {
Map[i][j]=make (0);
document.write ("<div class= ' x ' id= ' I" +i+ "J" +j+ ""
Style= ' Left: + (ui.size*j) + "Px;top:" + (ui.size*i) + px; ></div>\
<div class= ' y ' \
Style= ' Left: + (ui.size*j) + "Px;top:" + (ui.size*i) + px; ></div> ");
});
Ui.addnew ();
Ui.addnew ();
};
Ui.init (6,3,100,20);
AutoPlay, for demonstration purposes only. Did not do event binding
SetInterval (function () {ui.update ([1,2,3,4][math.random () *4|0]);},200);
</script>
</div>
<style>
#box {position:absolute;left:50%;top:50%;margin-left:-300px;margin-top:-300px;}
. X,.y{background: #ddd;p osition:absolute;width:80px;height:80px;font-size:30px;text-align:center;line-height : 80px;font-weight:700;font-family:arial;z-index:1;}
. x{z-index:30;}
. R2{background: #eee4da;}
. R4{background: #ede0c8;}
. R8{color: #f9f6f2; background: #f2b179;}
. r16{color: #f9f6f2;
Background: #f59563; }
. R32{color: #f9f6f2;
Background: #f67c5f; }
. r64{color: #f9f6f2;
Background: #f65e3b; }
. r128{color: #f9f6f2;
Background: #edcf72;}
. r256{color: #f9f6f2;
Background: #edcc61;}
. r512{color: #f9f6f2;
Background: #edc850;}
. r1024{color: #f9f6f2;
Background: #edc53f;}
. r2048{color: #f9f6f2;
Background: #edc22e;}
</style>
The above is the full content of this article, I hope you can enjoy.
