html实现2048小游戏,2048.html

2048

#gridPanel{

width:480px;

height:480px;

margin:0 auto;

background-color:#bbada0;

border-radius:10px;

position:relative;

}

.grid,.cell{

width:100px;

height:100px;

border-radius:6px;

}

.grid{

float:left;

margin:16px 0 0 16px;

background-color:#ccc0b3;

}

.cell{

text-align:center;

line-height:100px;

color:#776e65;

font-size:60px;

position:absolute;

}

/*每一行拥有同样的top

每一列拥有同样的left*/

#c00,#c01,#c02,#c03{top:16px;}

#c00,#c10,#c20,#c30{left:16px;}

#c10,#c11,#c12,#c13{top:132px;}

#c01,#c11,#c21,#c31{left:132px;}

#c20,#c21,#c22,#c23{top:248px;}

#c02,#c12,#c22,#c32{left:248px;}

#c30,#c31,#c32,#c33{top:364px;}

#c03,#c13,#c23,#c33{left:364px;}

.n2{background-color:#eee3da;}

.n4{background-color:#ede0c8;}

.n8{background-color:#f2b179;}

.n16{background-color:#f59563;}

.n32{background-color:#f67c5f;}

.n64{background-color:#f65e3b;}

.n128{background-color:#edcf72;}

.n256{background-color:#edcc61;}

.n512{background-color:#9c0;}

.n1024{background-color:#33b5e5;}

.n2048{background-color:#09c;}

.n4096{background-color:#a6c;}

.n8192{background-color:#93c;}

.n8,.n16,.n32,.n64,.n128,.n256,.n512,.n1024,.n2048,.n4096,.n8192{color:#fff;}

.n1024,.n2048,.n4096,.n8192{font-size:40px;}

/*显示分数的p元素*/

p{width:480px;margin:0 auto;font-family:Arial;font-weight:bold;font-size:40px;padding-top:15px;}

/*game over界面样式*/

#gameOver{width:100%;height:100%;;position:absolute;top:0px;left:0px;display:none;}

#gameOver div{width:100%;height:100%;background-color:#555;opacity:0.5;}

#gameOver p{position:absolute;border-radius:10px;top:200px;left:40%;width:300px;height:200px;border:1px solid #edcf72;line-height:1.6em;text-align:center;background-color:#fff;}

.button{padding:10px;background-color:#9f8d77;border-radius:6px;color:#fff;cursor:pointer;}

Score:

2

4

8

16

32

64

128

256

512

1024

2048

4096

8192

Game Over!

Score:

爱心 Try again!

var game={

data:[],//单元格中的所有数字

score:0,

state:1,

RUNNING:1,

GAME_OVER:0,

PLAYING:2,//动画正在播放中

start:function(){//启动游戏时调用

this.data=[ [0,0,0,0],

[0,0,0,0],

[0,0,0,0],

[0,0,0,0] ];

//在两个随机位置生成2或4

this.score=0;

this.state=this.RUNNING;

var div=document.getElementById("gameOver");

div.style.display="none";

this.randomNum();

this.randomNum();

//document.write(this.data.join("
"));

this.updateView();

},

isFull:function(){//判断是否已满

/*遍历data数组