本教程主要通過搭建一個橫版搖桿八方向移動的實例，讓大家如何用Cocos2dx-Js來做一款
游戲，從基礎了解Cocos2dx-Js的基本實現原理，從創建工程，到各個知識點的梳理。

教程分為上下兩講：

上講有2個小節：

1，工程的創建；

2，Cocos2dx-Js目錄及Cocos2dx運行原理；

下講有2個小節：

1，Cocos2dx-Js的事件處理機制；

2，搖桿的、八方向、精靈移動的實現；

?

Js環境搭載傳送門：

【Cocos2d-Js基礎教學（1）JS -Mac配置篇】

?

輕松搭建完后，開始用JS寫一個橫版搖桿動作游戲的Demo，聽起來貌似很高大上~~。

首先要做好幾個準備：

1，角色精靈，我準備了一個骨骼動畫精靈1個，cocosstiduo2.0.6制作的；

2，地圖，也是用cocosstiduo2.0.6制作，生成出MainScene.csb 文件；

3，搖桿的PNG素材；

?

?

下面開始創建一個新的工程GoFighting，創建主場景MainLayer.js文件；

MainLayer繼承BaseLayer.js，BaseLayer中處理這個層基本的頁面處理，包括彈出的新層的遮罩處理；

?

BaseLayer.js：

1 var BaseLayer=cc.Layer.extend({ 2 _bgFrame:null, 3 _notShowAnimation:null, 4 _directorSteps:null, 5 _showAnied:false, 6 init:function(notShowAnimation){ 7 var bret=false; 8 if(this._super()){ 9 //不可刪除 10 var bgFrame = cc.LayerColor(cc.color(0,0,0,200)); 11 this.addChild(bgFrame); 12 this._bgFrame=bgFrame; 13 this._notShowAnimation=notShowAnimation; 14 this.setAnchorPoint(cc.p(0.5,0.5)); 15 this.ignoreAnchorPointForPosition(false); 16 if(!this._notShowAnimation){ 17 this.setScale(0.8); 18 } 19 this.setContentSize(winSize); 20 this.setPosition(cc.p(winSize.width/2,winSize.height/2)); 21 22 cc.eventManager.addListener({ 23 event: cc.EventListener.TOUCH_ONE_BY_ONE, 24 swallowTouches: true, 25 //onTouchMoved: this.onTouchMoved, 26 onTouchBegan: function(){return true;} 27 }, this); 28 29 bret=true; 30 } 31 return bret; 32 }, 33 setBgColor:function(color){ 34 this._bgFrame.setColor(color); 35 }, 36 37 onEnter:function(){ 38 this._super(); 39 if(!this._notShowAnimation&&!this._showAnied){ 40 var sl=cc.EaseIn.create(cc.ScaleTo.create(0.15,1.1),2); 41 var sl2=cc.ScaleTo.create(0.15,1); 42 var seq=cc.Sequence.create(sl,sl2); 43 this.runAction(seq); 44 this._showAnied=true; 45 } 46 }, 47 48 onExit:function(){ 49 this._super(); 50 MemoryManager.getInstance().releaseMeoryFromOther(); 51 } 52 }); 53 54 BaseLayer.OpenActionFs=function(obj){ 55 obj.setScale(0.8); 56 if(obj!=null){ 57 var sl=cc.EaseIn.create(cc.ScaleTo.create(0.15,1.1),2); 58 var sl2=cc.ScaleTo.create(0.15,1); 59 var seq=cc.Sequence.create(sl,sl2); 60 obj.runAction(seq); 61 } 62 }; View Code

?

首先我們加載主場景必須得背景圖片，而主場景背景圖片由cocosstiduo2.0.6制作，如何綁定呢？

在3.2引擎終目前還不支持直接使用widgetFromBinaryFile方法加載CSB，那么換成另外一種加載創建Node的方式：

ccs.csLoader.createNode(res.MainScene_CSB);

使用該方法需要自己去添加全路徑

/*cocostidio制作的CSB文件加載，注：在3.2引擎終目前還不支持直接使用widgetFromBinaryFile方法加載CSB*/var baseroot = ccs.csLoader.createNode(res.MainScene_CSB);baseroot.setAnchorPoint(cc.p(0.5,0.5));baseroot.setPosition(this.getContentSize().width/2,this.getContentSize().height/2);this.baseroot=baseroot;this.addChild(baseroot,1,9001);BaseLayer.OpenActionFs(baseroot);

?

然后Run看一下效果：

?

然后繼續加載角色的骨骼動畫

//角色骨骼動畫加載var charname = "Char_014_1";var nowcharurl = resRole+charname+".ExportJson";if(jsb.fileUtils.isFileExist(nowcharurl)==true) {cc.log("nowcharurl =" + nowcharurl);ccs.ArmatureDataManager.getInstance().addArmatureFileInfo(nowcharurl);var hero = ccs.Armature.create(charname);this._hero_donghua = hero;hero.setPosition(cc.p(330, 260));hero.getAnimation().play("stand");hero.getAnimation().setMovementEventCallFunc(this.overStand, this);baseroot.addChild(hero, 3,99999);}

?

角色hero有回調，如跑動后停下來的回調：

//移動完后回調overStand:function() {if(this._hero_donghua.getAnimation().getCurrentMovementID()==""){this._hero_donghua.getAnimation().play("stand");}},

?

單單一個角色植入場景是否顯得邏輯太單調，我們可以拖動這個精靈豈不更好，加一個簡單的事件，讓精靈活一點吧！！

//主角監聽 var listener_Role = cc.EventListener.create({event: cc.EventListener.TOUCH_ONE_BY_ONE,swallowTouches: true,onTouchBegan: function (touch, event) {var target = event.getCurrentTarget();var locationInNode = target.convertToNodeSpace(touch.getLocation());var s = target.getContentSize();var rect = cc.rect(0, 0, s.width, s.height);if (cc.rectContainsPoint(rect, locationInNode)) {cc.log("sprite began... x = " + locationInNode.x + ", y = " + locationInNode.y);target.setOpacity(180);target.getAnimation().play("move");return true;}return false;},onTouchMoved: function (touch, event) {var target = event.getCurrentTarget();var delta = touch.getDelta();target.x += delta.x;target.y += delta.y;},onTouchEnded: function (touch, event) {var target = event.getCurrentTarget();cc.log("sprite onTouchesEnded.. ");target.setOpacity(255);target.getAnimation().play("stand");} });

在ctor構造中添加角色事件的注冊方法：

//人物 cc.eventManager.addListener(listener_Role, this._hero_donghua);

?

OK，我們再Run起來看看效果：

還可以拖動的呢！

?

然后，我們繼續實現搖桿模式：

搖桿與事件有關，JS中搖桿須繼承cc.EventListener去創建事件，事件類型cc.EventListener.TOUCH_ONE_BY_ONE（單點觸摸方式）；

看代碼：

//搖桿監聽 var listener_YaoGan = cc.EventListener.create({event: cc.EventListener.TOUCH_ONE_BY_ONE,swallowTouches: true,onTouchBegan: function (touch, event) {var target = event.getCurrentTarget();var locationInNode = target.convertToNodeSpace(touch.getLocation());//創建搖桿this.sprite_yaogan = new cc.Sprite(res.YaoGan_png);this.sprite_yaogan.attr({x: locationInNode.x,y: locationInNode.y});target.addChild(this.sprite_yaogan, 4,90099);//創建搖桿點this.sprite_yaogan_dian = new cc.Sprite(res.YaoGan_Dian_png);this.sprite_yaogan_dian.attr({x: locationInNode.x,y: locationInNode.y});target.addChild(this.sprite_yaogan_dian, 4,90999);return true;},onTouchMoved: function (touch, event) {//搖桿點var target = event.getCurrentTarget();var sp_dian = target.getChildByTag(90999);var sp_yaoganbd = target.getChildByTag(90099);var sp_hero = target.getChildByTag(99999);//搖起來if(sp_dian!=null&&sp_yaoganbd!=null){var p_dian = sp_yaoganbd.getPosition();var bd_width =sp_yaoganbd.getContentSize().width*0.5;cc.log("bd_width>>=="+bd_width);var point = touch.getLocation();var p_rad = this.getRad(p_dian,point);cc.log("p_rad>>=="+p_rad);//計算兩個圓心之間距離var juli =Math.sqrt(Math.pow((p_dian.x - point.x),2) + Math.pow((p_dian.y - point.y),2));//距離不超過半徑if(juli>=bd_width){cc.log("go111>>>");sp_dian.setPosition(cc.pAdd(this.getAngelePosition(bd_width,p_rad),cc.p(p_dian.x,p_dian.y)));}else{cc.log("go2222>>>");var delta = touch.getDelta();sp_dian.x += delta.x;sp_dian.y += delta.y;}// //判斷方向---四方向 // if(p_rad>=-PI/4&&p_rad<PI/4) // { // R_Direction="right"; // } // else if(p_rad>=PI/4&&p_rad<3*PI/4) // { // R_Direction="up"; // } // else if((p_rad>=3*PI/4&&p_rad<=PI)||(p_rad>=-PI&&p_rad<-3*PI/4)) // { // R_Direction="left"; // } // else if(p_rad>=-3*PI/4&&p_rad<-PI/4) // { // R_Direction="down"; // }//判斷方向---八方向var move_x = parseInt(p_dian.x -point.x);var move_y = parseInt(p_dian.y -point.y);if(move_x>=10&&move_y<=-10){//左上R_Direction = "left_up";}else if(move_x>=10&&move_y>=10){//左下R_Direction = "left_down";}else if(move_x<=-10&&move_y<=-10){//右上R_Direction = "rigth_up";}else if(move_x<=-10&&move_y>=10){//右下R_Direction = "rigth_down";}else if(move_x>-10&&move_x<10&&move_y>0){//下R_Direction = "down";}else if(move_x>-10&&move_x<10&&move_y<0){//上R_Direction = "up";}else if(move_x>0&&move_y>-10&&move_y<10){//左R_Direction = "left";}else if(move_x<0&&move_y>-10&&move_y<10){//右R_Direction = "right";}R_Action="move";cc.log("R_Direction>>>"+R_Direction);}},//獲取半徑坐標getAngelePosition:function(r,angle){return cc.p(r*Math.cos(angle),r*Math.sin(angle));},//判斷兩點之間夾角getRad:function(pos1,pos2){var px1 = pos1.x;var py1 = pos1.y;var px2 = pos2.x;var py2 = pos2.y;//得到兩點x的距離var x = px2 - px1;//得到兩點y的距離var y = py1 - py2;//算出斜邊長度var xie = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));//得到這個角度的余弦值(通過三角函數中的店里：角度余弦值=斜邊/斜邊)var cosAngle = x / xie;//通過反余弦定理獲取到期角度的弧度var rad = Math.acos(cosAngle);//注意：當觸屏的位置Y坐標<搖桿的Y坐標，我們要去反值-0~-180if (py2 < py1){rad = -rad;}return rad;},onTouchEnded: function (touch, event) {var target = event.getCurrentTarget();if(target.getChildByTag(90099)!=null){target.removeChildByTag(90099);}if(target.getChildByTag(90999)!=null){target.removeChildByTag(90999);}R_Action="stand";var sp_hero = target.getChildByTag(99999);sp_hero.getAnimation().play("stand");}});

在上面這個Js類中，包含了幾個方法如，兩點之間夾角的計算公式和最大半徑坐標的計算公式；

因為我們需要在搖桿和搖桿點上面去做坐標處理，計算出夾角來對角色進行坐標位移操作，達到我們所需要的效果

跑起來的搖桿效果如下：

搖桿可以活動了，并且不能超過底下的背景半徑，達到了我們需要的效果，下面就繼續實現搖桿操控精靈移動的功能

可以繼續在onTouchMoved: function (touch, event)事件終寫方法獲取一些判定參數：

//方向 var R_Direction = ""; //動作 var R_Action = "stand"; //移動速度 var R_speed = 4;

繼續看listener_YaoGan類中的方向判斷，我寫了2種角色移動方法：

1，根據PI=3.1415 來計算 ，做了4方向的標識判斷

2，根據坐標差值來計算，做了8方向的標識判斷

OK，兩種方法都可以行，可以自己拓展。

有了標識我們需要啟動一個定時器來執行人物的操作

下面是定時器部分的代碼：

//更新狀態runGame:function(){if(R_Action=="move"){if(this._hero_donghua!=null){if(this._hero_donghua.getAnimation().getCurrentMovementID()!="move"){this._hero_donghua.getAnimation().play("move");}var p_hero_old = this._hero_donghua.getPosition();if(R_Direction=="right"){this._hero_donghua.setScaleX(-1);this._hero_donghua.setPosition(cc.p(p_hero_old.x+R_speed,p_hero_old.y));}else if(R_Direction=="up"){this._hero_donghua.setPosition(cc.p(p_hero_old.x,p_hero_old.y+R_speed));}else if(R_Direction=="left"){this._hero_donghua.setScaleX(1);this._hero_donghua.setPosition(cc.p(p_hero_old.x-R_speed,p_hero_old.y));}else if(R_Direction=="down"){this._hero_donghua.setPosition(cc.p(p_hero_old.x,p_hero_old.y-R_speed));}else if(R_Direction=="left_up"){this._hero_donghua.setScaleX(1);this._hero_donghua.setPosition(cc.p(p_hero_old.x-R_speed,p_hero_old.y+R_speed));}else if(R_Direction=="left_down"){this._hero_donghua.setScaleX(1);this._hero_donghua.setPosition(cc.p(p_hero_old.x-R_speed,p_hero_old.y-R_speed));}else if(R_Direction=="rigth_up"){this._hero_donghua.setScaleX(-1);this._hero_donghua.setPosition(cc.p(p_hero_old.x+R_speed,p_hero_old.y+R_speed));}else if(R_Direction=="rigth_down"){this._hero_donghua.setScaleX(-1);this._hero_donghua.setPosition(cc.p(p_hero_old.x+R_speed,p_hero_old.y-R_speed));}}}}

OK，人物可以根據搖桿八方向的跑動起來了，我們Run起來看看效果，應該很贊！

?

嗯，該Demo就開發完畢了，下面是整個DEMO的下載地址，希望能大家對大家起到幫助；

cocos2d-x 3.2 - JS -橫版搖桿八方向移動DEMO下載地址

自己創建一個新的工程，將ZIP解壓文件拷貝到工程根目錄就可以Run起來，替換main.js和project.json；

?

轉載于:https://www.cnblogs.com/zisou/p/cocos2dx-js_sz1.html

總結

以上是生活随笔為你收集整理的【Cocos2d-Js实战教学（1）横版摇杆八方向移动】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。