纯js 消灭星星游戏实现原理及问题

hch126163 2016-01-08 11:37:42

消灭星星游戏的几个核心逻辑

用10*10的数组nums保存星星，1-5表示有星星，0表示已经消去

1、初始化，5种颜色的星星分配。 1-5

这个最容易，随机分配就好，产生1-100的随机数num，num%5 +1

2、判断游戏是否结束
循环数组nums，判断每一个星星是否有相邻的同色星星，有相邻的游戏未结束。每个星星，最多只有4个相邻的星星，这个很容易判断。

game.isEnd=function()
{
var ps;
for(var i=0;i<100;i++)
{
if(!game.nums[i])continue; // 已经消去的，跳过
ps=game.getPos(i); // 数组的索引转换成2维坐标如;0=[0,0]; 10=[0,1]; 100=[9,9]
if( ps.y>0 && game.nums[i-10]==game.nums[i]){
return 0;
}
if( ps.y<9 && game.nums[i+10]==game.nums[i]){
return 0;
}
if( ps.x>0 && game.nums[i-1]==game.nums[i]){
return 0;
}
if( ps.x<9 && game.nums[i+1]==game.nums[i]){
return 0;
}
}
return 1;
};

game.getPos=function(i){
return {x:i%game.row,y:Math.floor(i/game.row)}; // game.row =10
};

3、获取选中的颜色相同的星星集合
用一个数组selects保存选中的星星，先把点击的星星放入数组selects，再判断此星星相邻的4个星星，是否颜色相同且不在数组selects中。
再递归调用
game.getSelects=function(index)
{
game.selects.push(index);
game.getImg(index).className="on";
var ps=game.getPos(index);
if( ps.y>0 && game.selects.indexOf(index-10)<0 && game.nums[index-10]==game.nums[index]){
game.getSelects(index-10);
}
if( ps.y<9 && game.selects.indexOf(index+10)<0 && game.nums[index+10]==game.nums[index]){
game.getSelects(index+10);
}
if( ps.x>0 && game.selects.indexOf(index-1)<0 && game.nums[index-1]==game.nums[index]){
game.getSelects(index-1);
}
if( ps.x<9 && game.selects.indexOf(index+1)<0 && game.nums[index+1]==game.nums[index]){
game.getSelects(index+1);
}
};

4、消除星星后，星星的移动
下移相对简单，10列，每一列的逻辑是一样的，循环10次就可以。
每一列的移动，从最下方的位置开始，计算有多少被消去的星星，来计算每个星星从哪个索引移动到了哪个索引
game.moveDown=function()
{
var c0=0;
for(var i=90;i<100;i++)// 循环最下面一行的10列
{
c0=0;// 每列被消去的星星数量
for(var j=0;j<100;j+=10) // 循环每列的10个星星
{
if(!game.nums[i-j]){c0++;}else
if(c0){
game.nums[i-j+c0*10] = game.nums[i-j];//重置移动后的星星数组值
game.nums[i-j]=0;
//setTimeout 是期望每个星星可以多线程同时移动
setTimeout((function(f,t){
return function(){game.move(f,t);};
})(i-j,i-j+c0*10),0);
}
}
}
};

左移相对麻烦一点，先计算每一列可以移动的列数，再移动每一列的星星
game.moveLeft=function()
{
var line=0,t=1;// line 需要移动的列数，t 当前列是否都为0
for(var i=90;i<100;i++)
{
t=1;
for(var j=0;j<100;j+=10)
{
if(game.nums[i-j]){t=0; break;}
}
if(t) //当前列都为0 ,需要移动的列数+1
{
line++;
}else if(line) // 当前列还有未消除的星星，且要移动的列数>0时，移动当前列
{
game.moveLeftLine(i,line);
}
}
};
game.moveLeftLine=function(index,line)
{
for(var j=0;j<100;j+=10)
{
game.nums[index-j-line] = game.nums[index-j];
game.nums[index-j]=0;
// game.move(index-j,index-j-line);
setTimeout((function(f,t){
return function(){game.move(f,t);};
})(index-j,index-j-line),0);
}
}

问题：
100个星星是100个img 标签。如果消除最底部的3个星星，上面的27个星星会向下移动，我是循环控制了每个星星的top,left，css3实现动画。电脑上面完全没有问题。
但是手机上面，星星移动时，某些浏览器会闪退，我找了一些资料说，闪退是内存不足。可是，我用PC chrome 监视内存一直只有3M左右。手机浏览器繁多，兼容问题很难做，也不知道怎么在手机上面监视内存，而且还是不同浏览器。
手机部分浏览器闪退问题，到现在不知道怎么解决。

源码及试玩：

电脑：有道具的消灭星星 http://www.cyfhw.top/game/xmxx/
手机：有道具的消灭星星 http://m.cyfhw.top/game/xmxx/

...全文