失眠网 > cocos-js web开发泡泡龙游戏【一加载游戏场景】

cocos-js web开发泡泡龙游戏【一加载游戏场景】

时间：2023-10-08 12:52:16

哀家发现一个游戏如果不记录（复习）一下的话，不算真正记在脑子里了，也可以理解为我是一个手写记忆型。

我目前的水平，对cocos2d-x有了一些了解，对cocos2d-js没有接触过，看了一下泡泡龙的视频。但是两者是一个妈妈生的，很多东西都是相同的，就好理解的许多，我仅对cocos2d-js的内容多做一些记录。

开始。

一。加载游戏场景

打开刚刚下载的cocos2d-js的时候里面的东西少得可怜，HelloWorld.png ,还有一个json文件，一个index文件，一个coco2d-js的js，第一步就copy到我的编译器上了。

cut掉index文件里关于js的代码，建立一个main.js文件，copy进去。

现在的index文件

<!DOCTYPEhtml><html><head><title>Hello Cocos2d-JS</title><scripttype="text/javascript"src="js/cocos2d-js-v3.3-lite.js"charset="UTF-8"></script></head><body><canvasid="gameCanvas"width="360px"height="640px"></canvas><scripttype="text/javascript"src="js/main.js"></script></body></html>

main.js文件

window.onload=function(){cc.game.onStart=function(){//load resourcescc.LoaderScene.preload(["HelloWorld.png"],function() {varMyScene =cc.Scene.extend({onEnter:function() {this._super();varsize =cc.director.getWinSize();varsprite =cc.Sprite.create("HelloWorld.png");sprite.setPosition(size.width/ 2, size.height/ 2);sprite.setScale(0.8);this.addChild(sprite, 0);varlabel =cc.LabelTTF.create("Hello World","Arial", 40);label.setPosition(size.width/ 2, size.height/ 2);this.addChild(label, 1);}});cc.director.runScene(newMyScene());},this);};cc.game.run("gameCanvas");};

cc.LoaderScene.preload(["HelloWorld.png"] 是指在场景加载之前预加载游戏资源，这里的资源就只有一张HelloWorld.png图片。

extend函数是干嘛的。我一如了cocos2d文件夹到工程里，ctrl+鼠标左键点进去看了看：它其中一项内容是把prototype封装在里面了，没有框架的时候，prototype是对象实例化的过程，那么这个extend就是创建Node的入口函数吧。

onEnter:function() {this._super();varsize =cc.director.getWinSize();varsprite =cc.Sprite.create("HelloWorld.png");sprite.setPosition(size.width/ 2, size.height/ 2);sprite.setScale(0.8);this.addChild(sprite, 0);varlabel =cc.LabelTTF.create("Hello World","Arial", 40);label.setPosition(size.width/ 2, size.height/ 2);this.addChild(label, 1);}

这个函数是cocos2d-x中移植来的吧，没什么区别，this._super();对象的父级对象初始化。

varsize =cc.director.getWinSize();获取屏幕宽高。

varsprite =cc.Sprite.create("HelloWorld.png"); 建立一个精灵图片sprite.setPosition(size.width/ 2, size.height/ 2);设置位置sprite.setScale(0.8); 设置大小

this.addChild(sprite, 0); 添加到层中

varlabel =cc.LabelTTF.create("Hello World","Arial", 40);label.setPosition(size.width/ 2, size.height/ 2);this.addChild(label, 1); 创建文本，大小，添加。

后来建立了一个StartScene类，把extend直接cut过去。在main.js里extend位置放一句话

cc.director.runScene(newStartScene()); 创建一个场景把它在main.js中运行。

这样就拥有了游戏场景类。

为了资源管理问题。自己写了一个recourse.js类，模版代码如下

varres={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到数组里一起加载varg_resources=[];for(variinres){g_resources.push(res[i]);}

目的就是在预加载游戏资源的时候直接加载这个resources类里的资源，避免游戏过程中因为家在资源而出现卡顿的问题，影响用户的游戏体验。

在StartScene类中就直接加载res中的Start_BG 图片啦。

//开始页面varStartScene=cc.Scene.extend({onEnter:function() {this._super();varsize =cc.director.getWinSize();varsprite =cc.Sprite.create(res.Start_BG);sprite.setPosition(size.width/ 2, size.height/ 2);sprite.setScale(0.8);this.addChild(sprite, 0);});

后来在最后又加了一个按钮：

varstartItem =newcc.MenuItemImage(res.Start_Btn,res.Start_Btn,function() {cc.log("click");cc.director.runScene(newBubbleScene());});startItem.attr({x:size.width/2,y:size.height/2-100,anchorX:0.5,anchorY:0.5 });varmenu =newcc.Menu(startItem);menu.x=0;menu.y=0;this.addChild(menu);