纯js 消灭星星游戏，js 消灭星星游戏实现原理，有道具的消灭星星

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

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

}

源码及试玩：

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

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

纯js 消灭星星游戏，js 消灭星星游戏实现原理，有道具的消灭星星相关推荐

弟子规python编程游戏_《Python游戏趣味编程》第11章消灭星星
知乎视频www.zhihu.com 图书简介可以看这里: 童晶:<Python游戏趣味编程>新书上架了zhuanlan.zhihu.com 消灭星星是一款非常容易上瘾的消除类游戏,只需 ...
php星星评价,JS 实现点亮星星评分功能
本文主要和大家分享JS 实现点亮星星评分功能,希望能帮助到大家. 点亮星星评分 ★ ★ ★ ★ ★ 相关推荐:
消除类游戏(js版)
原文:消除类游戏(js版) 最近一直在玩一款消灭星星的消除类游戏,周末无聊就用js也写了一遍,感觉玩比写还困难一直玩不到10000分.废话不多说直接上源码. 效果图(ps 页面有点难看木有美工) 代码 ...
H5网页游戏(js)，游戏小程序，网页游戏引擎
采用了Three.js作为3D引擎库,结合tween.js作为配套的动画库,以及基于webpack的脚手架nowa链接作为技术支持.市面上比较成熟的3D库有Three.js和Babylon.js. B ...
原生html小游戏,原生JS实现别踩白块小游戏（一）
对于前端开发人员来说,闲暇之余自己开发个小游戏打发时间,也是对自己基础技术的一种应用考验.那么别踩白块小游戏,相信大家并不陌生,这个小游戏我们可以通过原生js来实现,即便是前端初学者也可以轻松完成. ...
H5+JS实现《Just Do 8》游戏源码分享
=======[界面效果图]========= ========[代码结构]========= ========[代码结构解释]========= 1.使用html语言实现数据 2.使用css3语言实 ...
2048小游戏js实现
摘要 2048小游戏,采用原生js的dom操作,做的比较粗糙,目的是练习原生js的常用操作.游戏功能与界面均为他人设计,本demo具体代码实现由本人独立实现. 样式 demo功能: 常见的2048游戏 ...
用js来完成一个赛车的小游戏
这次就是给大家分享赛车的游戏废话不多,直接上代码: html: <!DOCTYPE html> <html lang="zh"> <head> ...
canvas+js实现简单的数字华容道小游戏
数字华容道是个很简单的小游戏,今天就尝试使用canvas+js做个简单的数字华容道小游戏.有关于游戏的具体规则请上网查阅. 一如既往先写个html页面,这里我把游戏的界面水平居中了,这里预留了一个动画 ...

纯js 消灭星星游戏，js 消灭星星游戏实现原理，有道具的消灭星星

纯js 消灭星星游戏，js 消灭星星游戏实现原理，有道具的消灭星星相关推荐

最新文章

热门文章