最近心血来潮，项目结束了，使用javascript写个小游戏，练练收吧，写的不好还请各位大侠给出批评建议。
HTML代码如下
Score:
Game Over!
Score:
Try again!
CSS代码如下
@charset "utf-8";
#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{background-color:#ccc0b3;
margin:16px 0 0 16px;
float:left;
}
.cell{
position:absolute;
text-align:center;
line-height:100px;
font-size:60px;
}
#c00,#c01,#c02,#c03{top:16px;}
#c10,#c11,#c12,#c13{top:132px;}
#c20,#c21,#c22,#c23{top:248px;}
#c30,#c31,#c32,#c33{top:364px;}
#c00,#c10,#c20,#c30{left:16px;}
#c01,#c11,#c21,#c31{left:132px;}
#c02,#c12,#c22,#c32{left:248px;}
#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{width:480px; margin:0 auto;
font-family:Arial;font-weight:bold;
font-size:40px; padding-top:15px;
}
#gameOver{width:100%; height:100%;
position:absolute; top:0; left:0;
display:none;
}
#gameOver>div{width:100%; height:100%;
background-color:#555; opacity:.5;
}
#gameOver>p{width:300px; height:200px;
border:1px solid #edcf72;
line-height:1.6em; text-align:center;
background-color:#fff; border-radius:10px;
position:absolute; top:50%; left:50%;
margin-top:-135px; margin-left:-150px;
}
.button{padding:10px; border-radius:6px;
background-color:#9f8b77; color:#fff;
cursor:pointer;
}
javascript代码如下
var game={
data:[],//保存所有数字的二维数组
rn:4, //总行数
cn:4, //总列数
state: 0, //游戏当前状态：Running|GameOver
RUNNING:1,
GAMEOVER:0,
score:0, //分数
isGameOver:function(){//判断游戏状态为结束
//如果没有满,则返回false
if(!this.isFull()){
return false;
}else{//否则
//从左上角第一个元素开始，遍历二维数组
for(var row=0;row=0.5
// 2 4
// 随机生成一个数<0.5?2:4，
// 放入data[row][col]
this.data[row][col]=
Math.random()<0.5?2:4;
break;//退出循环
}
}
}
},
updateView:function(){
//将二维数组中每个格的数字放入前景格中
//遍历二维数组中每个元素,比如:row=2,col=3, 16
for(var row=0;row指下一个元素的列下标
//从col+1开始,遍历row行中剩余元素，0结束
for(var col=this.cn-1;col>0;col--){
var nextc=this.getLeftNext(row,col);
if(nextc==-1){
break;
}else{
if(this.data[row][col]==0){
this.data[row][col]=
this.data[row][nextc];
this.data[row][nextc]=0;
col++;
}else if(this.data[row][col]==
this.data[row][nextc]){
this.data[row][col]*=2;
this.data[row][nextc]=0;
this.score+=this.data[row][col];
}
}
}
},
getLeftNext:function(row,col){
//nextc从col-1开始，遍历row行中剩余元素，>=0结束
for(var nextc=col-1;nextc>=0;nextc--){
// 遍历过程中，同getRightNext
if(this.data[row][nextc]!=0){
return nextc;
}
}return -1;
},
getDownNext:function(row,col){
//nextr从row+1开始，到0结束，row--
for(var row=this.rn-1;row>0;row--){
var nextr=this.getUpNext(row,col);
if(nextr==-1){
break;
}else{
if(this.data[row][col]==0){
this.data[row][col]=
this.data[nextr][col];
this.data[nextr][col]=0;
row++;
}else if(this.data[row][col]==
this.data[nextr][col]){
this.data[row][col]*=2;
this.data[nextr][col]=0;
this.score+=this.data[row][col];
}
}
}
},
getUpNext:function(row,col){
for(var nextr=row-1;nextr>=0;nextr--){
if(this.data[nextr][col]!=0){
return nextr;
}
}return -1;
}
}
//onload事件：当页面加载*后*自动执行
window.onload=function(){
game.start();//页面加载后，自动启动游戏
//当按键盘按键时，触发移动:
document.onkeydown=function(){
//获得事件对象中键盘号：2步
//事件对象：在事件发生时自动创建
// 封装了事件的信息
if(game.state==game.RUNNING){
//Step1: 获得事件对象
var e=window.event||arguments[0];
//IE DOM标准
//Step2: 获得键盘号:e.keyCode
if(e.keyCode==37){
game.moveLeft();
}else if(e.keyCode==39){
game.moveRight();
}else if(e.keyCode==38){
game.moveUp();
}else if(e.keyCode==40){
game.moveDown();
}
//如果按左键，调用moveLeft
//否则如果按右键，调用moveRight
}
}
}
以上代码就是使用javascript写的2048小游戏，代码简单易懂并附有注释，希望大家喜欢。
