2048游戏网页版，js源代码

2048网页版的js源代码，原生js编写：

var game={
data:[],
score:0,
state:1,
RUNNING:1,
GAME_OVER:0,
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();
  this.updateView();
},
isFull:function(){//判断是否已满
//遍历data数组
for(var row=0;row<this.data.length;row++){//二维数组遍历用外层循环控制行，内层循环控制列的写法
for(var col=0;col<this.data[row].length;col++){
if(this.data[row][col]==0){
return false;
}
}
}//如果退出循环，就返回true
return true;
},
randomNum:function(){//在随机位置生成2或4
if(this.isFull()){//如果满，就不再生成
return;
}
//循环条件:true
//随机在0-3行中生成一个行下标row
//随机在0-3列中生成一个列下标col
//如果该位置==0
//   随机选择2或4，
//如果Math.random()<0.5,选2，否则选4-->Math.random()函数会在0-1之间生成一个随机数，而此题有两数，几率在0.5之间
//放入该位置
//   退出循环
while(true){
var row=Math.floor(Math.random()*4);
var col=Math.floor(Math.random()*4);
if(this.data[row][col]==0){
this.data[row][col]=Math.random()<0.5?2:4;
break;
}

}
},
canLeft:function(){
//遍历每个元素(最左侧除外)
//只要发现任意元素左侧数==0或当前值==左侧值
// return true
//如果循环正常结束，返回false
for(var row=0;row<4;row++){
for(var col=1;col<4;col++){
 if(this.data[row][col]!=0){
if(this.data[row][col-1]==0||this.data[row][col]==this.data[row][col-1]){
return true;
}
 }
}

}
return false;
},
/*实现左移*/
moveLeft:function(){
//左移4行
//先判断能否左移
if(this.canLeft()){
for(var row=0;row<4;row++){
this.moveLeftInRow(row);
}
animation.start();
setTimeout(function(){
game.randomNum();
   game.updateView();
},animation.times*animation.interval);
}
},
moveLeftInRow:function(row){//左移1行
//从0位置开始到2结束遍历row行中的每个元素
//获得下一个不为0的元素的nextCol下标
//如果nextCol==-1
//break;
//否则，判断合并
//如果自己==0，用下一个元素的值替换自己
//将下一个元素的值设为0
//让col留在原地：col--
//如果自己==下一个元素，将自己*2，将下一个元素设置为0
for(var col=0;col<=2;col++){//最右不必检查
var nextCol=this.getNextRight(row,col);
if(nextCol==-1){
break;
}
else{
if(this.data[row][col]==0){
this.data[row][col]=this.data[row][nextCol];
this.data[row][nextCol]=0;
animation.addTask(""+row+nextCol,""+row+col);
col--;
}else if(this.data[row][col]==this.data[row][nextCol]){
this.data[row][col]*=2;
this.score+=this.data[row][col];
this.data[row][nextCol]=0;
animation.addTask(""+row+nextCol,""+row+col);
}
}
}
},
//获得*当前行中，指定位置*右侧第一个不为0的数
//返回下一个不为0的数的位置
getNextRight:function(row,col){
//遍历row行中col位置右侧每个元素
//只要返现！=0的
//就返回其位置下标
//退出循环，返回-1
for(var i=col+1;i<4;i++){
if(this.data[row][i]!=0){
return i;
}
}
return -1;
  
},
canRight:function(){//判断能否右移，最右列不用判断
for(var row=0;row<4;row++){
for(var col=0;col<3;col++){
if(this.data[row][col]!=0){
if(this.data[row][col+1]==0||this.data[row][col]==this.data[row][col+1]){
return true;
}
}
}

}
return false;
},
/*实现右移*/
moveRight:function(){
if(this.canRight()){
for(var row=0;row<4;row++){
this.moveRightInRow(row);
}
animation.start();
setTimeout(function(){
game.randomNum();
   game.updateView();
},animation.times*animation.interval);
}
},
moveRightInRow:function(row){
for(var col=3;col>=1;col--){
var nextCol=this.getNextLeft(row,col);
if(nextCol==-1){
break;
}else{
if(this.data[row][col]==0){
this.data[row][col]=this.data[row][nextCol];
this.data[row][nextCol]=0;
animation.addTask(""+row+nextCol,""+row+col);
col++;
}
else if(this.data[row][col]==this.data[row][nextCol]){
this.data[row][col]*=2;
this.score+=this.data[row][col];
this.data[row][nextCol]=0;
animation.addTask(""+row+nextCol,""+row+col);
}
}
}
},
getNextLeft:function(row,col){
for(var i=col-1;i>=0;i--){
if(this.data[row][i]!=0){
return i;
}
}
return -1;
},
/******实现上移*******/
canUp:function(){
for(var row=1;row<4;row++){
for(var col=0;col<4;col++){
if(this.data[row][col]!=0){
if(this.data[row-1][col]==0||this.data[row][col]==this.data[row-1][col])
return true;
}
}
}
return false;
},
moveUp:function(){
if(this.canUp()){
//上移4列
for(var col=0;col<4;col++){
this.moveUpInCol(col);
}
animation.start();
setTimeout(function(){
game.randomNum();
   game.updateView();
},animation.times*animation.interval);
}
},
moveUpInCol:function(col){//上移一列
for(var row=0;row<3;row++){
var nextRow=this.getNextDown(row,col);
if(nextRow==-1){
break;
}else{
if(this.data[row][col]==0){
this.data[row][col]=this.data[nextRow][col];
this.data[nextRow][col]=0;
animation.addTask(""+nextRow+col,""+row+col);
row--;
}
else if(this.data[row][col]==this.data[nextRow][col]){
this.data[row][col]*=2;
this.score+=this.data[row][col];
this.data[nextRow][col]=0;
animation.addTask(""+nextRow+col,""+row+col);
}
}
}
},
getNextDown:function(row,col){
//遍历col列中row位置上侧每个元素
//只要返现！=0
//返回其位置下标
//退出循环，返回-1
for(var i=row+1;i<4;i++){
if(this.data[i][col]!=0){
return i;
}
}
return -1;
},
/*实现下移*/
canDown:function(){
for(var row=0;row<3;row++){
for(var col=0;col<4;col++){
if(this.data[row][col]!=0){
if(this.data[row+1][col]==0||this.data[row][col]==this.data[row+1][col])
return true;
}
}
}
return false;
},
moveDown:function(){
if(this.canDown()){
for(var col=0;col<4;col++){
this.moveDownInCol(col);
}
animation.start();
   setTimeout(function(){
game.randomNum();
   game.updateView();
},animation.times*animation.interval);
}
},
moveDownInCol:function(col){
for(var row=3;row>=1;row--){
var nextRow=this.getNextUp(row,col);
if(nextRow==-1){
break;
}else{
if(this.data[row][col]==0){
this.data[row][col]=this.data[nextRow][col];
this.data[nextRow][col]=0;
animation.addTask(""+nextRow+col,""+row+col);
row++;
}
else if(this.data[row][col]==this.data[nextRow][col]){
this.data[row][col]*=2;
this.score+=this.data[row][col];
this.data[nextRow][col]=0;
animation.addTask(""+nextRow+col,""+row+col);
}
}
}
},
getNextUp:function(row,col){
for(var i=row-1;i>=0;i--){
if(this.data[i][col]!=0){
return i;
}
}
return -1;
},
//将游戏数据整体更新到页面上
updateView:function(){
//step1:遍历二维数组中每个元素
//step2：找到和当前元素对应的div
//拼div的id：c+row+col
//var div=document.getElementById(id)
//step3：将当前元素的值放入div中，用div.innerHTML=?
//  如果当前值==0，放入""
//      否则放入当前值
//step4:根据当前元素值修改div样式类  div.className="类名"
//如果当前值==0，className="cell"
//否则className="cell n"+当前值
for(var row=0;row<this.data.length;row++){
for(var col=0;col<this.data[row].length;col++){
var div=document.getElementById("c"+row+col);
div.innerHTML=this.data[row][col]==0?"":this.data[row][col];
   div.className=this.data[row][col]==0?"cell":"cell n"+this.data[row][col];
}
}
//将分数放入span
var span=document.getElementById("score");
span.innerHTML=this.score;
//判断游戏结束
//如果游戏结束，this.state=this.GAME_OVER
//显示游戏结束div
if(this.isGameOver()){
this.state=this.GAME_OVER;
var div=document.getElementById("gameOver");
var finalScore=document.getElementById("finalScore");
finalScore.innerHTML=this.score;
div.style.display="block";
}
},
isGameOver:function(){//判断游戏是否结束
//能继续时返回false，否则返回true
/*已经满了*/
for(var row=0;row<4;row++){
for(var col=0;col<4;col++){
if(this.data[row][col]==0){
return false;
}
if(col<3){/*检查右侧相邻*/
if(this.data[row][col]==this.data[row][col+1])
{
return false;
}
}
if(row<3){/*检查下方相邻*/
if(this.data[row][col]==this.data[row+1][col])
{
return false;
}
}
}
}
return true;
}

};

//当窗口加载后，调用game对象的start方法
window.οnlοad=function(){//事件处理函数
  game.start();
  ///console.log(game.getNextRight(0,0));//1
  //console.log(game.getNextRight(0,1));//3
  //game.moveLeftInRow(0);
  //console.log(game.data[0]);
  //0,4,4,2-->8,2,0,0
  document.οnkeydοwn=function(){
  if(game.state==game.RUNNING){
//step1：先获得事件对象
//所有事件发生时，都自动创建一个event对象
//event对象中封装了事件信息：
//比如：鼠标坐标，触发事件的元素，按键的编号
var event=window.event||arguments[0];
          //IE           其他
   //||经常用于解决浏览器兼容性问题
//step2:获得事件对象中的按键编号
//如果是37号，就调用moveLeft
if(event.keyCode==37){
game.moveLeft();
}
else if(event.keyCode==38){
game.moveUp();
}
else if(event.keyCode==39){
game.moveRight();
}
else if(event.keyCode==40){
game.moveDown();
}
   }
else if(event.keyCode==13){
game.start();
}
  }
}