ネイティブJavaScriptコードで記述された2048ゲーム。 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
{
幅：500px;
高さ：500px;
バックグラウンドカラー：＃b8af9e;
マージン：0 Auto;
位置：相対;
}
＃始める
{
幅：500px;
高さ：500px;
ラインハイト：500px;
表示：ブロック;
テキストアライグ：センター;
フォントサイズ：30px;
背景：＃F2B179;
色：#ffffff;
}
＃div2048 div.tile
{
マージン：20px 0px 20px;
幅：100px;
高さ：40px;
パディング：30px 0;
フォントサイズ：40px;
Line-Height：40px;
テキストアライグ：センター;
フロート：左;
}
＃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
コードコピーは次のとおりです。
function game2048（コンテナ）
{
this.container = container;
this.tiles = new Array（16）;
}
game2048.prototype = {
init：function（）{
for（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（タイル、val）
タイルを返します。
}、
setileval：function（tile、val）{
tile.classname = 'Tile Tile' + val;
tile.setattribute（ 'val'、val）;
tile.innerhtml = val> 0？ Val： '';
}、
randomtile：function（）{
var zerotiles = [];
for（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）;
}、
移動：function（方向）{
var J;
switch（方向）{
ケース 'W'：
for（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;
}
}
壊す;
ケース 's'：
for（var i = 11; i> = 0; i-）{
j = i;
while（j <= 11）{
this.merge（this.tiles [j + 4]、this.tiles [j]）;
J += 4;
}
}
壊す;
ケース 'A'：
for（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;
}
}
壊す;
ケース 'D'：
for（var i = 14; i> = 0; i-）{
j = i;
while（j％4！= 3）{
this.merge（this.tiles [j + 1]、this.tiles [j]）;
J += 1;
}
}
壊す;
}
this.randomtile（）;
}、
マージ：function（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）;
}
else if（prevval == curlval）{
this.settileval（prevtile、prevval * 2）;
this.settileval（currtile、0）;
}
}
}、
等しい：function（tile1、tile2）{
return tile1.getattribute（ 'val'）== tile2.getattribute（ 'val'）;
}、
max：function（）{
for（var i = 0、len = this.tiles.length; i <len; i ++）{
if（this.tiles [i] .getattribute（ 'val'）== 2048）{
trueを返します。
}
}
}、
オーバー：function（）{
for（var i = 0、len = this.tiles.length; i <len; i ++）{
if（this.tiles [i] .getattribute（ 'val'）== 0）{
falseを返します。
}
if（i％4！= 3）{
if（this.equal（this.tiles [i]、this.tiles [i + 1]））{
falseを返します。
}
}
if（i <12）{
if（this.equal（this.tiles [i]、this.tiles [i + 4]））{
falseを返します。
}
}
}
trueを返します。
}、
清潔：function（）{
for（var i = 0、len = this.tiles.length; i <len; i ++）{
this.container.removechild（this.tiles [i]）;
}
this.tiles = new Array（16）;
}
}
varゲーム、startbtn;
window.onload = function（）{
var container = document.getElementById（ 'div2048'）;
startbtn = document.getElementById（ 'start'）;
startbtn.onclick = function（）{
this.style.display = 'none';
ゲーム=ゲーム||新しいGame2048（コンテナ）;
game.init（）;
}
}
window.onkeydown = function（e）{
var keynum、keychar;
if（window.event）{// ie
keynum = e.keycode;
}
else if（e.which）{// netscape/firefox/opera
keynum = e. which;
}
keychar = string.fromCharcode（keynum）;
if（['w'、 's'、 'a'、 'd']。indexof（keychar）> -1）{
if（game.over（））{
game.clean（）;
startbtn.style.display = 'block';
startbtn.innerhtml = 'ゲームオーバー、リプレイ？';
戻る;
}
game.move（keychar）;
}
}