لا يحتوي على محتوى تقني ، فهو يستخدم فقط لممارسة منطق الكود. من أجل الحصول على بنية رمز واضحة ، كتبت جزء التحكم المنطقي في المتغيرات العالمية ، وتم تغليف عمليات واجهة المستخدم في كائنات واجهة المستخدم ، والتي ربما كانت كذلك. للرجوع فقط. عندما كنت أعمل ، اشتكى بعض الأشخاص من أن أسلوب الترميز الخاص بي كان فوضويًا للغاية ، لذلك أردت أن أحاول كتابة شيء لم يكن فوضويًا. .
نسخة الكود كما يلي:
<html>
<head>
<title> 2048 DEMO </title>
<meta charset = 'utf-8' />
<!-
708616 جافا سكريبت الحاضر
http://treemonster.sinaapp.com
->
<head>
<div id = 'box'>
MSIE هي SB
<script>
// يتم استخدام الطريقة العالمية للتحكم المنطقي
وظيفة x4 (n) {
var t = [] ؛
بينما (n-> 0) t.push ([]) ؛
العودة ر ؛
}
وظيفة xx (f) {
لـ (var i = 0 ؛ i <ui.nw ؛ i ++) {
لـ (var j = 0 ؛ j <ui.nw ؛ j ++) {
f (i ، j) ؛
}
}
}
وظيفة جعل (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 ++) {
التراجع [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 () ؛
لـ (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] ؛
خارج [x] [y] = t [1] [j] ؛
}
}
العودة [_arr ، out] ؛
}
وظيفة trans (arr) {
لـ (var i = 0 ، m = 0 ؛ i <ui.nw ؛ i ++) {
if (arr [i] .number === 0) m ++ ؛ else arr [i] .movestep+= m ؛
var _i = arr [i] ؛
لـ (var j = i-1 ؛ j> = 0 ؛ j-) {
إذا (! arr [j]. number) تستمر ؛
إذا (arr [j] .Needkill) استراحة ؛
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 (map ، d) [1] ؛
var _n = 0 ، _begin = x4 (ui.nw) ؛
(وظيفة(){
if (_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؟ '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] = (_ ابدأ [i] [j]+(خريطة [i] [j] .movestep*100/n*_n)*math.pow (-1 ، d))+'px' ؛
}) ؛
_n ++ ؛
setTimeout (edations.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 = 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 ؛
(وظيفة(){
إذا (O <100) setTimeOut (encuments.callee ، 10) ؛
B.Style.Opacity = Math.min (O+= Q ++ ، 100)/100 ؛
}) () ؛
ui.locked = 0 ؛ // فتح
} ؛
//يخلق
ui.init = دالة (NW ، Maxundo ، الحجم ، الأوقات) {
ui.times = الأوقات || 8 ؛ // عدد أوقات الرسوم المتحركة المتأخرة
ui.nw = NW || 5 ؛ // الطول الجانبي للمصفوفة المربعة
ui.map = map = x4 (ui.nw) ؛ // إنشاء كائن كتلة رقمية
ui.size = حجم || 100 ؛ // عرض الخلية
ui.maxundo = maxundo || 5 ؛ // الحد الأقصى لعدد الخطوات التراجع
$ ('box'). innerhtml = '' ؛
xx (وظيفة (i ، j) {
الخريطة [i] [j] = make (0) ؛
document.write ("<div class = 'x' id = 'i"+i+"j"+j+"'/
style = 'اليسار: "+(ui.size*j)+" px ؛ top: "+(ui.size*i)+" px ؛'> </viv>/
<div class = 'y' /
style = 'اليسار: "+(ui.size*j)+" px ؛ top: "+(ui.size*i)+" px ؛'> </viv> ") ؛
}) ؛
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 ؛ اليسار: 50 ٪ ؛ الأعلى: 50 ٪ ؛ الهامش اليساري: -300px ؛ الهامش: -300px ؛}
.x ، .y {background: #ddd ؛ الموضع: المطلق ؛ العرض: 80px ؛ الارتفاع: 80px ؛ الحجم font: 30px ؛ محاذاة النص: الوسط ؛ الخط: 80px ؛ font-weight: 700 ؛ font-family: arial ؛ z-index: 1 ؛}
.x {z-index: 30 ؛}
.r2 {background: #eee4da ؛}
.r4 {background: #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>
ما سبق هو كل المحتوى الموضح في هذه المقالة ، آمل أن تنال إعجابك.