【总结篇】js编写的2048小游戏开发（上：思路）

2048是大家都熟悉的一款魔性小游戏，其操作简单，却极其有效地杀时间。本篇将详细讲解如何构建这款小游戏的开发思路、如何根据玩法进一步分析设计编程结构，适合有一定html、css、js、jquery语言基础的读者阅读。

 

一.游戏试玩

      游戏玩法大家都很熟悉，每次可以选择上下左右中的一个方向滑动一次，所有数字方块都会向滑动的方向靠拢，每次滑动后空白的地方随机出现一个数字方块2或4，相邻的相同数字的方块在靠拢时会相加融合为一个方块。不断叠加以拼凑出标志性数字2048，并仍可以无休止地继续叠加下去，直至空间塞满方格无法移动游戏结束。

二.游戏剖析

2.1 界面

    界面主体部分就是由4×4的方格框与其中会动的数字方格构成，再加上游戏分数累计。空方格框的界面编写较为简单，float：left与宽高百分比结合即可实现。根据观察我们可发现数字方格具有以下重要属性：数值与其对应颜色、位置，在系统增加随机格子或操作移动格子时，界面所呈现的是某位置格子的出现或伴随某位置格子的消失，以及某数值格子的出现或消失。因而我们想到用一组名为坐标的class类定义位置属性，用一组名为数值的class类定义对应数值的对应背景颜色属性，通过jquery中addClass与removeClass方法操控格子属性变化，注意方格布局不能采用流式布局，position属性值应为absolute，对应方格框div容器的position属性值为relative。总结即：

/*position数组坐标位置*/
.pos00{left:0;top:0;}
 .pos01{left:0; top:25%; } 
 .pos02{left:0; top:50%; } 
 .pos03{left:0; top:75%; } 
 .pos10{left:25%; top:0; } 
 .pos11{left:25%; top:25%; } 
 .pos12{left:25%; top:50%; } 
 .pos13{left:25%; top:75%; } 
 .pos20{left:50%; top:0; } 
 .pos21{left:50%; top:25%; } 
 .pos22{left:50%; top:50%; } 
 .pos23{left:50%; top:75%; } 
 .pos30{left:75%; top:0; } 
 .pos31{left:75%; top:25%; } 
 .pos32{left:75%; top:50%; } 
 .pos33{left:75%; top:75%; }
/*级别格子样式*/
.n2{background: #ede6d9; color: #625b4e; } 
.n4{background: #eee1cc; color: #625b4e; } 
.n8{background: #eab678; color: #fff; } 
.n16{background: #e5925b; color: #fff; } 
.n32{background: #ef805e; color: #fff; } 
.n64{background: #e75b37; color: #fff; } 
.n128{background: #edcf70; color: #fff; } 
.n256{background: #ebcd64; color: #fff; } 
.n512{background: #ecc950; color: #fff; } 
.n1024{background: #edc63e; color: #fff; } 
.n2048{background: #f0c52f; color: #fff; } 
.n4096{background: #fab912; color: #fff; } 

位置组的class类名定义格式为pos+二维数组索引，数值组的class类名定义格式为n+方格上数字。

2.2 游戏操作

    1.初始状态下系统在4×4所有格子框中的两个随机位置生成数值为2的方格------创建形态对应的二维数组arr[ ][ ]存放动态的数值，随机索引的数值，将之通过jquery的append方法将class为pos+i+j的div注入html文档（i、j为索引），在界面显示出来；

    2.进行一轮操作：向上下左右中的一个方位滑动（手机版）或上下左右方向键（电脑版），方格向该方向移动或合并或移动+合并或碰壁状态无法移动------先用js监听事件判上、下、左、右操作，后判断并进行相应的移动或合并操作；

    3.每执行方向操作后若移动或合并操作有条件发生（即未碰壁）空白处随机位置新增格子------遍历数组筛选出数值为空的数组对象再进行随机并用1中方法画出格子；

    4.每新增格子后判断一次游戏是否结束------遍历数组检查是否无空值且是否无相邻方格数值相等，是则游戏结束，通知玩家并回到1，否则继续下一轮操作，返回2。

三.函数设计

    根据2.2可画出设计图，其中调用的方法的位置、频率、顺序通过图示将更为清晰。

设计函数

Game2048.prototype = {
	constructor:Game2048,
	//初始化
	init:function(){
        this.score = 0;
		this.arr = [];
		this.moveAble = false;
		$("#score").html("0");
		$(".number_cell").remove();
		this.creatArr();
	},
    //创建二维数组
	creatArr:function(){
		var i,j;
		for(i=0;i<4;i++){
			this.arr[i] = [];
			for(j=0;j<4;j++){
				this.arr[i][j] = {};
				this.arr[i][j].value = 0;
			}
		}
		//在全空白情况下随机生成第一个方格2
		var i1,j1;
		i1 = getRandom(4);
		j1 = getRandom(4);
		this.arrValueUpdate(2,i1,j1);
		this.drawCell(i1,j1);
	},
	//方格数字更新
	arrValueUpdate:function(num,i,j){
		this.arr[i][j].oldValue = this.arr[i][j].value;
		this.arr[i][j].value = num;
	},
	//画出方格
	drawCell:function(i,j){
		var item = '
'+this.arr[i][j].value+'
';
		$(".box").append(item);
	},
	//监听并执行动作
	addEvent:function(){
		var that = this;
		document.onkeydown = function(event){
			var e = event||window.event||arguments.callee.caller.arguments[0];
			var keyCode = e.keyCode;
			switch(keyCode){
				case 37:
				that.moveAble = false;
				that.moveLeft();
				that.checkLose();
				break;
				case 38:
				that.moveAble = false;
				that.moveUp();
				that.checkLose();
				break;
				case 39:
				that.moveAble = false;
				that.moveRight();
				that.checkLose();
				break;
				case 40:
				that.moveAble = false;
				that.moveDown();
				that.checkLose();
				break;
			}
		}
	},
	//向上
	moveUp:function(){ 	  },
	//向下
	moveDown:function(){    },
	//向左
	moveLeft:function(){    },
	//向右
	moveRight:function(){    },
    //添加新格子
	newCell:function(){    },
	//移动
	moveCell:function(){    },
	//合并
	mergeCell:function(){	 },
	//判断输
	checkLose:function(){	 }
}
function getRandom(n){
	return Math.floor(Math.random()*n)
}
function Game2048(){
	this.addEvent();
}
var g = new Game2048;
g.init();

 

 

 

2048小游戏整体的思路与结构如上，具体的算法填充见《js编写的2048小游戏开发（下：算法实现）》。转载请注明出处，不足之处欢迎讨论^_^~。