2048小游戏的实现(html+css+js+jq)
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;
}
实现截图
转载自:https://juejin.cn/post/7143234426577780750