Game 2048 ditulis dalam kode JavaScript asli. Disarankan untuk berjalan di bawah Google Chrome.
2048.html
Salinan kode adalah sebagai berikut:
<! Doctype>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> 2048 </title>
<tautan rel = "stylesheet" type = "text/css" href = "css/2048.css"/>
<!-<script type = "text/javaScript" src = "http://code.jquery.com/jquery-latest.js"> </cript>->
<type skrip = "Text/JavaScript" src = "js/2048.js"> </script>
</head>
<body>
<Div id = "Div2048">
<a id = "start"> ketuk untuk memulai :-) </a>
</div>
</body>
</html>
2048.CSS
Salinan kode adalah sebagai berikut:
@charset "UTF-8";
#Div2048
{
Lebar: 500px;
Tinggi: 500px;
latar belakang-warna: #b8af9e;
margin: 0 otomatis;
Posisi: kerabat;
}
#awal
{
Lebar: 500px;
Tinggi: 500px;
Line-Height: 500px;
Tampilan: Blok;
Teks-Align: tengah;
font-size: 30px;
Latar Belakang: #F2B179;
Warna: #FFFFFF;
}
#Div2048 Div.Tile
{
margin: 20px 0px 20px;
Lebar: 100px;
Tinggi: 40px;
Padding: 30px 0;
Ukuran font: 40px;
Line-Height: 40px;
Teks-Align: tengah;
float: kiri;
}
#Div2048 Div.Tile0 {
Latar Belakang: #CCC0B2;
}
#Div2048 Div.Tile2
{
Warna: #7C736A;
Latar Belakang: #EEE4DA;
}
#Div2048 Div.Tile4
{
Warna: #7C736A;
Latar Belakang: #ECE0C8;
}
#Div2048 Div.Tile8
{
Warna: #ffff7eb;
Latar Belakang: #F2B179;
}
#Div2048 Div.Tile16
{
Warna:#ffff7eb;
Latar Belakang:#F59563;
}
#Div2048 Div.Tile32
{
Warna:#ffff7eb;
Latar Belakang:#F57C5F;
}
#Div2048 Div.Tile64
{
Warna:#ffff7eb;
Latar Belakang:#F65D3B;
}
#Div2048 Div.Tile128
{
Warna:#ffff7eb;
Latar belakang:#edce71;
}
#Div2048 Div.Tile256
{
Warna:#ffff7eb;
Latar belakang:#edcc61;
}
#Div2048 Div.Tile512
{
Warna:#ffff7eb;
Latar Belakang:#ECC850;
}
#Div2048 Div.Tile1024
{
Warna:#ffff7eb;
Latar Belakang:#EDC53F;
}
#Div2048 Div.Tile2048
{
Warna:#ffff7eb;
Latar Belakang:#EEC22E;
}
2048.js
Salinan kode adalah sebagai berikut:
Function Game2048 (wadah)
{
this.container = wadah;
this.tiles = array baru (16);
}
Game2048.prototype = {
init: function () {
untuk (var i = 0, len = this.tiles.length; i <len; i ++) {
var tile = this.newtile (0);
ubin.setAttribute ('index', i);
this.container.AppendChild (ubin);
this.tiles [i] = ubin;
}
this.randomtile ();
this.randomtile ();
},
newTile: function (val) {
var tile = document.createElement ('div');
this.settileval (ubin, val)
ubin kembali;
},
settileval: function (ubin, val) {
ubin.classname = 'ubin ubin' + val;
ubin.setAttribute ('val', val);
ubin.innerHtml = val> 0? Val: '';
},
RandomTile: function () {
var zerotiles = [];
untuk (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);
},
pindahkan: fungsi (arah) {
var j;
switch (arah) {
kasus 'w':
untuk (var i = 4, len = this.tiles.length; i <len; i ++) {
j = i;
while (j> = 4) {
this.merge (this.tiles [j - 4], this.tiles [j]);
J -= 4;
}
}
merusak;
case 's':
untuk (var i = 11; i> = 0; i-) {
j = i;
while (j <= 11) {
this.merge (this.tiles [j + 4], this.tiles [j]);
j += 4;
}
}
merusak;
kasus 'a':
untuk (var i = 1, len = this.tiles.length; i <len; i ++) {
j = i;
while (j % 4! = 0) {
this.merge (this.tiles [j - 1], this.tiles [j]);
j -= 1;
}
}
merusak;
case 'd':
untuk (var i = 14; i> = 0; i-) {
j = i;
while (j % 4! = 3) {
this.merge (this.tiles [j + 1], this.tiles [j]);
j += 1;
}
}
merusak;
}
this.randomtile ();
},
gabungan: function (prevtile, curhtile) {
var prevval = prevtile.getAttribute ('val');
var Currval = CurrTile.GetAttribute ('val');
if (Currval! = 0) {
if (prevVal == 0) {
this.settileval (Prevtile, Currval);
this.settileval (Currtile, 0);
}
lain if (prevVal == Currval) {
this.settileval (prevtile, prevval * 2);
this.settileval (Currtile, 0);
}
}
},
Equal: function (tile1, tile2) {
return tile1.getAttribute ('val') == tile2.getAttribute ('val');
},
max: function () {
untuk (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 2048) {
Kembali Benar;
}
}
},
over: function () {
untuk (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 0) {
mengembalikan false;
}
if (i % 4! = 3) {
if (this.equal (this.tiles [i], this.tiles [i + 1]) {
mengembalikan false;
}
}
if (i <12) {
if (this.equal (this.tiles [i], this.tiles [i + 4]) {
mengembalikan false;
}
}
}
Kembali Benar;
},
Clean: function () {
untuk (var i = 0, len = this.tiles.length; i <len; i ++) {
this.container.removechild (this.tiles [i]);
}
this.tiles = array baru (16);
}
}
VAR Game, StartBTN;
window.onload = function () {
var container = document.geteLementById ('div2048');
startbtn = document.geteLementById ('start');
startbtn.onClick = function () {
this.style.display = 'none';
Game = Game || Game baru2048 (wadah);
Game.init ();
}
}
window.onkeyDown = function (e) {
var Keynum, Keychar;
if (window.event) {// yaitu
keynum = e.keycode;
}
selain itu jika (e.shich) {// netscape/firefox/opera
keynum = E. yang;
}
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?';
kembali;
}
Game.move (KeyChar);
}
}