写动画太麻烦了，简单标记一下
游戏地图
10x10 数组，每个数组一列，消除之后补充元素直接 push 新的对象进去，日后如果加动画也很方便
检查三个以上连续元素：
- 逐列查找该列所有最大连续子序列，将所有元素存入一个数组
- 逐行做同样查找
- 合并去重，删除
初始时可以重复查找连续直到没有结果为止，
每次操作之后同样重复该操作消除未触发的连续元素
/* ...... */
checkCol : function() {
var self = this;
var _r = [];
var _re = [];
for(var i=0; i<self.gmap.length; i++) {
var col = self.gmap[i];
var _tmp = self.boomLine(col);
_r.push( _tmp );
_re = _re.concat( _tmp );
}
console.log(_r);
return _re;
},
checkRow : function() {
var self = this;
var _rows = [[],[],[],[],[],[],[],[],[],[]];
var _r = [];
var _re = [];
for (var i = 0; i < gmr.gmap.length; i++) {
for(var r=0; r< gmr.gmap[0].length; r++) {
_rows[r].push(gmr.gmap[i][r]);
}
}
for(var i=0; i<_rows.length; i++) {
var row = _rows[i];
var _tmp = self.boomLine(row)
_r.push( _tmp );
_re = _re.concat( _tmp );
}
return _re;
},
checkAll : function() {
var self = this;
var _cols = self.checkCol();
var _rows = self.checkRow();
var _del = _rows;
_cols.map(function(one){
if( _rows.indexOf(one) == -1 ) {
_del.push(one);
}
});
return _del;
},
事件处理
鼠标落下，判断当前位置对应的元素，存储鼠标位置
鼠标抬起，判断鼠标移动的方向（上、右、下、左），与对应位置元素交换位置，检查地图
listen : function() {
var self = this;
$('#paper').mousedown((e)=>{
self.mx = parseInt( e.clientX / self.size );
self.my = parseInt( e.clientY / self.size );
if( self.mx > self.width && self.my > self.height ) {
self.mx = -1;
self.my = -1;
} else {
self.drawSelect(self.mx, self.my);
}
});
$('#paper').mouseup((e)=>{
if(self.mx<0 || e.clientX>500 || e.clientY>500) {
self.mx=0;
self.my=0;
return;
}
self.ex = parseInt( e.clientX / self.size );
self.ey = parseInt( e.clientY / self.size );
var dy = self.ey-self.y;
var dx = self.ex-self.x;
var d = [0, 0];
if( dy*dy > dx*dx ) {
if(dy>0) {
console.log('向下');
d=[0, 1];
} else {
console.log('向上');
d=[0, -1];
}
} else if ( dy*dy < dx*dx ) {
if(dx>0) {
console.log('向右');
d=[1, 0];
} else {
console.log('向左');
d=[-1, 0];
}
}
/* var x0 = parseInt(window.x/self.size);
var y0 = parseInt(window.y/self.size);
var x1 = x0 + d[0];
var y1 = y0 + d[1];*/
var x0 = self.mx;
var y0 = self.my;
var x1 = self.ex;
var y1 = self.ey;
self.drawSelect(x1,y1);
setTimeout(function(){
self.exchange([x0,y0],[x1,y1]);
self.drawArr(self.checkAll());
setTimeout(function(){
self.ready();
self.fillMap();
self.drawMap();
self.ctx.clearRect(500,0,250,500);
self.ctx.font = '26px Microsoft Yahei'
self.ctx.fillStyle='#92f';
self.ctx.fillText("你的分数是："+self.points, 510, 250);
}, 500);
}, 500);
});
},