cocos2d-html5学习笔记（一）

定义一个场景类
var AboutLayer = cc.Layer.extend({
init:function(){
var bRet = false;
if(this._super()){
从图片加载一个精灵
var sp = cc.Sprite.spriteWithFile(图片相对路径);
var sp = cc.Sprite.spriteWithFile(图片相对路径,cc.RectMake(x,y,w,h));切割图片时的坐标原点为图片的左上角。
设置精灵起始位置为0,cocos中是以左下角为坐标原点的。
sp.setAnchorPoint(cc.PointZero());
将精灵加到该场景中
this.addChild(sp,0,1);第二个参数0表示zOrder,0代表背景吧。第三个参数1表示tag,在场景或者其他容易中可以通过tag去获取精灵元素。

定义一个缓存图片
var cacheImage = cc.TextureCache.sharedTextureCache().addImage(图片相对路径);
从缓存图片定义一个精灵,cc.RectMake(x,y,width,height)方法返回一个矩形,用来切割图片
var title = cc.Sprite.spriteWithTexture(cacheImage,cc.RectMake(x,y,width,height));
将精灵加到场景中
this.addChild(title);

定义一个静态文本标签,实际也是一个精灵,只不过这个精灵是静态的。cc.SizeMake(100,100)表示显示文本的长度和宽度,cc.TextAlignmentLeft表示文字居左对齐,"Arial"表示字体类型,14表示字体大小
var about = cc.LabelTTF.labelWithString("xxxxxxxxx",cc.SizeMake(100,100),cc.TextAlignmentLeft,"Arial",14);
设置标签的中心坐标
about.setPosition(cc.ccp(x,y));
将标签加入到场景中
this.addChild(about);


var label = cc.LabelTTF.labelWithString("Go back", "Arial", 14);
定义菜单项
var back = cc.MenuItemLabel.itemWithLabel(label, this, this.backCallback);
定义菜单
var menu = cc.Menu.menuWithItems(back);
将菜单加入到场景中
this.addChild(menu);

定义newGame按钮的三种不同状态精灵
var newGameNormal = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(0, 0, 126, 33));
            var newGameSelected = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(0, 33, 126, 33));
            var newGameDisabled = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(0, 33 * 2, 126, 33));
用newGame按钮的三种不同状态精灵定义菜单项
var newGame = cc.MenuItemSprite.itemFromNormalSprite(newGameNormal, newGameSelected, newGameDisabled, this, function () {
                this.onButtonEffect();
该方法是一个全局函数，闪光效果，在别的文件中定义好的。
                flareEffect(this, this, this.onNewGame);
            });
定义gameSetting按钮的三种不同状态精灵
            var gameSettingsNormal = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(126, 0, 126, 33));
            var gameSettingsSelected = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(126, 33, 126, 33));
            var gameSettingsDisabled = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(126, 33 * 2, 126, 33));
用gameSettings按钮的三种不同状态精灵定义菜单项
var gameSettings = cc.MenuItemSprite.itemFromNormalSprite(gameSettingsNormal, gameSettingsSelected, gameSettingsDisabled, this, this.onSettings);
定义about按钮的三种不同状态精灵
            var aboutNormal = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(252, 0, 126, 33));
            var aboutSelected = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(252, 33, 126, 33));
            var aboutDisabled = cc.Sprite.spriteWithFile(s_menu, cc.RectMake(252, 33 * 2, 126, 33));
用about按钮的三种不同状态精灵定义菜单项
var about = cc.MenuItemSprite.itemFromNormalSprite(aboutNormal, aboutSelected, aboutDisabled, this, this.onAbout);
用上面的定义的三个菜单项定义一个菜单
var menu = cc.Menu.menuWithItems(newGame, gameSettings, about);
将菜单项垂直排列，间距为10
menu.alignItemsVerticallyWithPadding(10);
如果不调用setPosition方法的话默认会出现在窗口的中心
menu.setPosition(cc.ccp(winSize.width / 2, winSize.height / 2 - 80));
将菜单加入到场景中
this.addChild(menu, 1, 2);

这个应该是每一秒执行一次update函数
this.schedule(this.update, 1);

var tmp = cc.TextureCache.sharedTextureCache().addImage(s_ship01);
            this._ship = cc.Sprite.spriteWithTexture(tmp,cc.RectMake(0, 45, 60, 38));
            this.addChild(this._ship, 0, 4);
            this._ship.setPosition(cc.ccp(Math.random() * winSize.width, 0));
            this._ship.runAction(cc.MoveBy.actionWithDuration(2, cc.ccp(Math.random() * winSize.width, this._ship.getPosition().y + winSize.height + 100)));
}
return bRet;
}
//菜单项点击的回调函数
backCallback:function (pSender) {
//切换到系统菜单场景
        cc.Director.sharedDirector().replaceScene(cc.TransitionFade.transitionWithDuration(1.2,SysMenu.scene()));
    }
点击newGame按钮先执行的方法
onButtonEffect:function(){
        if (global.sound) {
//播放音效
            var s = cc.AudioManager.sharedEngine().playEffect(s_buttonEffect);
        }
    }
});
AboutLayer.node = function(){
var sg = new AboutLayer();
if(sg && sg.init()){
return sg;
}
return null;
}