目前没有注释，后期会补上注释。
css样式
*{
margin: 0;
padding: 0;
font-family: Arial;
}
.socre{
width: 100%;
height: 150px;
margin-top: 50px;
}
.socre p{
text-align: center;
line-height: 150px;
font-size: 50px;
font-weight: bold;
}
.socre p span{
color: #f00;
}
.bigbox{
width: 480px;
height: 480px;
margin: 0 auto;
background-color: #bbada0;
border-radius: 0.6em;
}
.cell{
width: 100px;
height: 100px;
background-color: #ccc0b3;
color: #fff;
border-radius: 0.2em;
float: left;
margin: 16px 0 0 16px;
text-align: center;
line-height: 100px;
font-size: 50px;
font-weight: bold;
}
.n2{background-color:#eee3da;color:#776e65}
.n4{background-color:#ede0c8;color:#776e65}
.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;font-size:40px}
.n2048{background-color:#09c;font-size:40px}
.n4096{background-color:#a6c;font-size:40px}
.n8192{background-color:#93c;font-size:40px}
.gameover{
background-color: rgba(100,100,100,0.3);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
}
.gameover div{
width: 300px;
height: 200px;
background-color: #EDCF72;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;
border-radius:0.3em;
}
.gameover div p{
text-align: center;
line-height: 66px;
font-size: 30px;
font-weight: bold;
}
.gameover div p span{
color: #f00;
}
.gameover div p a{
text-decoration: none;
background-color: #9f8d77;
padding: 10px;
border-radius:0.3em ;
}
js代码
var game = {
data : [],
score : 0,
gamerunning : 1,
gameover : 0,
status : 1,
start : function(){
game.data = [];
// game.data = [
// [0,0,0,0]
// [0,0,0,0]
// [0,0,0,0]
// [0,0,0,0]
// ]
game.score = 0;
game.status = game.gamerunning;
for(var r = 0;r < 4;r++){
game.data[r] = [];
for(var c = 0;c < 4;c++){
game.data[r][c] = 0;
}
}
game.randomNum();
game.randomNum();
game.dataView()
},
randomNum : function(){
for(;;){
var r = Math.floor(Math.random()*4);
var c = Math.floor(Math.random()*4);
if(game.data[r][c] == 0){
var num = Math.random() > 0.2?2:4;
game.data[r][c] = num;
break;
}
}
},
dataView : function(){
for(r = 0;r < 4;r++){
for(var c = 0;c < 4;c++){
var div = document.getElementById("c" + r + c);
if(game.data[r][c] != 0){
div.innerHTML = game.data[r][c];
div.className = "cell n" + game.data[r][c];
}else{
div.innerHTML = "";
div.className = "cell";
}
}
}
document.getElementById("score01").innerHTML = game.score;
if(game.status == game.gameover){
document.getElementById("score02").innerHTML = game.score;
document.getElementById("gameover").style.display = "block"
}else{
document.getElementById("gameover").style.display = "none"
}
},
isgameover : function(){
for(var r = 0;r < 4;r++){
for(var c = 0;c < 4;c++){
if(game.data[r][c] == 0){
return false;
}
if(c < 3){
if(game.data[r][c] == game.data[r][c+1]){
return false;
}
}
if(r < 3){
if(game.data[r][c] == game.data[r+1][c]){
return false
}
}
}
}
return true;
},
moveLeft : function(){
var before = game.data.toString();
for(var r = 0;r < 4;r++){
game.moveLeftInRow(r);
}
var after = game.data.toString();
if(before != after){
game.randomNum();
if(game.isgameover()){
game.status = game.gameover
}
game.dataView();
}
},
moveLeftInRow : function(r){
for(var c = 0;c < 3;c++){
var nextc = game.getNextInRow(r,c);
if (nextc != -1) {
if(game.data[r][c] == 0){
game.data[r][c] = game.data[r][nextc];
game.data[r][nextc] = 0;
c--;
}else if(game.data[r][c] == game.data[r][nextc]){
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[r][nextc] = 0;
}
}else{
break;
}
}
},
getNextInRow : function(r,c){
for(var i = c+1;i < 4;i++){
if(game.data[r][i] != 0){
return i;
}
}
return -1;
},
moveRight : function(){
var before = game.data.toString();
for(var r = 3;r >= 0;r--){
game.moveRightInRow(r);
}
var after = game.data.toString();
if (before != after) {
game.randomNum();
if (game.isgameover()) {
game.status = game.gameover;
}
game.dataView();
}
},
moveRightInRow : function(r){
for(var c = 3;c > 0;c--){
var lastc = game.getLastInRow(r,c);
if(lastc != -1){
if(game.data[r][c] == 0){
game.data[r][c] = game.data[r][lastc];
game.data[r][lastc] =0;
c++;
}else if(game.data[r][c] == game.data[r][lastc]){
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[r][lastc] = 0;
}
}else{
break;
}
}
},
getLastInRow : function(r,c){
for(var a = c-1;a >= 0;a--){
if (game.data[r][a] != 0) {
return a;
}
}
return -1
},
moveTop : function(){
var before = game.data.toString();
for(var c = 0;c < 4;c++){
game.moveTopInCol(c);
}
var after = game.data.toString();
if(before != after){
game.randomNum();
if(game.isgameover()){
game.status = game.gameover;
}
game.dataView();
}
},
moveTopInCol : function(c){
for(var r = 0;r < 3;r++){
var nextr = game.getNextInCol(r,c);
if(nextr != -1){
if(game.data[r][c] == 0){
game.data[r][c] = game.data[nextr][c];
game.data[nextr][c] = 0;
r--;
}else if(game.data[r][c] == game.data[nextr][c]){
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[nextr][c] = 0;
}
}else{
break;
}
}
},
getNextInCol : function(r,c){
for(var b = r+1;b < 4;b++){
if(game.data[b][c] !=0){
return b;
}
}
return -1;
},
moveDown : function(){
var before = game.data.toString();
for(var c = 3;c >= 0;c--){
game.moveDownInCol(c);
}
var after = game.data.toString();
if(before != after){
game.randomNum();
if(game.isgameover()){
game.status = game.gameover;
}
game.dataView();
}
},
moveDownInCol : function(c){
for(var r = 3;r > 0;r--){
var lastr = game.getLastInCol(r,c);
if(lastr != -1){
if(game.data[r][c] == 0){
game.data[r][c] = game.data[lastr][c];
game.data[lastr][c] = 0;
r++;
}else if(game.data[r][c] == game.data[lastr][c]){
game.data[r][c] *= 2;
game.score += game.data[r][c];
game.data[lastr][c] = 0;
}
}else{
break;
}
}
},
getLastInCol : function(r,c){
for(var d = r-1;d >= 0;d--){
if(game.data[d][c] != 0){
return d;
}
}
return -1;
}
}
game.start()
document.onkeydown = function(event){
var event = event || window.event;
if (event.keyCode == 37) {
game.moveLeft()
}
if (event.keyCode == 39) {
game.moveRight()
}
if (event.keyCode == 38) {
game.moveTop()
}
if (event.keyCode == 40) {
game.moveDown()
}
}
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2048</title>
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="stylesheet" type="text/css" href="css/2048.css"/>
</head>
<body>
<div class="socre">
<p class="socre01">
SOCRE: <span id="score01"> 0</span>
</p>
</div>
<div class="bigbox">
<!--第一行-->
<div class="cell" id="c00"></div>
<div class="cell" id="c01"></div>
<div class="cell" id="c02"></div>
<div class="cell" id="c03"></div>
<!--第二行-->
<div class="cell" id="c10"></div>
<div class="cell" id="c11"></div>
<div class="cell" id="c12"></div>
<div class="cell" id="c13"></div>
<!--第三行-->
<div class="cell" id="c20"></div>
<div class="cell" id="c21"></div>
<div class="cell" id="c22"></div>
<div class="cell" id="c23"></div>
<!--第四行-->
<div class="cell" id="c30"></div>
<div class="cell" id="c31"></div>
<div class="cell" id="c32"></div>
<div class="cell" id="c33"></div>
</div>
<div class="gameover" id="gameover">
<div>
<p>GAME OVER!</p>
<p>SOCRE: <span id="score02">0</span></p>
<p><a href="">TRY ANAIN!</a></p>
</div>
</div>
<script type="text/javascript" src="js/2048.js"></script>
</body>
</html>