我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

1.背景:

用前端三件套+jqeury写了一个2048的方块游戏,沿用了一贯的玩法,整个项目主要由两部分组成,第一个是背景框,这边选用的是米黄色，，然后就是随机生成的数字方块元素,增加了小方块的移动的动画,其移动速度恒定，生成的数字随机，同时监听获取键盘事件转换移动方向。整个实现该过程还是十分有趣的,虽然比较简单,实际涉及的技术也不是很复杂,但是还是get到了码上掘金这个插件的方便之处。 项目链接: code.juejin.cn/pen/7143230…

2.实现

2.1 构造对象原型:

function G2048(){
	this.addEvent();
}

G2048.prototype = {
	constructor:G2048,
	init:function(){
		this.score = 0;
		this.arr = [];
		this.moveAble = false;
		$("#score").html("分数：0");
		$(".number_cell").remove();
		this.creatArr();
	}

2.2当数字相同时合并方块

主要是在方块移动后比较方块的数字大小

		/*移动并合并格子*/
		var temp =this.arr[i2][j2].value;
		var temp1 = temp * 2;
		this.moveAble = true;
		this.arr[i2][j2].value = temp1;
		this.arr[i1][j1].value = 0;
		$(".p"+i2+j2).addClass('toRemove');
		var theDom = $(".p"+i1+j1).removeClass("p"+i1+j1).addClass("p"+i2+j2).find('.number_cell_con');
		setTimeout(function(){
			$(".toRemove").remove();//这个写法不太好
			theDom.addClass('n'+temp1).removeClass('n'+temp).find('span').html(temp1);
		},200);//200毫秒是移动耗时。
		this.score += temp1;
		$("#score").html("分数："+this.score);	
		if(temp1 == 2048){
			alert('you win!');
			this.init();
		}	
	},
        

2.3判定结束的条件

当整个棋盘内,没有可以合并的方块,且不能再移动时,游戏直接重新开始

		/*判输*/
		var i,j,temp;
		for (i = 0; i < 4; i++) {
			for (j = 0; j < 4; j++) {
				temp = this.arr[i][j].value;
				if(temp == 0){
					return false;
				}
				if(this.arr[i+1] && (this.arr[i+1][j].value==temp)){
					return false;
				}
				if((this.arr[i][j+1]!=undefined) && (this.arr[i][j+1].value==temp)){
					return false;
				}
			}
		}
		alert('you lose!');
		this.init();
		return true;
	}

实现截图