Cocos2d-JS开发中的一些小技巧持续更新

1、获取URL中的请求参数的值----此方法接收参数名

 
         functiongetQueryString(name){ 
        
         varreg= 
         new 
         RegExp( 
         "(^|&)" 
         +name+ 
         "=([^&]*)(&|$)" 
         , 
         "i" 
         ); 
        
         varr=window.location.search.substr(1).match(reg); 
        
         if 
         (r!=null) 
         return 
         decodeURIComponent(r[2]); 
        
         null; 
        
         };

2、底图上添加文字---适用于按钮Sprite

7

8

9

10

varMyButtonsprite=cc.Sprite.extend({

 
         ctor:function(fileName,title,fontName,fontSize){ 
        

 
         this 
         ._super(fileName);

 
         vartitleLabel= 
         cc.LabelTTF(title,fontSize);

 
         .addChild(titleLabel); 
        

 
         titleLabel.x= 
         .getContentSize().width/2;

 
         titleLabel.y= 
         .getContentSize().height/2;

}

});

3、远程图片加载

11

12

13

14

15

16

17

loadImgFromUrl:function(target,imgurl,p,tag){

 
         (!imgurl) 
         ;

 
         varself=target; 
        

 
         varloadCb=function(err,img){ 
        

 
         cc.textureCache.addImage(imgurl); 
        

 
         vartexture2d= 
         cc.Texture2D();

 
         texture2d.initWithElement(img); 
        

 
         texture2d.handleLoadedTexture(); 
        

 
         varsp= 
         cc.Sprite();

 
         sp.initWithTexture(texture2d); 
        

 
         self.addChild(sp); 
        

 
         sp.x=p.x; 
        

 
         sp.y=p.y; 
        

 
         sp.tag=tag; 
        

};

 
         cc.loader.loadImg(imgurl,{isCrossOrigin: 
         false 
         },loadCb); 
        

 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
        

4、XMLHttpRequest

varsendRequest=function(url,params,isPost,callback,errorcallback){

 
         (url==null||url== 
         '' 
         ) 
        

;

 
         varxhr=cc.loader.getXMLHttpRequest(); 
        

 
         (isPost){ 
        

 
         xhr.open( 
         "POST" 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,url); 
        

 
         "GET" 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,url);

}

 
         xhr.setRequestHeader( 
         "Content-Type" 
         "application/x-www-form-urlencoded" 
         ); 
        

 
         xhr.onreadystatechange=function(){ 
        

 
         (xhr.readyState==4&&xhr.status==200){ 
        

 
         varresponse=xhr.responseText; 
        

 
         (callback) 
        

 
         callback(response); 
        

 
         else 
         (xhr.readyState==4&&xhr.status!=200){

 
         varresponse=xhr.responseText; 
        

 
         (errorcallback) 
        

 
         errorcallback(response); 
        

}

};

 
         (params==null||params== 
         "" 
         ){ 
        

 
         xhr.send(); 
        

{

 
         xhr.send(params); 
        

}

};

5、JSON解析以及上述第4条的回调方法

varcallback=function(response){

 
         varjsonData=JSON.parse(response); 
        

 
         vardata=jsonData[ 
         "users" 
         ]; 
        

 
         (data){ 
        

 
         alert(data[ 
         "name" 
         ]); 
        

 
         //todosomething

}

};

6、自定义Loading界面

varMyLoaderScene=cc.Scene.extend({

 
         _interval:null, 
        

 
         _length:0, 
        

 
         _count:0, 
        

 
         _label:null, 
        

 
         _className: 
         "MyLoaderScene" 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
        

 
         init:function(){ 
        

 
         varself= 
         ;

 
         //bg 
        

 
         varbgLayer=self._bgLayer=cc.LayerColor.create(cc.color(32,32,255)); 
        

 
         bgLayer.setPosition(cc.visibleRect.bottomLeft); 
        

 
         self.addChild(bgLayer,0); 
        

 
         //loadingpercent 
        

 
         varlabel=self._label=cc.LabelTTF.create( 
         "玩命加载中...0%" 
         "Arial" 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,24); 
        

 
         label.setPosition(cc.pAdd(cc.visibleRect.center,cc.p(0,0))); 
        

 
         label.setColor(cc.color(180,180,180)); 
        

 
         bgLayer.addChild( 
         ._label,10);

 
         return 
         true 
         ; 
        

 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
        

 
         _initStage:function(img,centerPos){ 
        

;

 
         vartexture2d=self._texture2d= 
         cc.Texture2D();

 
         texture2d.initWithElement(img); 
        

 
         texture2d.handleLoadedTexture(); 
        

 
         varlogo=self._logo=cc.Sprite.create(texture2d); 
        

 
         logo.setScale(cc.contentScaleFactor()); 
        

 
         logo.x=centerPos.x; 
        

 
         logo.y=centerPos.y; 
        

 
         self._bgLayer.addChild(logo,10); 
        

 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
        

 
         onEnter:function(){ 
        

;

 
         cc.Node.prototype.onEnter.call(self); 
        

 
         self.schedule(self._startLoading,0.3); 
        

 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
        

 
         onExit:function(){ 
        

 
         cc.Node.prototype.onExit.call( 
         );

 
         vartmpStr= 
         ;

 
         ._label.setString(tmpStr); 
        

 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
        

/**

 
         *initwithresources 
        

 
         *@param{Array}resources 
        

 
         *@param{Function|String}cb 
        

*/

 
         initWithResources:function(resources,cb){ 
        

 
         (typeofresources== 
         "string" 
         )resources=[resources]; 
        

 
         .resources=resources||[]; 
        

 
         .cb=cb; 
        

 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
        

 
         _startLoading:function(){ 
        

;

 
         self.unschedule(self._startLoading); 
        

 
         varres=self.resources; 
        

 
         self._length=res.length; 
        

 
         self._count=0; 
        

 
         cc.loader.load(res,function(result,count){self._count=count;},function(){ 
        

 
         (self.cb) 
        

 
         self.cb(); 
        

});

 
         self.schedule(self._updatePercent); 
        

 
         ottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas, 
        

 
         _updatePercent:function(){ 
        

;

 
         varcount=self._count; 
        

 
         varlength=self._length; 
        

 
         varpercent=(count/length*100)|0; 
        

 
         percent=Math.min(percent,100); 
        

 
         self._label.setString( 
         "玩命加载中..." 
         +percent+ 
         "%" 
         ); 
        

 
         (count>=length)self.unschedule(self._updatePercent); 
        

}

});

 
         MyLoaderScene.preload=function(resources,cb){ 
        

 
         var_myLoaderScene=null; 
        

 
         (!_myLoaderScene){ 
        

 
         _myLoaderScene= 
         MyLoaderScene();

 
         _myLoaderScene.init(); 
        

}

 
         _myLoaderScene.initWithResources(resources,cb); 
        

 
         cc.director.runScene(_myLoaderScene); 
        

 
         _myLoaderScene; 
        

};

7、网页跳转

window.location.href= "http://www.baidu.com"

8、关于进入游戏时黑屏时间较长的处理方法

1）

<bodystyle="padding:0;margin:0;background:#000;">

删除index.html中<body>标签的样式background: #000;

2）按照自己需要添加编译模块修改project.json如

 
         "modules" 
         :[ 
         "core" 
         "actions" 
         "shape-nodes" 
         "labels" 
         "menus" 
         "transitions" 
         "physics" 
         "chipmunk" 
         "gui" 
         ], 
        
 
         
      
     
   

本文由CocoaChina会员happyfhc总结，欢迎大家学习与讨论。

来源网址：http://www.cocoachina.com/bbs/read.php?tid=226079

Cocos2d-JS开发中的一些小技巧持续更新

相关文章