PopStar(消灭星星)游戏源代码下载、分析及跨平台移植—第一篇(界面)
背景:
来自星星的你电视剧很火,消灭星星游戏也很火,好像星星都很火,笔者就以星星为主题开始这篇博文。消除类的游戏挺受欢迎的,从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/;
转载于:https://blog.51cto.com/makeapp628/1366763
PopStar(消灭星星)游戏源代码下载、分析及跨平台移植—第一篇(界面)相关推荐
- PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第一篇(界面)
背景: 来自星星的你电视剧很火,消灭星星游戏也很火,好像星星都很火,笔者就以星星为主题开始这篇博文.消除类的游戏挺受欢迎的,从2013年度app store最赚钱的游戏--粉碎糖果传奇,到总是可以在游 ...
- PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第三篇(分数)
背景: 经过消灭星星第二篇算法,最高的山峰已经过去了,剩下的都是小沟小河,没什么难度了.这一节笔者继续完成消灭星星的分数篇,这节主要包括:触摸提示得分 比如4 blocks 80 points,然后产 ...
- PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第四篇(关卡)
背景: 本来打算把第三篇和第四篇合并都一起,但以前计划分开,就还是分来吧:一般的游戏涉及到关卡的话,一般都会建立一个数组来存放各种定义参数,消灭星星关卡比较容易,不需要建立数组,只有两个参数level ...
- PopStar(消灭星星)游戏源代码下载、分析及跨平台移植---第二篇(算法)
背景: 上一节,我们已经把消灭星星的界面搭建好了,流程也跑通了. 这一篇涉及到程序的算法,也许是最难的部分了,理解起来需要多花点时间,而且我提供的算法未必就是最好的,如果读者有更优更好的算法,希望分享 ...
- 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 ...
最新文章
- 链式链表的C风格实现
- 巧妙的有css合并图片解决tab切换的背景图片
- 关于关闭office 2010中的OSPPSVC服务的方法
- ppp和chap的区别
- js中数组的操作方法
- 关于javascript的原型和原型链,看我就够了(一)
- Python做接口自动化测试框架
- java biginteger相比_java Biginteger类
- Android 7.0 抓包
- 如何做将两张图片合二为一
- RAKsmart云服务器全场7折
- 如何用微信自动添加wifi连接服务器地址,微信WiFi一键连小程序怎么用 微信怎么连接WiFi热点...
- 【Python】 matplotlib 以pdf形式保存图片
- 模拟wechat红包 版本2.0
- 黑客软件大众化 【爆吧机的出现】杨丞琳贴吧遭网友攻陷
- 针对于“上传文件”和“触发方式” 的解决方案(Antd个例)
- canvas长微博生成功能实践
- 小程序--搜索页面(有搜索历史记录)
- Vmware Linux虚拟机硬盘扩容
- 贝叶斯分类器-资源总结
热门文章
- 如果显示WinEdt 30天到期了怎么办
- Linux超级用户权限控制
- 【转载】三叠字和四叠字
- su oracle失败,su: /bin/bash: Permission denied错误的解决方法
- 计算机网络英语陈伟鸿,他英语老师却跨界做主持人,才华不输撒贝宁,今50岁风采依旧!...
- python中负数取余和取整
- Python依赖库、安装包(源码安装)
- discard long time none received connection
- Python 图像处理 PIL 第三方库详细使用教程(更新中)
- OSPF点到多点网络配置ensp