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"> </cript>->
<script type = "text/javascript" src = "js/2048.js"> </script>
</head>
<body>
<div id = "div2048">
<a id = "เริ่ม"> แตะเพื่อเริ่ม :-) </a>
</div>
</body>
</html>
2048.css
การคัดลอกรหัสมีดังนี้:
@Charset "UTF-8";
#div2048
-
ความกว้าง: 500px;
ความสูง: 500px;
พื้นหลังสี: #b8af9e;
มาร์จิ้น: 0 อัตโนมัติ;
ตำแหน่ง: ญาติ;
-
#เริ่ม
-
ความกว้าง: 500px;
ความสูง: 500px;
ระดับความสูง: 500px;
แสดง: บล็อก;
TEXT-ALIGN: CENTER;
ขนาดตัวอักษร: 30px;
ความเป็นมา: #F2B179;
สี: #ffffff;
-
#div2048 div.tile
-
มาร์จิ้น: 20px 0px 20px;
ความกว้าง: 100px;
ความสูง: 40px;
Padding: 30px 0;
ขนาดตัวอักษร: 40px;
สายไฟ: 40px;
TEXT-ALIGN: CENTER;
ลอย: ซ้าย;
-
#div2048 div.tile0 {
ความเป็นมา: #CCC0B2;
-
#div2048 div.tile2
-
สี: #7C736A;
ความเป็นมา: #EEEE4DA;
-
#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 ('ดัชนี', i);
this.container.appendchild (กระเบื้อง);
this.tiles [i] = กระเบื้อง;
-
this.randomtile ();
this.randomtile ();
-
Newtile: ฟังก์ชั่น (val) {
var tile = document.createElement ('div');
this.settileval (กระเบื้อง, val)
กระเบื้องกลับ;
-
Settileval: ฟังก์ชั่น (กระเบื้อง, val) {
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);
-
ย้าย: ฟังก์ชั่น (ทิศทาง) {
var J;
สวิตช์ (ทิศทาง) {
กรณี '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;
-
-
หยุดพัก;
กรณี 's':
สำหรับ (var i = 11; i> = 0; i-) {
j = i;
ในขณะที่ (j <= 11) {
this.merge (this.tiles [j + 4], this.tiles [j]);
j += 4;
-
-
หยุดพัก;
กรณี 'A':
สำหรับ (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;
-
-
หยุดพัก;
กรณี 'D':
สำหรับ (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');
ถ้า (currval! = 0) {
ถ้า (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');
-
สูงสุด: ฟังก์ชัน () {
สำหรับ (var i = 0, len = this.tiles.length; i <len; i ++) {
if (this.tiles [i] .getAttribute ('val') == 2048) {
กลับมาจริง;
-
-
-
over: function () {
สำหรับ (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])) {
กลับเท็จ;
-
-
ถ้า (i <12) {
ถ้า (this.equal (this.tiles [i], this.tiles [i + 4])) {
กลับเท็จ;
-
-
-
กลับมาจริง;
-
ทำความสะอาด: ฟังก์ชั่น () {
สำหรับ (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 = 'ไม่มี';
เกม = เกม || ใหม่ Game2048 (คอนเทนเนอร์);
game.init ();
-
-
window.onkeydown = function (e) {
var keynum, keychar;
if (window.event) {// เช่น
keynum = e.keycode;
-
อื่นถ้า (e.which) {// netscape/firefox/opera
keynum = E. ซึ่ง;
-
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);
-
-