Tidak memiliki konten teknis, hanya digunakan untuk mempraktikkan logika kode. Untuk memiliki struktur kode yang jelas, saya menulis bagian kontrol logika dalam variabel global, dan operasi antarmuka pengguna dienkapsulasi dalam objek UI, yang mungkin terjadi. Hanya untuk referensi. Ketika saya bekerja, beberapa orang mengeluh bahwa gaya pengkodean saya terlalu berantakan, jadi saya ingin mencoba menulis sesuatu yang tidak berantakan. .
Salinan kode adalah sebagai berikut:
<Html>
<head>
<title> 2048 demo </iteme>
<meta charset = 'UTF-8' />
<!-
708616 JavaScript hadir
http://treemonster.sinaapp.com
->
<head>
<Div id = 'box'>
MSie adalah SB
<script>
// Metode global digunakan untuk kontrol logis
fungsi x4 (n) {
var t = [];
while (n-> 0) t.push ([]);
mengembalikan t;
}
fungsi xx (f) {
untuk (var i = 0; i <ui.nw; i ++) {
untuk (var j = 0; j <ui.nw; j ++) {
f (i, j);
}
}
}
fungsi membuat (n) {
kembali {
Nomor: 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 ();
untuk (var i = 0; i <ui.nw; i ++) {
var t = [], o = md%2^1;
untuk (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 ();
untuk (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];
keluar [x] [y] = t [1] [j];
}
}
return [_arr, out];
}
function trans (arr) {
untuk (var i = 0, m = 0; i <ui.nw; i ++) {
if (arr [i] .number === 0) m ++; else arr [i] .movestep+= m;
var _i = arr [i];
untuk (var j = i-1; j> = 0; j-) {
if (! arr [j] .number) lanjutkan;
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 = [];
untuk (var i = ui.nw; i-;) {
! arr [i] .needkill && arr [i] .number && out.unshift (arr [i] .newNumber);
}
while (out.length <ui.nw) out.push (0);
mengembalikan [arr, out];
}
// Operasi antarmuka dimulai, dan parameter operasi antarmuka diperoleh melalui metode global
fungsi $ (a) {return document.getElementById (a);}
Ui = {};
Ui.update = function (d) {
if (ui.locked) kembali;
var peta = this.map;
var n = this.times;
Ui.locked = 1; // Hentikan tindakan pengguna sebelum animasi selesai
var out = tran (peta, d) [1];
var _n = 0, _begin = x4 (ui.nw);
(fungsi(){
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. gaya;
o.display = 'block';
o.left = ui.size*j+"px";
o.top = ui.size*i+"px";
});
mengembalikan _q? Ui.addnew () :( ui.locked = 0);
}
xx (function (i, j) {
var o = $ ('i'+i+'j'+j), t, o1 = o.style, s = d <3? 'kiri': 'top';
if (t = peta [i] [j] [_ n == n? 'newNumber': 'number']) o.innerHtml = t; else o1.display = 'none';
if (_begin [i] [j] === tidak terdefinisi) _begin [i] [j] = parseInt (o1 [s]);
o1 [s] = (_ mulai [i] [j]+(peta [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 = tanggal baru%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 << Tanggal baru%2;
b.classname = 'x r'+b.innertext;
var o = 0, q = 5;
(fungsi(){
if (o <100) setTimeout (Arguments.Callee, 10);
b.style.opacity = math.min (o+= q ++, 100)/100;
}) ();
Ui.locked = 0; // Buka kunci
};
//membuat
Ui.init = fungsi (nw, maxundo, size, kali) {
Ui.times = Times || 8; // Jumlah animasi yang sudah lewat waktu
Ui.nw = nw || 5; // Panjang sisi matriks kuadrat
Ui.map = peta = x4 (ui.nw); // Buat objek blok digital
Ui.size = ukuran || 100; // lebar sel
Ui.maxundo = maxundo || 5; // jumlah maksimum langkah undo
$ ('box'). innerHtml = '';
xx (function (i, j) {
peta [i] [j] = make (0);
document.write ("<div class = 'x' id = 'i"+i+"j"+j+"'/
style = 'left: "+(ui.size*j)+" px; atas: "+(ui.size*i)+" px;'> </div>//
<Div class = 'y' /
style = 'left: "+(ui.size*j)+" px; atas: "+(ui.size*i)+" px;'> </div> ");
});
Ui.addnew ();
Ui.addnew ();
};
Ui.init (6,3,100,20);
// Putar otomatis, hanya untuk demonstrasi. Tidak ada acara yang mengikat
setInterval (function () {ui.update ([1,2,3,4] [math.random ()*4 | 0]);}, 200);
</script>
</div>
<tyle>
#box {position: absolute; kiri: 50%; atas: 50%; margin-kiri: -300px; margin-top: -300px;}
.x, .y {latar belakang: #ddd; posisi: absolute; lebar: 80px; tinggi: 80px; font-ukuran: 30px; teks-align: tengah; garis-line-height: 80px; font-weight: 700; font-family: arial; z-index: 1;}
.x {z-index: 30;}
.r2 {latar belakang: #eee4da;}
.r4 {latar belakang: #ede0c8;}
.r8 {color: #f9f6f2; latar belakang: #f2b179;}
.r16 {color: #f9f6f2;
Latar Belakang: #F59563; }
.r32 {color: #f9f6f2;
Latar Belakang: #F67C5F; }
.r64 {color: #f9f6f2;
Latar Belakang: #F65E3B; }
.r128 {color: #f9f6f2;
Latar belakang: #edcf72;}
.r256 {color: #f9f6f2;
Latar belakang: #edcc61;}
.r512 {color: #f9f6f2;
Latar Belakang: #EDC850;}
.r1024 {color: #f9f6f2;
Latar belakang: #edc53f;}
.r2048 {color: #f9f6f2;
Latar belakang: #edc22e;}
</tyle>
Di atas adalah semua konten yang dijelaskan dalam artikel ini, saya harap Anda menyukainya.