PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第二篇(算法)
背景:
上一节,我们已经把消灭星星的界面搭建好了,流程也跑通了。 这一篇涉及到程序的算法,也许是最难的部分了,理解起来需要多花点时间,而且我提供的算法未必就是最好的,如果读者有更优更好的算法,希望分享出来,我可以链接到你那里。大概的思路是这样的,第一次点击一个星星,立刻寻找四周相同颜色的,第二次点击,消除他们并产生粒子效果;接着星星数组重新走位掉落,补全空缺;然后还要检测纵行是否出现空缺,有的话,合并到一起;最后必须检测死局;大概如此。
ps:
1 这是一个系列博文,代码不会一下子全部放出来,每写一篇放出相应的代码。因为笔者也是抽空编一点程序,然后写一篇博文,断断续续的,没有整块时间;
2 代码是基于javascript语言,cocos2d-x游戏引擎,cocos2d-x editor手游开发工具完成的;
3 运行demo需要配置好cocos2d-x editor,暂不支持其他工具。demo是跨平台的,可移植运行android,ios,html5网页等。
源代码下载:
请到代码集中营下载(第二篇算法):http://blog.makeapp.co/?p=319
不同平台下的效果图:
window平台
mac平台
html5网页平台
android平台
代码分析:
主要集中在MainLayer.js下面的分析
第一步,10*10星星群检测触摸事件,通过this.sameColorList.length可以判断是第一次触摸还是第二次触摸 ;
@@ >1表示第二次触摸,这里又有分支,触摸的是刚才同一颜色区域还是其他区域?如果是原来颜色区域,删除this.removeSameColorStars(),如果不是原来颜色区域,恢复原状,然后新的检测
@@ <=1表示第一次触摸 直接检测颜色相同区域
- MainLayer.prototype.onTouchesBegan = function (touches, event) {
- var loc = touches[0].getLocation();
- this.ccTouchBeganPos = loc;
- for (var i = 0; i < this.starTable.length; i++) {
- var sprites = this.starTable[i];
- for (var j = 0; j < sprites.length; j++) {
- var pSprite0 = sprites[j];
- if (pSprite0) {
- var ccRect = pSprite0.getBoundingBox();
- if (isInRect(ccRect, this.ccTouchBeganPos)) {
- if (this.sameColorList.length > 1) {
- if (this.sameColorList.contains(pSprite0)) {
- cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.broken, false);
- this.removeSameColorStars();
- } else {
- for (var k = 0; k < this.sameColorList.length; k++) {
- if (this.sameColorList[k]) {
- this.sameColorList[k].runAction(cc.ScaleTo.create(0.1, 1));
- }
- }
- this.checkSameColorStars(pSprite0);
- if (this.sameColorList.length > 1) {
- cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);
- }
- }
- } else {
- this.checkSameColorStars(pSprite0);
- if (this.sameColorList.length > 1) {
- cc.AudioEngine.getInstance().playEffect(PS_MAIN_SOUNDS.select, false);
- }
- }
- break;
- }
- }
- }
- }
- };
第二步,建立单个星星的四个方向检测,上下左右,把颜色相同的放在一个数组里面,回调这个数组;其实最后用这个函数的时候主要是判断数组的大小;数组大于1,说明四周有相同颜色的;
- MainLayer.prototype.checkOneStarFourSide = function (sprite) {
- if (sprite == null) {
- return;
- }
- // cc.log("checkOneStarFourSide");
- var fourSideSpriteList = [];
- var color = sprite.starData.color;
- var col = sprite.starData.indexOfColumn;
- var row = sprite.starData.indexOfRow;
- //up
- if (row < 9) {
- var upSprite = this.starTable[col][row + 1];
- if (upSprite != null && upSprite.starData.color == color) {
- fourSideSpriteList.push(upSprite);
- }
- }
- //down
- if (row > 0) {
- var downSprite = this.starTable[col][row - 1];
- if (downSprite != null && downSprite.starData.color == color) {
- fourSideSpriteList.push(downSprite);
- }
- }
- //left
- if (col > 0) {
- var leftSprite = this.starTable[col - 1][row];
- if (leftSprite != null && leftSprite.starData.color == color) {
- fourSideSpriteList.push(leftSprite);
- }
- }
- //right
- if (col < 9) {
- var rightSprite = this.starTable[col + 1][row];
- if (rightSprite != null && rightSprite.starData.color == color) {
- fourSideSpriteList.push(rightSprite);
- }
- }
- return fourSideSpriteList;
- }
第三步,检测相同颜色区域,这里的算法比较复杂;有两个数组this.sameColorList和newSameColorList,前者是全局星星数组,后者是每次扩展新加入的星星;比如这样情况,一个星星左右上有相同的星星,上面的上面还有一个星星,总共五个相同星星:三次检测情况是this.sameColorList为1---4----5 ,而newSameColorList为1--3--1,各种曲折,读者好好理解下;
- MainLayer.prototype.checkSameColorStars = function (sprite) {
- if (sprite == null) {
- return;
- }
- this.sameColorList = [];
- this.sameColorList.push(sprite);
- var newSameColorList = [];
- newSameColorList.push(sprite);
- //by logic ,check the same color star list
- while (newSameColorList.length > 0) {
- for (var i = 0; i < newSameColorList.length; i++) {
- var fourSide = this.checkOneStarFourSide(newSameColorList[i]);
- if (fourSide.length > 0) {
- for (var j = 0; j < fourSide.length; j++) {
- if (!this.sameColorList.contains(fourSide[j])) {
- this.sameColorList.push(fourSide[j]);
- newSameColorList.push(fourSide[j]);
- }
- }
- }
- newSameColorList.splice(i, 1);
- }
- }
- cc.log("sameColorList length==" + this.sameColorList.length);
- if (this.sameColorList.length > 1) {
- for (var k = 0; k < this.sameColorList.length; k++) {
- var simpleStar = this.sameColorList[k];
- if (simpleStar) {
- simpleStar.runAction(cc.ScaleTo.create(0.1, 1.08));
- }
- }
- }
- }
第四步 移除相同的星星,并产生粒子效果
- MainLayer.prototype.removeSameColorStars = function () {
- for (var k = 0; k < this.sameColorList.length; k++) {
- var simpleStar = this.sameColorList[k];
- if (simpleStar) {
- var col = simpleStar.starData.indexOfColumn;
- var row = simpleStar.starData.indexOfRow;
- this.starTable[col].splice(row, 1, null);
- this.rootNode.removeChild(simpleStar);
- if (sys.platform != 'browser') {
- var starParticle = cc.StarParticle.create(this.rootNode, (36 + col * this.starSize), (36 + row * this.starSize), "spark");
- starParticle.runAction(cc.Sequence.create(cc.DelayTime.create(0.8), cc.CleanUp.create(starParticle)));
- }
- }
- }
- this.sameColorList = [];
- this.fallStar();
- }
第五步 星星掉落 填充空缺,主要是如果一个地方有空缺,就把它上面的星星位置和数据交换,用到数组的方法splice,可到网上查看js数组的一些方法应用
- MainLayer.prototype.fallStar = function () {
- for (var i = 0; i < this.starTable.length; i++) {
- var sprites = this.starTable[i];
- var length = sprites.length;
- for (var j = 0; j < length; j++) {
- var pSprite0 = sprites[j];
- if (pSprite0 == null) {
- var k = j + 1;
- while (k < length) {
- var upSprite = sprites[k];
- if (upSprite != null) {
- upSprite.starData.indexOfColumn = i;
- upSprite.starData.indexOfRow = j;
- this.starTable[i].splice(j, 1, upSprite);
- this.starTable[i].splice(k, 1, null);
- k = length;
- var flowTime = 0.2;
- var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + i * this.starSize,
- 36 + j * this.starSize));
- upSprite.runAction(fallAction);
- }
- k++;
- }
- }
- }
- }
- this.deadStar();
- // this.combineStar();
- }
第六步 合并星星,如果最底部有空缺,星星必须向左合并,这里笔者调试有问题,时间匆忙 来不及修改,读者可以自行研究修改;不解释了
- MainLayer.prototype.combineStar = function () {
- for (var m = 0; m < this.starTable.length; m++) {
- var mSprite0 = this.starTable[m][0];
- if (mSprite0 == null) {
- if (m == (this.starTable.length - 1)) {
- for (var j = 0; j < this.starTable[m].length; j++) {
- this.starTable[m].splice(j, 1, null);
- }
- }
- else {
- for (var i = (m + 1); i < this.starTable.length; i++) {
- // this.starTable.splice((i - 1), 1, this.starTable[i]);
- for (var j = 0; j < this.starTable[i].length; j++) {
- var pSprite0 = this.starTable[i][j];
- this.starTable[i - 1].splice(j, 1, pSprite0);
- if (pSprite0 != null) {
- pSprite0.starData.indexOfColumn = (i - 1);
- var col = pSprite0.starData.indexOfColumn;
- var row = pSprite0.starData.indexOfRow;
- var moveAction = cc.MoveTo.create(0.1, cc.p(36 + col * this.starSize,
- 36 + row * this.starSize));
- pSprite0.runAction(moveAction);
- }
- }
- }
- }
- }
- }
- this.deadStar();
- }
第七步 游戏到最后 会发生死局情况,程序自动判断消除;这里主要是循环检测每一个星星,如果所有的星星四周都没有相同星星的时候,就确认为死局,程序自动消除星星
- MainLayer.prototype.deadStar = function () {
- var isDead = true;
- for (var i = 0; i < this.starTable.length; i++) {
- var sprites = this.starTable[i];
- var length = sprites.length;
- for (var j = 0; j < length; j++) {
- var pSprite0 = sprites[j];
- if (pSprite0 != null) {
- if (this.checkOneStarFourSide(pSprite0).length > 0) {
- isDead = false;
- return;
- }
- }
- }
- }
- if (isDead) {
- for (var jj = 9; jj >= 0; jj--) {
- for (var ii = 0; ii < 10; ii++) {
- var pSprite0 = this.starTable[ii][jj];
- if (pSprite0 != null) {
- var delay = 4 + 0.3 * ii - 0.4 * jj;
- pSprite0.runAction(cc.Sequence.create(
- cc.DelayTime.create(delay),
- cc.CleanUp.create(pSprite0)
- ));
- var starParticle = cc.StarParticle.create(this.rootNode, (36 + ii * this.starSize), (36 + jj * this.starSize), "spark");
- starParticle.runAction(cc.Sequence.create(cc.ScaleTo.create(0, 0),
- cc.DelayTime.create(delay), cc.ScaleTo.create(0, 1), cc.DelayTime.create(0.8),
- cc.CleanUp.create(starParticle)));
- }
- }
- }
- }
- }
基本的流程就是这样 触摸——检测颜色——消除星星——掉落移动——合并星星——检测死局——结束 消除类的游戏思路都差不多是这样,把这个demo理解透了 任何消除类的游戏都很简单
CocosEditor开发工具:
CocosEditor,它是开发跨平台的手机游戏工具,运行window/mac系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,字体设计,还有粒子,物理系统,地图等等的,而且调试方便,和实时模拟;
CocosEditor 下载,介绍和教程:http://blog.csdn.net/touchsnow/article/details/19070665;
CocosEditor官方博客:http://blog.makeapp.co/;
PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第二篇(算法)相关推荐
- PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第一篇(界面)
背景: 来自星星的你电视剧很火,消灭星星游戏也很火,好像星星都很火,笔者就以星星为主题开始这篇博文.消除类的游戏挺受欢迎的,从2013年度app store最赚钱的游戏--粉碎糖果传奇,到总是可以在游 ...
- PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第三篇(分数)
背景: 经过消灭星星第二篇算法,最高的山峰已经过去了,剩下的都是小沟小河,没什么难度了.这一节笔者继续完成消灭星星的分数篇,这节主要包括:触摸提示得分 比如4 blocks 80 points,然后产 ...
- PopStar(消灭星星)游戏源代码下载、分析及跨平台移植—第一篇(界面)
背景: 来自星星的你电视剧很火,消灭星星游戏也很火,好像星星都很火,笔者就以星星为主题开始这篇博文.消除类的游戏挺受欢迎的,从2013年度app store最赚钱的游戏–粉碎糖果传奇,到总是可以在游戏 ...
- PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第四篇(关卡)
背景: 本来打算把第三篇和第四篇合并都一起,但以前计划分开,就还是分来吧:一般的游戏涉及到关卡的话,一般都会建立一个数组来存放各种定义参数,消灭星星关卡比较容易,不需要建立数组,只有两个参数level ...
- Fruit Ninja(水果忍者)游戏源代码下载、分析(中)---可运行Android,Ios,Window,Mac,Html5平台
背景: 上一篇,已经实现了水果不断向上抛的效果和开始界面,这一篇我们将分析如何切水果,获得分数:运行demo需要配置好CocosEditor,暂不支持其他工具.demo是跨平台的,可移植运行andro ...
- Fruit Ninja(水果忍者)游戏源代码下载、分析(上)---可运行Android,Ios,Window,Mac,Html5平台
背景: 本来打算下一个游戏是涂鸦跳跃的,因为图片资源没准备好,暂时往后推迟.刚好笔者手头上有部分水果忍者的游戏素材,于是上周末花了一些时间把水果忍者实现了:以前读大学的时候这款游戏就风靡大街小巷,记得 ...
- 使用C语言+EasyX完成消灭星星游戏(2)
使用C语言+EasyX完成消灭星星游戏(2) 上一篇简单介绍一下项目和创建游戏界面 本篇介绍如何达到消除方块的功能.具体思路,代码都有详细注释. 下一篇消除同色方块后其他方块的下落. #include ...
- 使用C语言+EasyX完成消灭星星游戏(1)
使用C语言+EasyX完成消灭星星游戏(1) 给大家介绍一个自己做的消灭星星小游戏项目,主要是基于C语言+EasyX实现,我使用的是vs2017编写.项目实现登陆,注册,游戏基本的玩法等功能. 项目展 ...
- 使用C语言+EasyX完成消灭星星游戏(3)
使用C语言+EasyX完成消灭星星游戏(3) 本篇介绍方块消除后,方块下落移动. #include<stdio.h> #include<graphics.h> #include ...
最新文章
- Python特殊语法:filter、map、reduce、lambda [转]
- Spire.Doc系列教程:C# 根据 Word 的标题样式获取文字
- 线性代数思维导图_线性代数入门级思维导图
- spring-boot 添加http自动转向https
- 前台分页,感觉一般还能优化
- 在Websphere 8.0上安装Liferay 6.2 Enterprise Edition
- 高级Java泛型:检索泛型类型参数
- ceph rgw java_ceph rgw multisite基本用法
- ibm7945服务器引导盘,IBM ServerGuide引导盘全系列|IBM引导盘
- linux opendir路径_opendir与readdir函数使用示例(获得指定目录下所有文件名
- oracle清除temp表空间,Temp表空间占用长时间不释放,是谁惹的祸
- 引导魔女之力,征服星辰大海 升级篇: 重要事情说三遍: 升级!升级!!升满级!!! 简述: 1.本篇仅升级,涉及到的技巧全职业都可以参考; 2.考虑到萌新刚玩通关护卫者系统等级不高,故
- IPFS发展前景真有说的那么好么?
- java rmi tcp_Tomcat启动失败报错[RMI TCP Connection(4)-127.0.0.1] [RMI TCP Connection(3)-127.0.0.1]...
- 阿里巴巴公布合伙人名单,董建华成为独董,俞永福未进入合伙人
- 如何解锁元宇宙?应用场景决定商业化变现
- 学考计算机会考考点工作总结,学业水平测试工作总结.docx
- JS数组正数转为负数
- JAVA学习-Stream流的生成、中间操作、终结、收集操作
- Unity 操作快捷键(全)
热门文章
- 解读链接脚本ld和案例分享
- 计算机如何新建一个用户名,win10电脑怎样创建另一个账户
- Anaconda安装swampy程序包
- java程序设计教程_第6章_第6章 习题答案
- (待拔草)关于电烙铁焊接时排放有毒气体的现象、解决方法
- 基于51单片机的DHT11温湿度检测
- 自动化机器学习(AutoML)文献/工具/项目资源大列表分享
- 时尚巨头确认遭遇勒索攻击、1100万部手机已感染木马|1月19日全球网络安全热点
- 计算机c语言程序改错,计算机二级C上机:程序改错题
- Ubuntu 18.04 开启隐藏录音降噪功能