初学cocos2d html5

初学 cocos2d-html5

<canvas id="gameCanvas" width="320" height="480"></canvas> 设置窗口大小

<link rel="icon" type="image/GIF" href="res/favicon.ico"/>设置ico

<Meta name="viewport" content="user-scalable=no"/>

<canvas id="gameCanvas" width="320" height="480"></canvas>初始化游戏界面大小(后面可变)

适配

cc.view.adjustViewPort(true);

cc.view.setDesignResolutionSize(320,480,cc.ResolutionPolicy.SHOW_ALL);

cc.view.resizeWithbrowserSize(true);

cc.director.setProjection(cc.Director.PROJECTION_2D);

模板文件夹中要添加 frameworks 才能正常运行

cc.LoaderScene.preload(g_resources,function () {

cc.director.runScene(new HelloWorldScene());

},this); 会显示加载进度

ctor:function () { 构造函数

打开project.json，在jsList字段加入StartScene.js的路径。

cc.Scene.extend是Cocos2d-JS提供的Scene继承方法

创建场景

var HelloWorldScene = cc.Scene.extend({

onEnter:function () {

this._super();

var layer = new HelloWorldLayer();

this.addChild(layer);

}

});

cc.director.runScene(new cc.TransitionFade(1.2,scene));

创建层

var HelloWorldLayer = cc.Layer.extend({

sprite:null,

ctor:function () {

创建标签

var _label = new cc.LabelTTF("hellow world","",38);

创建精灵 设置属性

this.sprite = new cc.Sprite(res.HelloWorld_png);

this.sprite.attr({

x: size.width / 2,

y: size.height / 2,

scale: 0.5,

rotation: 180

});

执行动作

this.sprite.runAction(

cc.sequence(

cc.rotateto(2,0),

cc.scaleto(2,1,1)

)

);

helloLabel.runAction(

cc.spawn(

cc.moveBy(2.5,cc.p(0,size.height - 40)),

cc.tintTo(2.5,255,125,0)

)

);

播放声音

cc.audioEngine.setMusicVolume(0.7);

cc.audioEngine.playMusic(res.mainMainMusic_mp3,true);

cc.audioEngine.stopMusic();

cc.audioEngine.stopAllEffects();

创建菜单按钮

var newGame = new cc.MenuItemSprite(newGamenormal,newGameSelected,newGamedisabled,function () {

this.onButtonEffect();

//this.onNewGame();

flareEffect(flare,this,this.onNewGame);

}.bind(this));

var gameSettings = new cc.MenuItemSprite(gameSettingsnormal,gameSettingsSelected,gameSettingsdisabled,this.onSettings,this);

var about = new cc.MenuItemSprite(aboutnormal,aboutSelected,aboutdisabled,this.onAbout,this);

var menu = new cc.Menu(newGame,gameSettings,about);

menu.alignItemsverticallyWithPadding(10);

this.addChild(menu,2);

——————————————

var item1 = new cc.MenuItemToggle(

new cc.MenuItemFont("On"),

new cc.MenuItemFont("Off") );

item1.setCallback(this.onSoundControl );

var state = MW.soUND ? 0 : 1;

item1.setSelectedindex(state);

创建定时器

this.schedule(this.update,0.1);

update:function () {}

随机数

Math.random() * winSize.width;

创建点坐标

cc.p(x,y);

使用纹理缓存

cc.spriteFrameCache.addSpriteFrames(res.textureTransparentPack_plist);

var cacheImage = cc.textureCache.addImage(res.menuTitle_png);

var title = new cc.Sprite(cacheImage,cc.rect(0,134,34));

用户事件

// accept touch Now!

if (cc.sys.capabilities.hasOwnProperty('keyboard'))

cc.eventManager.addListener({

event: cc.EventListener.KEYBOARD,

onKeypressed:function (key,event) {

MW.KEYS[key] = true;

},

onkeyreleased:function (key,event) {

MW.KEYS[key] = false;

}

},this);

if ('mouse' in cc.sys.capabilities)

cc.eventManager.addListener({

event: cc.EventListener.MOUSE,

onMouseMove: function(event){

if(event.getButton() == cc.EventMouse.BUTTON_LEFT)

event.getCurrentTarget().processEvent(event);

}

},this);

if (cc.sys.capabilities.hasOwnProperty('touches')){

cc.eventManager.addListener({

prevTouchId: -1,

event: cc.EventListener.TOUCH_ALL_AT_ONCE,

ontouchesMoved:function (touches,event) {

var touch = touches[0];

if (this.prevTouchId != touch.getId())

this.prevTouchId = touch.getId();

else event.getCurrentTarget().processEvent(touches[0]);

}

},this);

}

if( 'touches' in cc.sys.capabilities )

cc.eventManager.addListener(cc.EventListener.create({

event: cc.EventListener.TOUCH_ALL_AT_ONCE,

ontouchesEnded:function (touches,event) {

if (touches.length <= 0)

return;

event.getCurrentTarget().moveSprite(touches[0].getLocation());

}

}),this);

else if ('mouse' in cc.sys.capabilities )

cc.eventManager.addListener({

event: cc.EventListener.MOUSE,

onmouseup: function (event) {

event.getCurrentTarget().moveSprite(event.getLocation());

}

},this);

精灵触摸

ctor: function(){

this._super();

cc.eventManager.addListener({

event: cc.EventListener.TOUCH_ONE_BY_ONE,

swallowtouches: true,

onTouchBegan: this.onTouchBegan,

onTouchMoved: this.onTouchMoved,

onTouchEnded: this.onTouchEnded

},this);

},

onTouchBegan:function (touch,event) {

var target = event.getCurrentTarget();

if (target._state != PADDLE_STATE_UNGRABbed) return false;

if (!target.containsTouchLocation(touch)) return false;

target._state = PADDLE_STATE_GRABbed;

return true;

},

onTouchMoved:function (touch,event) {

var target = event.getCurrentTarget();

// If it weren't for the Touchdispatcher,you would need to keep a reference

// to the touch from touchBegan and check that the current touch is the same

// as that one.

// Actually,it would be even more complicated since in the Cocos dispatcher

// you get Array instead of 1 cc.Touch,so you'd need to loop through the set

// in each touchXXX method.

cc.assert(target._state == PADDLE_STATE_GRABbed,"Paddle - Unexpected state!");

var touchPoint = touch.getLocation();

//touchPoint = cc.director.convertToGL( touchPoint );

target.x = touchPoint.x;

},

onTouchEnded:function (touch,event) {

var target = event.getCurrentTarget();

cc.assert(target._state == PADDLE_STATE_GRABbed,"Paddle - Unexpected state!");

target._state = PADDLE_STATE_UNGRABbed;

},

拆分字符串

var str="123,4567,89,0";
var a=str.split(",");
alert(a.length);//4数组长度为4
alert(a[0]);
return true;

字符串转json

1. functionConvertToJsonForJs(){
2. //vartestJson="{name:'小强',age:16}";(支持)
3. //vartestJson="{'name':'小强','age':16}";（支持）
4. vartestJson='{"name":"小强","age":16}';
5. //testJson=eval(testJson);//错误的转换方式
6. testJson=eval("("+testJson+")");
7. alert(testJson.name);
8. }