这篇文章主要围绕cocos-jsweb开发泡泡龙游戏【二生成游戏所有元素】和经典的泡泡龙游戏源码展开,旨在为您提供一份详细的参考资料。我们将全面介绍cocos-jsweb开发泡泡龙游戏【二生成游戏所有
这篇文章主要围绕cocos-js web开发泡泡龙游戏【二 生成游戏所有元素】和经典的泡泡龙游戏源码展开,旨在为您提供一份详细的参考资料。我们将全面介绍cocos-js web开发泡泡龙游戏【二 生成游戏所有元素】的优缺点,解答经典的泡泡龙游戏源码的相关问题,同时也会为您带来(cocos2d-js游戏)测试你的反应速度----------游戏优化(下)、cocos-js web开发泡泡龙游戏【一 加载游戏场景】、Cocos2d 卡牌塔防 游戏 cocos2d-x游戏开发之旅 第14 15 16 章 源代码调试 注意点 出现无法打开包括文件:“cocos2d.h”: No such file or direct、Cocos2d-x 3.2 大富翁游戏项目开发-第二十九部分 游戏配音的实用方法。
本文目录一览:- cocos-js web开发泡泡龙游戏【二 生成游戏所有元素】(经典的泡泡龙游戏源码)
- (cocos2d-js游戏)测试你的反应速度----------游戏优化(下)
- cocos-js web开发泡泡龙游戏【一 加载游戏场景】
- Cocos2d 卡牌塔防 游戏 cocos2d-x游戏开发之旅 第14 15 16 章 源代码调试 注意点 出现无法打开包括文件:“cocos2d.h”: No such file or direct
- Cocos2d-x 3.2 大富翁游戏项目开发-第二十九部分 游戏配音
cocos-js web开发泡泡龙游戏【二 生成游戏所有元素】(经典的泡泡龙游戏源码)
为了游戏主界面形成这样的效果(请忽略边边角角那一些黑边,这店bug以后换图片)
需要我写一个bubblescene场景js 用来加载固定在游戏主界面不变的背景和炮台
还要写一个bubble类,用来封装bubble类
最后在bubblescene中按照算法添加bubble们
二.加载游戏主场景所有元素
首先看一下bubble类吧。。bubble有什么性质呢 颜色(即类型),通过不同的类型找到对应不同的图片加载。位置,每一个bubble都有不同的位置。
var Bubble=cc.Sprite.extend({ type:0,myCol:0,myRow:0,ctor:function(type){ this.type=type; var pic=res["Bubble_"+type]; this._super(pic); } });
ctor 是构造函数的意思var pic=res["Bubble_"+type]; this._super(pic); 这里给bubble一张对应图片再看bubblescene类
背景图片加载直接copy startscene呃内容改个名字,去掉menu就好了
最底下两个小球和发射台的位置是固定的,建立一个命名空间,存放他们的位置
var game=game||{};//命名空间 这个东西写到一个js中,比这个js完一些加载的js也会识别,命名空间嘛 这东西在main.js中定义,在bubblescene中写入元素
game.Shoot_Pos={x:180,y:60}; game.Ready_Pos={x:100,y:20};
以下函数分别是建立炮台,建立发射bubble,建立等待bubble,单纯创建一个bubble
fireBubble:null,waitBubble:null,shooter:null,
createShooter:function(){ this.shooter=new cc.Sprite(res.Shooter); this.shooter.x=game.Shoot_Pos.x; this.shooter.y=game.Shoot_Pos.y; this.shooter.anchorY=0.4; this.addChild(this.shooter); },createShootBubble:function(){ var type=0; this.fireBubble=this.addOneBubble(type,game.Shoot_Pos.x,game.Shoot_Pos.y); },createReadyBubble:function(){ var type=1; this.waitBubble=this.addOneBubble(type,game.Ready_Pos.x,game.Ready_Pos.y); },
addOneBubble:function(type,x,y){ var bubble=new Bubble(type); bubble.attr( { x:x,y:y } ); this.addChild(bubble); return bubble; }在onenter里面调用以上四个函数。
this.createReadyBubble(); this.createShooter(); this.createShootBubble();
突然觉得js比c++好用太多了,c++写游戏,要不断跳跃于头文件和cpp文件之间的,变量的定义,函数等等都很麻烦,js呢没有头文件,变量函数也简洁干练。
下面加载最上面的bubble们
game.Bound={ LEFT:40,RIGHT:340,UP:540,DOWN:80 };
bubble的限制范围,超出这个范围就不能再有泡泡了,就要continue了
game.BubbleD=32;
bubble的半径
game.MaxRow=15; game.MaxCol=10;最大行列数,很明显是为第一种加载方式准备的了
下面看第一种生成方法:
bubblesArr:[],
for(var i=0;i<game.MaxRow;i++){ this.bubblesArr[i]=[];//js没有原生的二维数组 } ////自定义生成Bubble map for(var i=0;i<4;i++){ var offset=i%2?game.BubbleD/2:0; for(var j=0;j<game.MaxCol;j++){ if(i%2 && (j==game.MaxCol-1))continue; var type=parseInt(Math.random()*8); var x=game.Bound.LEFT+game.BubbleD*j+offset; var y=game.Bound.UP-game.BubbleD*i; var bubble=this.addOneBubble(type,x,y); bubble.myRow=i; bubble.myCol=j; this.bubblesArr[i][j]=bubble; } }
js有一个与c++不同的是,js没有定义的二维数组,只能定义一维数组,扩展成二维数组 第一个for循环就是预先把二维数组生成好,扩展开,以防后面关卡多了越界,行列都按最大值。
下面一个二重for循环值生成了4行bubbles
offset=i%2?game.BubbleD/2:0; 偶数行比奇数行要向右有一点错位,这是那个偏移量
if(2 && (j==MaxCol-1))continue; 偶数行的时候,如果j达到最大列了,就不加载bubble,这里使用算法限制bubble不要越界,为了美观。type=parseInt(Math.random()*8); 类型 x=Bound.LEFT+BubbleD*j+offset; y=UP-i; 坐标bubble=this.addOneBubble(type,x,131)">y); 创建bubble bubble.myRow=i; myCol=j; 内容补全 bubblesArr[i][j]=bubble; 把bubble加到数组中以记录。加载分几步:把数组扩展好,遍历i和j,随机出一个type,定好位置,new出一个bubble来,增添好bubble各项内容,加入数组记录。
下面看第二种方法
addBubbles:function(){ for(var i=0;i<game.MaxRow;i++){ this.bubblesArr[i]=[];//js没有原生的二维数组 } //策划生成地图 var level1=[ [1,3,4,2,5,6],[2,1,5],[0,0,1] ]; for(var i=0;i<level1.length;i++){ var offset=i%2?game.BubbleD/2:0; for(var j=0;j<level1[i].length;j++){
var x=game.Bound.LEFT+game.BubbleD*j+offset; var y=game.Bound.UP-game.BubbleD*i; var bubble=this.addOneBubble(level1[i][j],y); bubble.myRow=i; bubble.myCol=j; this.bubblesArr[i][j]=bubble; } } },
区别很小了,不再random一个type而是直接从level中调出来用。
(cocos2d-js游戏)测试你的反应速度----------游戏优化(下)
上一篇将实现了大概逻辑,玩了几把之后发现了几点不足
1.随机数的生成空间是1-10s,这个范围有点大,有时候会造成等待时间过长或者过短的情况,于是将随机数的生成空间调整为3-6s
randomTime = Math.floor(Math.random()*3+1)+3;
2.在点击开始游戏页面和游戏结束页面增加动画,让游戏更具有动感
this.startAnim = cc.Sprite.create(s_ClickToStartAnim); this.startAnim.setPosition(this.size.width/2,this.size.height/2); this.addChild(this.startAnim,1); var action = cc.Sequence.create(cc.FadeOut.create(1.0),cc.FadeIn.create(1.0));//先渐变消失,再渐变出现 var rep = cc.RepeatForever.create(action);//一直循环该动作 this.startAnim.runAction(rep);
3.添加微信分享,推广游戏
a.导入微信分享接口的类WeixinApi.js(这个可以在网上找到)
b.在游戏结束函数中添加:
<span>document.title = window.wxData.desc = "我的反应速度是"+time+"ms!来试试你的吧!";</span>c.在index.html中:
<script type="text/javascript"> // 微信分享的数据 window.wxData = { "appId": "","imgurl":"","link":'http://iloveyoulhx.sinaapp.com/ReactionTime/',"desc":"测测你的反应速度,快来试试吧","title":"测试反应速度" }; function share(result){ }; WeixinApi.ready(function(Api) { // 分享的回调 var wxCallbacks = { ready : function() { },cancel : function(resp) { },fail : function(resp) { },confirm : function(resp) { },all : function(resp) { } }; Api.sharetoFriend(wxData,wxCallbacks); Api.sharetoTimeline(wxData,wxCallbacks); Api.sharetoWeibo(wxData,wxCallbacks); }); </script>
效果:
试玩地址:http://iloveyoulhx.sinaapp.com/ReactionTime
源码地址:https://github.com/iloster/ReactionTime
cocos-js web开发泡泡龙游戏【一 加载游戏场景】
哀家发现一个游戏如果不记录(复习)一下的话,不算真正记在脑子里了,也可以理解为我是一个手写记忆型。
我目前的水平,对cocos2d-x有了一些了解,对cocos2d-js没有接触过,看了一下泡泡龙的视频。但是两者是一个妈妈生的,很多东西都是相同的,就好理解的许多,我仅对cocos2d-js的内容多做一些记录。
开始。
一。加载游戏场景
打开刚刚下载的cocos2d-js的时候里面的东西少得可怜,HelloWorld.png,还有一个json文件,一个index文件,一个coco2d-js的js,第一步就copy到我的编译器上了。
cut掉index文件里关于js的代码,建立一个main.js文件,copy进去。
现在的index文件
<!DOCTYPE html> <html> <head> <title>Hello Cocos2d-JS</title> <script type="text/javascript" src="js/cocos2d-js-v3.3-lite.js" charset="UTF-8"></script> </head> <body> <canvas id="gameCanvas" width="360px" height="640px"></canvas> <script type="text/javascript" src="js/main.js"></script> </body> </html>
main.js文件
window.onload = function(){ cc.game.onStart = function(){ //load resources cc.LoaderScene.preload(["HelloWorld.png"],function () { var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create("HelloWorld.png"); sprite.setPosition(size.width / 2,size.height / 2); sprite.setScale(0.8); this.addChild(sprite,0); var label = cc.LabelTTF.create("Hello World","Arial",40); label.setPosition(size.width / 2,size.height / 2); this.addChild(label,1); } }); cc.director.runScene(new MyScene()); },this); }; cc.game.run("gameCanvas"); };
cc.LoaderScene.preload(["HelloWorld.png"] 是指在场景加载之前预加载游戏资源,这里的资源就只有一张HelloWorld.png图片。
extend函数是干嘛的。我一如了cocos2d文件夹到工程里,ctrl+鼠标左键点进去看了看:它其中一项内容是把prototype封装在里面了,没有框架的时候,prototype是对象实例化的过程,那么这个extend就是创建Node的入口函数吧。
onEnter:function () { this._super(); var size = director.getWinSize(); sprite = Sprite.create("HelloWorld.png"); sprite.setPosition(size.width / 2,height / 2); setScale(0.8); this.addChild(sprite,0); label = LabelTTF.create("Hello World",0)">"Arial",255)">40); label.2); label,255)">1); }这个函数是cocos2d-x中移植来的吧,没什么区别,this._super();对象的父级对象初始化。cc.getWinSize();获取屏幕宽高。"HelloWorld.png"); 建立一个精灵图片 2);设置位置 0.8); 设置大小0); 添加到层中LabelTTF.create(1); 创建文本,大小,添加。
后来建立了一个StartScene类,把extend直接cut过去。在main.js里extend位置放一句话cc.director.runScene(new StartScene()); 创建一个场景把它在main.js中运行。这样就拥有了游戏场景类。为了资源管理问题。自己写了一个recourse.js类,模版代码如下var res={ Start_BG:"res/StartScene.jpg",Play_BG:"res/background4.jpg",Bubble_0:"res/bubble_0.png",Bubble_1:"res/bubble_1.png",Bubble_2:"res/bubble_2.png",Bubble_3:"res/bubble_3.png",Bubble_4:"res/bubble_4.png",Bubble_5:"res/bubble_5.png",Bubble_6:"res/bubble_6.png",Bubble_7:"res/bubble_7.png",Start_Btn:"res/rate_app_button.png",Shooter:"res/bubble_shooter.png" }; //把所有的图片push到数组里一起加载 var g_resources=[]; for(var i in res){ g_resources.push(res[i]); }目的就是在预加载游戏资源的时候直接加载这个resources类里的资源,避免游戏过程中因为家在资源而出现卡顿的问题,影响用户的游戏体验。
在StartScene类中就直接加载res中的Start_BG 图片啦。
//开始页面 var StartScene = cc.Scene.extend({ onEnter: function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create(res.Start_BG); sprite.setPosition(size.width / 2,size.height / 2); sprite.setScale(0.8); this.addChild(sprite,0); });
后来在最后又加了一个按钮:
var startItem = new cc.MenuItemImage( res.Start_Btn,res.Start_Btn,function () { cc.log("click"); cc.director.runScene( new BubbleScene()); } ); startItem.attr( { x:size.width/2,y:size.height/2-100,anchorX:0.5,anchorY:0.5 } ); var menu = new cc.Menu(startItem); menu.x=0; menu.y=0; this.addChild(menu);
与cocos2d-x的代码基本一致,MenuItemImage一个小按钮先。Menu(startItem);在加到menu里面统一管理。
呈现的结果就是
Cocos2d 卡牌塔防 游戏 cocos2d-x游戏开发之旅 第14 15 16 章 源代码调试 注意点 出现无法打开包括文件:“cocos2d.h”: No such file or direct
Cocos2d 卡牌塔防 游戏 cocos2d-x游戏开发之旅 第14 15 16 章 源代码调试 注意点
出现无法打开包括文件:“cocos2d.h”: No such file or directory
第一步:把书中源代码文件夹拷贝到以下目录。
打开此文件夹后,显示如下:
用VS2012打开proj.win32里边的Chapter16_2_CardDefence08.win32.vcxproj,按下图打开:
第二步:在附加包含目录中,添加如下代码:
如果出现fatalerror C1083: 无法打开包括文件:“cocos2d.h”:No such file or directory
解决方法如下:选择项目属性--》C/C++--》附件包含目录设置为:
复制:$(ProjectDir)..\..\..\cocos2dx;$(ProjectDir)..\..\..\cocos2dx\include;$(ProjectDir)..\..\..\cocos2dx\kazmath\include;$(ProjectDir)..\..\..\cocos2dx\platform\win32;$(ProjectDir)..\..\..\cocos2dx\platform\third_party\win32\OGLES;..\Classes;%(AdditionalIncludeDirectories);
同时注意把E:\cocos2d-x-2.2.3\extensions
E:\cocos2d-x-2.2.3\cocosDenshion\android
E:\ cocos2d-x-2.2.3\cocos2dx\platform\third_party\win32\libraries
加到C/C++--》附件包含目录中去。
第三步:把E:\cocos2d-x-2.2.3\Debug.win32下的所有lib文件和dll文件拷贝至自己项目的Debug.win32下面。
最终运行成功画面如下:
Cocos2d-x 3.2 大富翁游戏项目开发-第二十九部分 游戏配音
我从大富翁里提取出来里面的wav音效文件,放到我们的游戏中以增加趣味性,仅供学习研究之用
1、修改AppDelegate.cpp文件
// This function will be called when the app is inactive. When comes a phone call,it's be invoked too void AppDelegate::applicationDidEnterBackground() { Director::getInstance()->stopAnimation(); // if you use SimpleAudioEngine,it must be pause //后台暂停 SimpleAudioEngine::getInstance()->pauseBackgroundMusic(); } // this function will be called when the app is active again void AppDelegate::applicationWillEnterForeground() { Director::getInstance()->startAnimation(); // if you use SimpleAudioEngine,it must resume here //恢复播放 SimpleAudioEngine::getInstance()->resumeBackgroundMusic(); }
2、在resources 目录下新建sound文件夹,存放游戏声音文件
角色的声音文件定义到ConstUtil.h文件中,大体如下:
#define P1_DEYIDEYITIAN "sound/byelottery.wav"//拜拜 祝您中奖 #define P1_need1000 "sound/need1000.wav"//只要1000元 #define P1_select_lottery "sound/select_lottery.wav"//请圈选你要购买的彩票 #define P1_meirendejiang "sound/meirendejiang.wav"//sorry 本月份没有人得奖 #define P1_xiwangshini "sound/xiwangshini.wav"//希望下次得奖者就是您 #define P1_Speaking_00181 "sound/Speaking_00181.wav"//投资获利 #define P1_Speaking_00182 "sound/Speaking_00182.wav"//投资失败
角色相关声音大体依据如下内容进行分类定义:
//交过路费声音
//抢夺别人地块
//房屋被抢夺
//房屋被摧毁
//摧毁别人房屋
//螃蟹伤人
//看到别人住院
//收取过路费
//升级房子
//不交过路费
//买地
//捡到珍珠
//对方被罚收税
例如:角色1的文件定义
//交过路费声音 #define P1_Speaking_00435 "sound/Speaking_00435.wav"//oh 哈利路亚 #define P1_Speaking_00461 "sound/Speaking_00461.wav"//oh 我的血汗钱 #define P1_Speaking_00475 "sound/Speaking_00475.wav"//算了算了 老子有的是钱 #define P1_Speaking_01060 "sound/Speaking_01060.wav"//老本都快没了 #define P1_Speaking_001062 "sound/Speaking_001062.wav"//拿去了不用找了 //抢夺别人地块 #define P1_Speaking_00429 "sound/Speaking_00429.wav"//让我把他据为己有 //房屋被抢夺 #define P1_Speaking_00430 "sound/Speaking_00430.wav"//黄金地段 让给你 #define P1_Speaking_00464 "sound/Speaking_00464.wav"//太不给面子了 #define P1_Speaking_00469 "sound/Speaking_00469.wav"//你皮子痒啊 #define P1_Speaking_00470 "sound/Speaking_00470.wav"//竟敢在太岁头上动土 #define P1_Speaking_00476 "sound/Speaking_00476.wav"//算你狠 //房屋被摧毁 #define P1_Speaking_00462 "sound/Speaking_00462.wav"//好大的胆子 #define P1_Speaking_00463 "sound/Speaking_00463.wav"//谁敢动我的地 #define P1_Speaking_00466 "sound/Speaking_00466.wav"//竟敢破坏我的好事 #define P1_Speaking_00468 "sound/Speaking_00468.wav"//拆的还真干净 #define P1_Speaking_00474 "sound/Speaking_00474.wav"//你有没有搞错啊 #define P1_Speaking_001061 "sound/Speaking_001061.wav"//真没良心 //摧毁别人房屋 #define P1_Speaking_00433 "sound/Speaking_00433.wav"//不必谢我 #define P1_Speaking_00437 "sound/Speaking_00437.wav"//全部夷为平地 //螃蟹伤人 #define P1_Speaking_00449 "sound/Speaking_00449.wav"//快来帮我把 #define P1_Speaking_01054 "sound/Speaking_01054.wav"//我惨了 #define P1_Speaking_01055 "sound/Speaking_01055.wav"//哎呦喂啊 #define P1_Speaking_001071 "sound/Speaking_001071.wav"//我不要打针 //看到别人住院 #define P1_Speaking_001073 "sound/Speaking_001073.wav"//别闹了 //收取过路费 #define P1_Speaking_00453 "sound/Speaking_00453.wav"//小本经营 概不赊欠 #define P1_Speaking_01059 "sound/Speaking_01059.wav"//蝇头小利 #define P1_Speaking_01057 "sound/Speaking_01057.wav"//这是我应得的 //升级房子 #define P1_Speaking_01051 "sound/Speaking_01051.wav"//别嫉妒我 #define P1_Speaking_001066 "sound/Speaking_001066.wav"//我真佩服自己 //不交过路费 #define P1_Speaking_00446 "sound/Speaking_00446.wav"//有钱也不给你 #define P1_Speaking_00477 "sound/Speaking_00477.wav"//可别想占我便宜啊 //买地 #define P1_Speaking_00458 "sound/Speaking_00458.wav"//盖什么好呢 #define P1_Speaking_001067 "sound/Speaking_001067.wav"//我是个大地主 //捡到珍珠 #define P1_Speaking_01052 "sound/Speaking_01052.wav"//鸿运当头 #define P1_Speaking_001063 "sound/Speaking_001063.wav"//上帝保佑 //对方被罚收税 #define P1_Speaking_00452 "sound/Speaking_00452.wav"//别想偷漏税
3、
根据声音的分类把文件名称放入到Vector中,然后根据场景随机从Vector中取出声音进行播放。
在GameBaseScene.cpp的initAudioEffect方法中,据声音的分类把文件名称放入到Vector中
void GameBaseScene::initAudioEffect() { ......... player2EffectVec_1.pushBack(String::create(P2_SPEAKING01)); player2EffectVec_1.pushBack(String::create(P2_QISIWOLE)); player2EffectVec_1.pushBack(String::create(P2_XINHAOKONGA)); player2EffectVec_1.pushBack(String::create(P2_BUHUIBA)); player2EffectVec_1.pushBack(String::create(P2_PAYHIGH)); player2EffectVec_1.pushBack(String::create(P2_QIANGQIANA)); player2EffectVec_1.pushBack(String::create(P2_HEBAOCHUXIE)); .......... }在Util.cpp中定义声音播放方法,根据声音开关设置,进行声音的播放
void Util::playAudioEffect(const char* effectName,bool isLoop) { bool music_on = UserDefault::getInstance()->getBoolForKey(MUSIC_ON_KEY,true); if(music_on) { CocosDenshion::SimpleAudioEngine::getInstance()->playEffect(effectName,isLoop); } }
//随机从Vector中取出声音进行播放
void Util::playAudioEffectRandom(Vector<String*> effectVec,bool isLoop) { playAudioEffect(effectVec.at(rand() % effectVec.size())->getCString(),isLoop); } void Util::stopAudioPlay() { CocosDenshion::SimpleAudioEngine::getInstance()->stopBackgroundMusic(); CocosDenshion::SimpleAudioEngine::getInstance()->stopAllEffects(); }
4、添加背景音乐,共3首背景音乐,随机播放
void GameBaseScene::initAudioEffect() { bgMusicVector.push_back(BG01_MP3); bgMusicVector.push_back(BG02_MP3); bgMusicVector.push_back(BG03_MP3); for (int i = 0; i<bgMusicVector.size(); i++) { CocosDenshion::SimpleAudioEngine::getInstance()->preloadBackgroundMusic(bgMusicVector.at(i)); } this->schedule(schedule_selector(GameBaseScene::playerBgMusic),5.0f); ..... }
5、角色对话相关的音效,就是根据具体场景,添加相应的音效播放就可以了
关于音乐音效的比较简单,可以参考 http://cn.cocos2d-x.org/tutorial/show?id=2448
这篇文章http://cn.cocos2d-x.org/tutorial/show?id=2352 ,里面的转盘界面效果做得挺好,稍微修改一下,拿到我们大富翁中来吧。
代码同下一节一并发布.
关于cocos-js web开发泡泡龙游戏【二 生成游戏所有元素】和经典的泡泡龙游戏源码的问题我们已经讲解完毕,感谢您的阅读,如果还想了解更多关于(cocos2d-js游戏)测试你的反应速度----------游戏优化(下)、cocos-js web开发泡泡龙游戏【一 加载游戏场景】、Cocos2d 卡牌塔防 游戏 cocos2d-x游戏开发之旅 第14 15 16 章 源代码调试 注意点 出现无法打开包括文件:“cocos2d.h”: No such file or direct、Cocos2d-x 3.2 大富翁游戏项目开发-第二十九部分 游戏配音等相关内容,可以在本站寻找。
本文标签: