纯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/
...全文
133 点赞 收藏 1
写回复
1 条回复
KK3K2005 2016年01月08日
整体 translate y向下
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告