移动端 - 用JS实现2048小游戏

维基百科摘要：
　　《2048》是一款单人在线和移动端游戏，由19岁的意大利人Gabriele Cirulli于2014年3月开发。游戏任务是在一个网格上滑动小方块来进行组合，直到形成一个带有有数字2048的方块。
　　《2048》一款益智小游戏，游戏的规则十分简单，是时下一款简单易上手的数字小游戏，但又十分虐心。

一、游戏规则

（1）控制所有方块向同一个方向运动；
（2）两个相同数字方块撞在一起之后合并成为他们的和；
（2）每次操作之后会随机生成一个2或者4，最终得到一个“2048”的方块就算胜利了。

二、游戏设计思路

（1）2048设计的过程思想上是面向对象的编程；
（2）设计对象中的属性与方法实现各种功能和数据显示；
（3）操作界面为一个4x4的

三、下面是游戏的UI界面：

游戏入口：2048 Game

游戏开始

游戏进行中

游戏结束

四、源码

/* 主体对象 */
var game = {
	data : [],		 // 数据存储
	score : 0,		 // 实时分数
	gameover : 0,	 // 游戏结束状态
	gamerunning : 1, // 游戏进行状态
	status : 1,		 // 游戏实时状态
	/* 游戏入口 (初始化二维数组) */
	start : function(){
		this.status = this.gamerunning;
		this.score = 0;
		this.data = [];
		for(var i = 0; i < 4; i++){
			this.data[i] = [];
			for(var j = 0; j < 4; j++){
				this.data[i][j] = 0;
			}
		}
		this.randomnumber();
		this.randomnumber();
		this.dataview();
		console.log(this.data);
	},
	/* 赋初始随机数（2/4） */
	randomnumber : function(){
		for(;;){
			var i = Math.floor(Math.random()*4);
			var j = Math.floor(Math.random()*4);
			if(this.data[i][j] == 0){
				var num = Math.random() > 0.5 ? 2 : 4;
				this.data[i][j] = num;
				break;
			}
		}	
	},
	/* 页面显示 */
	dataview : function(){
		for(var i = 0; i < 4; i++){
			for(var j = 0; j < 4; j++){
				var txt = document.getElementById("o" + i + j);
				if(this.data[i][j] == 0){
					txt.innerHTML = "";
					txt.className = "cell";
				} else {
					txt.innerHTML = this.data[i][j];
					txt.className = "cell n" + this.data[i][j];
				}
			}
		}
			document.getElementById("score1").innerHTML = this.score;
		if(this.status == this.gameover){
			document.getElementById("score2").innerHTML = this.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(this.data[r][c] == 0){
					return false;
				}
				if(c < 3){
					if(this.data[r][c] == this.data[r][c+1]){
						return false;
					}
				}
				if(r < 3){
					if(this.data[r][c] == this.data[r + 1][c]){
						return false;
					}
				}
			}
		}
		return true;
	},
	/********** 上移方法 **********/
	movetop : function(){
		var before = String(this.data);
		for(var i = 0; i < 4; i++){
			this.movetopIside(i);
		}
		var after = String(this.data);
		console.log(after);
		if(before != after){
			this.randomnumber();
			if(this.isgameover()){
				this.status = this.gameover;
			}
			this.dataview();
		}
	},
	movetopIside : function(i){
		for(var j = 0; j < 3; j++){
			var location = this.gettopLocation(j, i);
			if(location != -1){
				if(this.data[j][i] == 0){
					this.data[j][i] = this.data[location][i];
					this.data[location][i] = 0;
					j--;
				} else if(this.data[j][i] == this.data[location][i]){
					this.data[j][i] *= 2;
					this.data[location][i] = 0;
					this.score += this.data[j][i];
				}
			} else {
				return;
			}
		}
	},
	// 寻找待上移值
	gettopLocation : function(j, i){
		for(var k = j + 1; k < 4; k++){
			if(this.data[k][i] != 0){
				return k;
			}
		}
		return -1;
	},
	/********** 下移方法 **********/
	movebottom : function(){
		var before = String(this.data);
		for(var i = 0; i < 4; i++){
			this.movebottomIside(i);
		}
		var after = String(this.data);
		console.log(after);
		if(before != after){
			this.randomnumber();
			if(this.isgameover()){
				this.status = this.gameover;
			}
			this.dataview();
		}
	},
	movebottomIside : function(i){
		for(var j = 3; j > 0; j--){
			var location = this.getbottomLocation(j, i);
			if(location != -1){
				if(this.data[j][i] == 0){
					this.data[j][i] = this.data[location][i];
					this.data[location][i] = 0;
					j++;
				} else if(this.data[j][i] == this.data[location][i]){
					this.data[j][i] *= 2;
					this.data[location][i] = 0;
					this.score += this.data[j][i];
				}
			} else {
				return;
			}
		}
	},
	// 寻找待下移动值
	getbottomLocation : function(j, i){
		for(var k = j-1; k >= 0 ; k--){
			if(this.data[k][i] != 0){
				return k;
			}
		}
		return -1;
	},
	/********** 左移方法 **********/
	moveleft : function(){
		var before = String(this.data);
		for(var i = 0; i < 4; i++){
			this.moveleftIside(i);
		}
		var after = String(this.data);
		console.log(after);
		if(before != after){
			this.randomnumber();
			if(this.isgameover()){
				this.status = this.gameover;
			}
			this.dataview();
		}
	},
	moveleftIside : function(i){
		for(var j = 0; j < 3; j++){
			var location = this.getleftLocation(i, j);
			if(location != -1){
				if(this.data[i][j] == 0){
					this.data[i][j] = this.data[i][location];
					this.data[i][location] = 0;
					j--;
				} else if(this.data[i][j] == this.data[i][location]){
					this.data[i][j] *= 2;
					this.data[i][location] = 0;
					this.score += this.data[i][j];
				}
			} else {
				return;
			}
		}
	},
	// 寻找待左移动值
	getleftLocation : function(i, j){
		for(var k = j + 1; k < 4; k++){
			if(this.data[i][k] != 0){
				return k;
			}
		}
		return -1;
	},
	/********** 右移方法 **********/
	moveright : function(){
		var before = String(this.data);
		for(var i = 0; i < 4; i++){
			this.moverightIside(i);
		}
		var after = String(this.data);
		console.log(after);
		if(before != after){
			this.randomnumber();
			if(this.isgameover()){
				this.status = this.gameover;
			}
			this.dataview();
		}
	},
	moverightIside : function(i){
		for(var j = 3; j > 0; j--){
			var location = this.getrightLocation(i, j);
			if(location != -1){
				if(this.data[i][j] == 0){
					this.data[i][j] = this.data[i][location];
					this.data[i][location] = 0;
					j++;
				} else if(this.data[i][j] == this.data[i][location]){
					this.data[i][j] *= 2;
					this.data[i][location] = 0;
					this.score += this.data[i][j];
				}
			} else {
				break;
			}
		}
	},
	// 寻找待右移动值
	getrightLocation : function(i, j){
		for(var k = j-1; k >= 0 ; k--){
			if(this.data[i][k] != 0){
				return k;
			}
		}
		return -1;
	},
}
game.start();
document.onkeydown = function(event){
	var event = event || e || arguments[0];
	switch(event.keyCode){
		case 37:
			game.moveleft();	// 左
				break;
		case 38:
			game.movetop();		// 上
				break;
		case 39:
			game.moveright();	// 右
				break;
		case 40:
			game.movebottom();	//下
				break;
	}	
		
}