HTML部分
<div class="shell">
<div class="score">SCORE:<span id="score1">0</span></div>
<div class="wrapper" id="wrapper">
<div class="cell" id="n00"></div>
<div class="cell" id="n01"></div>
<div class="cell" id="n02"></div>
<div class="cell" id="n03"></div>
<div class="cell" id="n10"></div>
<div class="cell" id="n11"></div>
<div class="cell" id="n12"></div>
<div class="cell" id="n13"></div>
<div class="cell" id="n20"></div>
<div class="cell" id="n21"></div>
<div class="cell" id="n22"></div>
<div class="cell" id="n23"></div>
<div class="cell" id="n30"></div>
<div class="cell" id="n31"></div>
<div class="cell" id="n32"></div>
<div class="cell" id="n33"></div>
</div>
</div>
<div class="game_over">
<div>
<span>GAME</span>
<span>OVER</span>
<br>
<span class='sc_span'>SCORE:</span>
<span id="score2">0</span>
<br>
<a href="javascript:game.start()">try again!</a>
</div>
</div>
CSS部分
body{
margin: 0;
padding: 0;
}
div,a{
text-decoration: none;
box-sizing: border-box;
border-radius: 10px;
}
.shell{
width: 500px;
margin:100px auto;
}
.wrapper{
width: 435px;
height: 435px;
margin: auto;
background-color: #bbada0;
}
.wrapper>div{
width: 90px;
height: 90px;
float: left;
margin-left: 15px;
margin-top: 15px;
border-radius: 5px;
background-color: #ccc0b3;
color: white;
font-weight: bold;
line-height: 90px;
text-align: center;
font-size: 40px;
}
.score,#score1{
font-size: 50px;
font-weight: bold;
font-family: 'Arial';
margin-left: 30px;
}
#score1{
color: red;
}
.game_over{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(33,33,33,0.3);
display: none;
}
.game_over>div{
width: 365px;
height: 150px;
font-size: 30px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -182px;
text-align: center;
background-color: white;
border: 1px solid black;
}
.game_over a{
display: inline-block;
width: 150px;
height: 45px;
background-color: #bbada0;
text-align: center;
line-height: 39px;
color: white;
font-weight: bold;
font-size: 27px;
margin-top: 10px;
border-radius: 5px;
}
.wrapper>.n2{
background-color:#eee3da;
color:#776e65;
}
.wrapper>.n4{
background-color:#ede0c8;
color:#776e65
}
.wrapper>.n8{background-color:#f2b179}
.wrapper>.n16{background-color:#f59563}
.wrapper>.n32{background-color:#f67c5f}
.wrapper>.n64{background-color:#f65e3b}
.wrapper>.n128{background-color:#edcf72}
.wrapper>.n256{background-color:#edcc61}
.wrapper>.n512{background-color:#9c0}
.wrapper>.n1024{background-color:#33b5e5;font-size:30px}
.wrapper>.n2048{background-color:#09c;font-size:30px}
.wrapper>.n4096{background-color:#a6c;font-size:30px}
.wrapper>.n8192{background-color:#93c;font-size:30px}
JS代码部分
var game = {
data : [],
score : 0,
gameover : 0,
gamerunning : 1,
status : 1,
start : function(){
this.status = this.gamerunning;
this.data = [];
this.score = 0;
for(var r=0;r<4;r++){
this.data[r] = [];
for(var c=0;c<4;c++){
this.data[r][c] = 0;
}
}
this.randNum();
this.randNum();
this.displyNum();
},
randNum : function(){
while(true){
var r = Math.floor(Math.random() * 4);
var c = Math.floor(Math.random() * 4);
if(this.data[r][c] == 0){
var num = Math.random() > 0.2 ? 2 : 4;
this.data[r][c] = num;
break;
}
}
},
displyNum : function(){
for(var r = 0;r<4;r++){
for(var c=0;c<4;c++){
var div = document.getElementById('n' + r + c);
if(this.data[r][c] == 0){
div.innerHTML = '';
div.className = 'cell';
}else{
div.innerHTML = this.data[r][c];
div.className = 'cell n' + this.data[r][c];
}
}
}
document.getElementById('score1').innerHTML = this.score;
if(this.status == this.gameover){
document.getElementById('score2').innerHTML = this.score;
document.getElementsByClassName('game_over')[0].style.display = 'block';
}else{
document.getElementsByClassName('game_over')[0].style.display = 'none';
}
},
isend : function(){
for(var r=0;r<4;r++){
for(var c=0;c<4;c++){
if(this.data[r][c] == 0){
return false;
}
if(r<3){
if(this.data[r][c] == this.data[r+1][c]){
return false;
}
}
if(c<3){
if(this.data[r][c] == this.data[r][c+1]){
return false;
}
}
}
}
return true;
},
moveLeft : function(){
var before = String(this.data);
for(var r=0;r<4;r++){
this.getLeftIn(r)
}
var after = String(this.data)
if(before != after){
this.randNum();
if(this.isend()){
this.status = this.gameover;
}
this.displyNum();
}
},
getLeftIn : function(r){
for(var c=0;c<3;c++){
var nextc = this.getLeftnextIn(r,c);
if(nextc != -1){
if(this.data[r][c] == 0){
this.data[r][c] = this.data[r][nextc];
this.data[r][nextc] = 0;
c--;
}else if(this.data[r][c] == this.data[r][nextc]){
this.data[r][c] *= 2;
this.data[r][nextc] = 0;
this.score += this.data[r][c];
}
}else{
break;
}
}
},
getLeftnextIn : function(r,c){
for(var i=c+1;i<4;i++){
if(this.data[r][i] != 0){
return i;
}
}
return -1;
},
moveRight : function(){
var before = String(this.data);
for(var r=0;r<4;r++){
this.getRightIn(r);
}
var after = String(this.data);
if(before != after){
this.randNum();
if(this.isend()){
this.status = this.gameover;
}
this.displyNum();
}
},
getRightIn : function(r){
for(var c=3;c>=0;c--){
var lastc = this.getRightlastIn(r,c);
if(lastc != -1){
if(this.data[r][c] == 0){
this.data[r][c] = this.data[r][lastc];
this.data[r][lastc] = 0;
c++;
}else if(this.data[r][c] == this.data[r][lastc]){
this.data[r][c] *= 2;
this.data[r][lastc] = 0;
this.score += this.data[r][c];
}
}else{
break;
}
}
},
getRightlastIn : function(r,c){
for(var i=c-1;i>=0;i--){
if(this.data[r][i] != 0){
return i;
}
}
return -1;
},
moveUp : function(){
var before = String(this.data);
for(var c=0;c<4;c++){
this.getUpIn(c)
}
var after = String(this.data)
if(before != after){
this.randNum();
if(this.isend()){
this.status = this.gameover;
}
this.displyNum();
}
},
getUpIn : function(c){
for(var r=0;r<3;r++){
var nextr = this.getUpnextIn(r,c);
if(nextr != -1){
if(this.data[r][c] == 0){
this.data[r][c] = this.data[nextr][c];
this.data[nextr][c] = 0;
r--;
}else if(this.data[r][c] == this.data[nextr][c]){
this.data[r][c] *= 2;
this.data[nextr][c] = 0;
this.score += this.data[r][c];
}
}else{
break;
}
}
},
getUpnextIn : function(r,c){
for(var i=r+1;i<4;i++){
if(this.data[i][c] != 0){
return i;
}
}
return -1;
},
moveDown : function(){
var before = String(this.data);
for(var c=0;c<4;c++){
this.getDownIn(c);
}
var after = String(this.data);
if(before != after){
this.randNum();
if(this.isend()){
this.status = this.gameover;
}
this.displyNum();
}
},
getDownIn : function(c){
for(var r=3;r>=0;r--){
var lastr = this.getDownlastIn(r,c);
if(lastr != -1){
if(this.data[r][c] == 0){
this.data[r][c] = this.data[lastr][c];
this.data[lastr][c] = 0;
r++;
}else if(this.data[r][c] == this.data[lastr][c]){
this.data[r][c] *= 2;
this.data[lastr][c] = 0;
this.score += this.data[r][c];
}
}else{
break;
}
}
},
getDownlastIn : function(r,c){
for(var i=r-1;i>=0;i--){
if(this.data[i][c] != 0){
return i;
}
}
return -1;
}
}
game.start()
document.onkeydown = function(event){
var event = event || e || arguments[0];
if(event.keyCode == 37){
game.moveLeft();
}else if(event.keyCode == 39){
game.moveRight();
}else if(event.keyCode == 38){
game.moveUp();
}else if(event.keyCode == 40){
game.moveDown();
}
}