ネイティブ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);
}
}