ไม่มีเนื้อหาทางเทคนิคมันถูกใช้เพื่อฝึกฝนตรรกะรหัส เพื่อให้มีโครงสร้างรหัสที่ชัดเจนฉันได้เขียนส่วนควบคุมตรรกะในตัวแปรทั่วโลกและการดำเนินการส่วนต่อประสานผู้ใช้ถูกห่อหุ้มในวัตถุ UI ซึ่งอาจเป็นกรณี สำหรับการอ้างอิงเท่านั้น เมื่อฉันทำงานบางคนบ่นว่ารูปแบบการเข้ารหัสของฉันยุ่งเกินไปดังนั้นฉันจึงอยากลองเขียนสิ่งที่ไม่ยุ่ง -
การคัดลอกรหัสมีดังนี้:
<html>
<head>
<title> 2048 Demo </title>
<meta charset = 'utf-8' />
-
708616 JavaScript ปัจจุบัน
http://treemonster.sinaapp.com
-
<head>
<div id = 'box'>
msie คือ sb
<script>
// วิธีการทั่วโลกใช้สำหรับการควบคุมเชิงตรรกะ
ฟังก์ชั่น x4 (n) {
var t = [];
ในขณะที่ (n-> 0) t.push ([]);
กลับ t;
-
ฟังก์ชั่น xx (f) {
สำหรับ (var i = 0; i <ui.nw; i ++) {
สำหรับ (var j = 0; j <ui.nw; j ++) {
f (i, j);
-
-
-
ฟังก์ชั่น make (n) {
กลับ {
หมายเลข: N,
Movestep: 0,
newnumber: n,
Needkill: 0
-
-
ฟังก์ชั่น tran (_arr, md) {
var undo = x4 (ui.nw);
var out = x4 (ui.nw);
var ud = ui.undo;
if (ud.push (undo)> 32) ud.shift ();
สำหรับ (var i = 0; i <ui.nw; i ++) {
var t = [], o = md%2^1;
สำหรับ (var k = 0; k <ui.nw; k ++) {
undo [i] [k] = _ arr [i] [k]. จำนวน;
ถ้า (md <3) t.push (_arr [i] [k]); อื่น ๆ t.push (_arr [k] [i]);
-
o && t.reverse ();
t = trans (t);
ถ้า (o) t [0] .Reverse (), t [1] .Reverse ();
สำหรับ (var j = 0; j <ui.nw; j ++) {
var x = i, y = j;
ถ้า (md> 2) x = j, y = i;
_arr [x] [y] = t [0] [j];
ออก [x] [y] = t [1] [j];
-
-
return [_arr, out];
-
ฟังก์ชันทรานส์ (arr) {
สำหรับ (var i = 0, m = 0; i <ui.nw; i ++) {
if (arr [i] .number === 0) m ++; elr arr [i] .movestep+= m;
var _i = arr [i];
สำหรับ (var j = i-1; j> = 0; j-) {
ถ้า (! arr [j]. จำนวน) ดำเนินการต่อ;
ถ้า (arr [j]. needkill) break;
if (arr [j] .number == _ i.number) {
arr [j] .needkill = 1;
arr [i]. newnumber*= 2;
arr [i] .movestep ++;
M ++;
-
-
-
var out = [];
สำหรับ (var i = ui.nw; i-;) {
! arr [i] .needkill && arr [i] .number && out.unshift (arr [i]. newnumber);
-
ในขณะที่ (out.length <ui.nw) out.push (0);
กลับ [arr, out];
-
// การดำเนินการอินเทอร์เฟซเริ่มต้นและพารามิเตอร์ของการทำงานของอินเตอร์เฟสจะได้รับผ่านวิธีการทั่วโลก
ฟังก์ชั่น $ (a) {return document.getElementById (a);}
ui = {};
ui.Update = function (d) {
ถ้า (ui.locked) กลับ;
var map = this.map;
var n = this.times;
ui.locked = 1; // หยุดการกระทำของผู้ใช้ก่อนที่ภาพเคลื่อนไหวจะเสร็จสมบูรณ์
var out = tran (แผนที่, d) [1];
var _n = 0, _begin = x4 (ui.nw);
(การทำงาน(){
ถ้า (_n> n) {
var _q = 0;
xx (ฟังก์ชั่น (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 (ฟังก์ชั่น (i, j) {
var o = $ ('i'+i+'j'+j), t, o1 = o.style, s = d <3? 'ซ้าย': 'top';
if (t = map [i] [j] [_ n == n?
ถ้า (_begin [i] [j] === ไม่ได้กำหนด) _begin [i] [j] = parseint (o1 [s]);
o1 [s] = (_ เริ่มต้น [i] [j]+(แผนที่ [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 (ฟังก์ชั่น (i, j) {
this.map [i] [j]. number || r.push ([i, j]);
-
if (! r.length) return ui.locked = 0;
var q = วันที่ใหม่%rength; 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 << วันที่ใหม่%2;
b.className = 'x r'+b.innerText;
var o = 0, q = 5;
(การทำงาน(){
ถ้า (o <100) settimeout (arguments.callee, 10);
b.style.Opacity = math.min (o+= q ++, 100)/100;
-
ui.locked = 0; // ปลดล็อค
-
//สร้าง
ui.init = function (nw, maxundo, ขนาด, เวลา) {
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 (ฟังก์ชั่น (i, j) {
แผนที่ [i] [j] = ทำ (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 {ตำแหน่ง: Absolute; ซ้าย: 50%; Top: 50%; Margin-Left: -300px; margin-top: -300px;}
.x, .y {พื้นหลัง: #DDD; ตำแหน่ง: Absolute; Width: 80px; ความสูง: 80px; Font-Size: 30px; Text-Align: Center; Line-Height: 80px; Font-Weight: 700; Font-Family: Arial; Z-INDEX: 1;
.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 {สี: #f9f6f2;
พื้นหลัง: #edcf72;}
.r256 {สี: #f9f6f2;
พื้นหลัง: #edcc61;}
.r512 {color: #f9f6f2;
พื้นหลัง: #edc850;}
.r1024 {color: #f9f6f2;
พื้นหลัง: #edc53f;}
.R2048 {สี: #F9F6F2;
พื้นหลัง: #edc22e;}
</style>
ข้างต้นเป็นเนื้อหาทั้งหมดที่อธิบายไว้ในบทความนี้ฉันหวังว่าคุณจะชอบ