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 = 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); }这个函数是cocos2d-x中移植来的吧，没什么区别，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); 创建文本，大小，添加。后来建立了一个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的代码基本一致，cc.MenuItemImage一个小按钮先。cc.Menu(startItem);在加到menu里面统一管理。呈现的结果就是