2048 لعبة مكتوبة في رمز JavaScript الأصلي. يوصى بالتشغيل تحت Google Chrome.
2048.html
نسخة الكود كما يلي:
<! doctype>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> 2048 </title>
<link rel = "stylesheet" type = "text/css" href = "css/2048.css"/>
<!-<script type = "text/javaScript" src = "http://code.jquery.com/jquery-latest.js"> </script>->
<script type = "text/javaScript" src = "js/2048.js"> </script>
</head>
<body>
<div id = "div2048">
<a id = "start"> انقر للبدء :-) </a>
</div>
</body>
</html>
2048.CSS
نسخة الكود كما يلي:
charset "UTF-8" ؛
#Div2048
{
العرض: 500 بكسل ؛
الارتفاع: 500 بكسل ؛
خلفية اللون: #b8af9e ؛
الهامش: 0 Auto ؛
الموقف: قريب
}
#يبدأ
{
العرض: 500 بكسل ؛
الارتفاع: 500 بكسل ؛
ارتفاع الخط: 500 بكسل ؛
العرض: كتلة ؛
محاذاة النص: المركز ؛
حجم الخط: 30 بكسل ؛
الخلفية: #F2B179 ؛
اللون: #ffffff ؛
}
#div2048 div.tile
{
الهامش: 20px 0px 20px ؛
العرض: 100px ؛
الارتفاع: 40 بكسل ؛
الحشو: 30 بكسل 0 ؛
حجم الخط: 40 بكسل ؛
رفع الخط: 40 بكسل ؛
محاذاة النص: المركز ؛
تعويم: اليسار.
}
#div2048 div.tile0 {
الخلفية: #CCC0B2 ؛
}
#div2048 div.tile2
{
اللون: #7C736A ؛
الخلفية: #eee4da ؛
}
#div2048 div.tile4
{
اللون: #7C736A ؛
الخلفية: #ECE0C8 ؛
}
#div2048 div.tile8
{
اللون: #FFFF7EB ؛
الخلفية: #F2B179 ؛
}
#div2048 div.tile16
{
اللون:#FFFF7EB ؛
الخلفية:#F59563 ؛
}
#div2048 div.tile32
{
اللون:#FFFF7EB ؛
الخلفية:#F57C5F ؛
}
#div2048 div.tile64
{
اللون:#FFFF7EB ؛
الخلفية:#f65d3b ؛
}
#div2048 div.tile128
{
اللون:#FFFF7EB ؛
الخلفية:#EDCE71 ؛
}
#div2048 div.tile256
{
اللون:#FFFF7EB ؛
الخلفية:#edcc61 ؛
}
#div2048 div.tile512
{
اللون:#FFFF7EB ؛
الخلفية:#ECC850 ؛
}
#div2048 div.tile1024
{
اللون:#FFFF7EB ؛
الخلفية:#edc53f ؛
}
#div2048 div.tile2048
{
اللون:#FFFF7EB ؛
الخلفية:#EEC22E ؛
}
2048.JS
نسخة الكود كما يلي:
وظيفة Game2048 (حاوية)
{
this.container = حاوية ؛
this.tiles = صفيف جديد (16) ؛
}
Game2048.Prototype = {
init: function () {
لـ (var i = 0 ، len = this.tiles.length ؛ i <len ؛ i ++) {
var tile = this.newtile (0) ؛
tile.setAttribute ('index' ، i) ؛
this.container.appendchild (Tile) ؛
this.tiles [i] = tile ؛
}
this.randomtile () ؛
this.randomtile () ؛
} ،
NewTile: Function (Val) {
var tile = document.createElement ('div') ؛
this.Settileval (Tile ، Val)
عودة بلاط.
} ،
SettileVal: وظيفة (بلاط ، فال) {
Tile.ClassName = 'tile tile' + val ؛
tile.setattribute ('val' ، val) ؛
tile.innerhtml = val> 0؟ فال: '' ؛
} ،
RandomTile: Function () {
var zerotiles = [] ؛
لـ (var i = 0 ، len = this.tiles.length ؛ i <len ؛ i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
zerotiles.push (this.tiles [i]) ؛
}
}
var rtile = zerotiles [math.floor (Math.Random () * zerotiles.length)] ؛
this.settileval (rtile ، math.random () <0.8؟ 2: 4) ؛
} ،
نقل: الوظيفة (الاتجاه) {
فار ي.
التبديل (الاتجاه) {
القضية 'w':
لـ (var i = 4 ، len = this.tiles.length ؛ i <len ؛ i ++) {
j = i ؛
بينما (j> = 4) {
this.merge (this.tiles [j - 4] ، this.tiles [j]) ؛
J -= 4 ؛
}
}
استراحة؛
حالات':
لـ (var i = 11 ؛ i> = 0 ؛ i-) {
j = i ؛
بينما (j <= 11) {
this.merge (this.tiles [j + 4] ، this.tiles [j]) ؛
J += 4 ؛
}
}
استراحة؛
حالة "أ":
لـ (var i = 1 ، len = this.tiles.length ؛ i <len ؛ i ++) {
j = i ؛
بينما (j ٪ 4! = 0) {
this.merge (this.tiles [j - 1] ، this.tiles [j]) ؛
J -= 1 ؛
}
}
استراحة؛
حالة "د":
لـ (var i = 14 ؛ i> = 0 ؛ i-) {
j = i ؛
بينما (j ٪ 4! = 3) {
this.merge (this.tiles [j + 1] ، this.tiles [j]) ؛
J += 1 ؛
}
}
استراحة؛
}
this.randomtile () ؛
} ،
دمج: وظيفة (prevtile ، currtile) {
var prevval = prevtile.getAttribute ('val') ؛
var currval = currtile.getAttribute ('val') ؛
if (currval! = 0) {
if (prevval == 0) {
this.settileval (Prevtile ، currval) ؛
this.settileval (currtile ، 0) ؛
}
آخر إذا (prevval == currval) {
this.settileval (prevtile ، prevval * 2) ؛
this.settileval (currtile ، 0) ؛
}
}
} ،
متساوٍ: وظيفة (tile1 ، tile2) {
return tile1.getAttribute ('val') == tile2.GetAttribute ('val') ؛
} ،
Max: Function () {
لـ (var i = 0 ، len = this.tiles.length ؛ i <len ؛ i ++) {
if (this.tiles [i] .getAttribute ('val') == 2048) {
العودة صحيح.
}
}
} ،
أكثر: وظيفة () {
لـ (var i = 0 ، len = this.tiles.length ؛ i <len ؛ i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
العودة كاذبة
}
إذا (i ٪ 4! = 3) {
if (this.equal (this.tiles [i] ، this.tiles [i + 1])) {
العودة كاذبة
}
}
إذا (أنا <12) {
if (this.equal (this.tiles [i] ، this.tiles [i + 4])) {
العودة كاذبة
}
}
}
العودة صحيح.
} ،
Clean: Function () {
لـ (var i = 0 ، len = this.tiles.length ؛ i <len ؛ i ++) {
this.container.removechild (this.tiles [i]) ؛
}
this.tiles = صفيف جديد (16) ؛
}
}
var game ، startbtn ؛
window.onload = function () {
var container = document.getElementById ('div2048') ؛
startBtn = document.getElementById ('start') ؛
startbtn.onclick = function () {
this.style.display = 'none' ؛
لعبة = لعبة || New Game2048 (حاوية) ؛
game.init () ؛
}
}
window.onkeydown = function (e) {
var keynum ، keychar ؛
if (window.event) {// ie
keynum = e.KeyCode ؛
}
آخر إذا (E.hich) {// netscape/firefox/opera
keynum = e.hich ؛
}
keychar = string.fromcharcode (keynum) ؛
if (['w' ، 's' ، 'a' ، 'd']. indexof (keychar)> -1) {
if (game.over ()) {
game.clean () ؛
startbtn.style.display = 'block' ؛
startbtn.innerhtml = 'game over ، replay؟' ؛
يعود؛
}
game.move (keychar) ؛
}
}