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里面统一管理。

 
呈现的结果就是

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

一。加载游戏场景

相关推荐

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