背景:
来自星星的你电视剧很火,消灭星星游戏也很火,好像星星都很火,笔者就以星星为主题开始这篇博文。消除类的游戏挺受欢迎的,从2013年度app store最赚钱的游戏–粉碎糖果传奇,到总是可以在游戏排行版看见身影的–消灭星星;玩消除类的游戏好像挺难的,开发这样的游戏是不是巨难?笔者想告诉你的是,开发比玩容易多了。这个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、html5、android)
代码分析:
消灭星星包括两个场景:StartLayer和MainLayer;我们先实现开始界面;首先在StartLayer.ccbx设计场景,这个很简单无需解释,功能上主要包括:
1 点击New Game按钮进入主游戏场景
StartLayer.prototype.onStartClicked = function () { this.newGame.runAction(cc.ScaleTo.create(0.1, 1.2)); cc.BuilderReader.runScene("", "MainLayer"); }
2 创建背景的烟花粒子效果,有两个粒子,leaf_open和quanquan
StartLayer.prototype.onEnter = function () { this.star.setZOrder(11); this.pop.setZOrder(11); if (sys.platform != 'browser') { if (this.isFirst) { this.createBgParticle(200, 800, "leaf_open"); this.createBgParticle(600, 1000, "quanquan"); // this.createBgParticle(470, 900, "spark"); this.isFirst = false; } } } StartLayer.prototype.createBgParticle = function (x, y, name) { var particle = cc.ParticleSystem.create("Resources/particles/" + name + ".plist"); particle.setAnchorPoint(cc.p(0.5, 0.5)); particle.setPosition(cc.p(x, y)); particle.setZOrder(10); this.rootNode.addChild(particle); return particle; }
接着进入了游戏主场景,主场景如何设计也不解释了。随机创建10*10表格的星星群,星星从顶部掉落下来的动画
1 创建随机星星,并单个星星加入掉落动画
MainLayer.prototype.getRandomStar = function (colIndex, rowIndex) { this.starSize = 72; var stars = PS_MAIN_TEXTURE.STARS; var randomStar = stars[getRandom(stars.length)]; var starSprite = cc.Sprite.createWithSpriteFrameName(randomStar); starSprite.setAnchorPoint(cc.p(0.5, 0.5)); starSprite.setPosition(cc.p(36 + colIndex * this.starSize, 1300)); starSprite.starData = {name: randomStar, indexOfColumn: colIndex, indexOfRow: rowIndex}; starSprite.setZOrder(100); var flowTime = rowIndex / 10; var fallAction = cc.MoveTo.create(flowTime, cc.p(36 + colIndex * this.starSize, 36 + rowIndex * this.starSize)); starSprite.runAction(fallAction); return starSprite; }
2 根据表格位置初始化10*10星星群
MainLayer.prototype.initStarTable = function () { this.starTable = new Array(this.numX); for (var i = 0; i < this.numX; i++) { var sprites = new Array(this.numY); for (var j = 0; j < this.numY; j++) { var pSprite0 = this.getRandomStar(i, j); if (pSprite0 != null) { this.rootNode.addChild(pSprite0); } sprites[j] = pSprite0; } this.starTable[i] = sprites; } }
在主场景可以点击单个星星,星星进行缩放,这里是为下一篇算法做准备,当前博文代码还不能消除;
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)) { this.pSelectedSprite = pSprite0; var scaleAction = cc.Sequence.create( cc.ScaleTo.create(0.2, 1.2), cc.DelayTime.create(0.25), cc.ScaleTo.create(0.2, 1)) this.pSelectedSprite.runAction(scaleAction); break; } } } }
最后在主场景加入暂停悬浮层,点击右上角的暂停按钮,显示悬浮层,按钮resume点击可以隐藏悬浮层,按钮save&exit点击可以返回到开始界面
MainLayer.prototype.onPauseClicked = function () { this.pauseNode.setVisible(true); } MainLayer.prototype.onResumeClicked = function () { this.pauseNode.setVisible(false); } MainLayer.prototype.onSaveExitClicked = function () { cc.BuilderReader.runScene("", "StartLayer"); }
到这里,消灭星星的基本框架和界面就完成了;
开发工具(2013-02-14 已更新到1.0Beta):
cocos2d-x editor,它是开发跨平台的手机游戏工具,运行window/mac系统上,javascript脚本语言,基于cocos2d-x跨平台游戏引擎, 集合代码编辑,场景设计,动画制作,字体设计,还有粒子,物理系统,地图等等的,而且调试方便,和实时模拟;
cocos2d-x editor 下载,介绍和教程:http://blog.csdn.net/touchsnow/article/details/19070665;
cocos2d-x editor 官方博客:http://blog.makeapp.co/;
PopStar博文系列:
PopStar(消灭星星)游戏源代码下载、分析及跨平台移植—第一篇(界面)
PopStar(消灭星星)游戏源代码下载、分析及跨平台移植—第二篇(算法) ——将写——
PopStar(消灭星星)游戏源代码下载、分析及跨平台移植—第三篇(分数) ——将写——
PopStar(消灭星星)游戏源代码下载、分析及跨平台移植—第四篇(关卡) ——将写——
PopStar(消灭星星)游戏源代码下载、分析及跨平台移植—第五篇(移植) ——将写——
微博关注地址:
相关推荐
pc版消灭星星源码,基于vb.net 设计
消灭星星是一款手机上非常流行的消除类娱乐游戏,此次有了电脑版(非模拟器版),让大家可以在电脑上过把瘾了。游戏结束后,如果将自己的得分提交的网络上,可以在下次开局时得到额外的刷子和炸弹,消除更刺激。
PopStar(一起消灭星星)_210.rar小游戏源码CocosCreator源码下载料下载PopStar(一起消灭星星)_210.rar小游戏源码CocosCreator源码下载料下载PopStar(一起消灭星星)_210.rar小游戏源码CocosCreator源码下载料下载Pop...
源代码使用AndEngine框架以Java编程语言编写. 完整,运作良好
1、一次消除的同色方块越多获得分数越高。2、关卡结束时剩余方块越少获得分数越高。3、炸弹功能:消除指定的一个方块。4、刷子功能:将四周方块的颜色转变为指定方块的颜色。5、每次游戏结束后,如果将自己的...
Qt 4.7的工程 和 android 手机 上消灭星星原理一样。QT 代码简短 易懂。
Cocos2d x 消灭星星源码 PopStar @更多@ http: cleopard download csdn net 13份WPF经典开发教程 http: download csdn net album detail 1115 C#资料合辑二[C#桌面编程入门篇] ...C#资料合辑一[C#入门篇] ...
PopStar(一起消灭星星)_210.zip源码cocos creator游戏项目源码下载PopStar(一起消灭星星)_210.zip源码cocos creator游戏项目源码下载 1.适合个人学习技术做项目参考 2.适合学生毕业设计项目参考 3.适合小公司开发...
这个是自己业余时间用MFC写的一个模仿手机游戏PopStar的小程序,只有一些简单的功能
使用cocos2d-x3.2引擎开发的消灭星星源码demo,内容仅供参考和学习
cocos2dx 消灭星星源码-popStar cocos精品小游戏源码 , 完整项目源码 是整个项目的压缩包 , 新建空项目直接导入到项目里面就可以运行了,无需其他操作。 适合二次开发和学习使用,都是经典游戏,需要其他游戏源码包...
cocos2d-x实现一个PopStar(消灭星星)游戏的逻辑分析及源码-附件资源
程序自动辨识iphone5/5s 等retina分辨率的PopStar游戏截图,将PNG格式的截图替换压缩包内的test.png即可,运行主程序popstar_Solver.m或popstar_SolverV2.m,出现图像后黑色方块代表要消除的,按任意键即可显示下一...
TestPopStar Test PopStar消灭星星
js小游戏 pop star
1、游戏规则和计分规则同IOS平台版本 2、清除块数,分数预先提示 3、界面右下角喇叭为程序音效开关 4、自动保存进度,下次启动可继续上次游戏 5、自动储存最高分 6、双击最高分可清除最高分记录 7、界面最下方重新...
消灭星星源码,class文件和Resources文件
用Javascript实现游戏PopStar
自己模仿PopStar游戏规则编写的MFC小程序。程序已经可以正确运行。适合对MFC有基本基础的同学参考学习。