技術的なコンテンツはありません。コードロジックを練習するために使用されます。明確なコード構造を持つために、グローバル変数にロジック制御部分を書き、ユーザーインターフェイス操作がUIオブジェクトにカプセル化されましたが、これはおそらくそうでした。参照のみ。私が働いていたとき、一部の人々は私のコーディングスタイルがあまりにも乱雑であると不平を言ったので、私はそれほど乱雑ではない何かを書きたいと思いました。 。
コードコピーは次のとおりです。
<html>
<head>
<title> 2048 demo </title>
<メタcharset = 'utf-8' />
<！ -
708616 JavaScriptの存在
http://treemonster.sinaapp.com
- >
<head>
<div id = 'box'>
MSIEはSBです
<スクリプト>
//グローバルメソッドは論理制御に使用されます
関数x4（n）{
var t = [];
while（n - > 0）t.push（[]）;
tを返します。
}
関数xx（f）{
for（var i = 0; i <ui.nw; i ++）{
for（var j = 0; j <ui.nw; j ++）{
f（i、j）;
}
}
}
関数make（n）{
戻る {
番号：n、
movestep：0、
NewNumber：n、
ニードキル：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）継続;
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];
}
//インターフェイス操作が開始され、インターフェイス操作のパラメーターはグローバルな方法で取得されます
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; //アニメーションが完了する前にユーザーアクションを停止します
var out = tran（map、d）[1];
var _n = 0、_begin = x4（ui.nw）;
（関数（）{
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";
}）;
_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（_bigin [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 ++;
setimeout（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;
（関数（）{
if（o <100）setimeout（arguments.callee、10）;
B.Style.Opacity = Math.Min（O+= Q ++、100）/100;
}）（）;
ui.locked = 0; //解除
};
//作成する
ui.init = function（nw、maxundo、size、times）{
ui.times = times || 8; //アニメーションの数
ui.nw = nw || 5; //正方行列の側面長
ui.map = map = x4（ui.nw）; //デジタルブロックオブジェクトを作成します
ui.size = size || 100; //セル幅
ui.maxundo = maxundo || 5; //元に戻す手順の最大数
$（ '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）;
//デモンストレーションのみ。イベントバインディングはありません
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
.x {z-index：30;}
.r2 {背景：＃eee4da;}
.r4 {背景：＃ede0c8;}
.r8 {color：＃f9f6f2;背景：＃f2b179;}
.r16 {color：＃f9f6f2;
背景：＃F59563; }
.r32 {color：＃f9f6f2;
背景：＃f67c5f; }
.r64 {color：＃f9f6f2;
背景：＃f65e3b; }
.r128 {color：＃f9f6f2;
背景：＃edcf72;}
.r256 {color：＃f9f6f2;
背景：＃edcc61;}
.r512 {color：＃f9f6f2;
背景：＃edc850;}
.r1024 {color：＃f9f6f2;
背景：＃edc53f;}
.r2048 {color：＃f9f6f2;
背景：＃edc22e;}
</style>
上記はこの記事で説明されているすべてのコンテンツです。あなたがそれを気に入っていただければ幸いです。