likes
comments
collection
share

2048小游戏的实现(html+css+js+jq)

作者站长头像
站长
· 阅读数 12

1.背景:

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;
	}

实现截图

2048小游戏的实现(html+css+js+jq)