如何用CocosCreator實現(xiàn)射擊小游戲

更新時間：2021年04月14日 10:25:24 作者：戰(zhàn) 勝

這篇文章主要介紹了如何用CocosCreator實現(xiàn)射擊小游戲，此游戲難度不大，僅作為入門的練手小游戲，一小時就能完成，里面用到的知識很常用，喜歡游戲的同學，可以參考下

分析下制作步驟：

1. 準備好資源，搭建場景

資源的話可以自己到網(wǎng)上找，也可以直接用我的也行；創(chuàng)建好相應文件夾，把資源放到res文件夾下；

搭建場景：
第一步:創(chuàng)建一個單色精靈(Script) bg 背景, 設置好顏色，加一個Widget組件，使其充滿屏幕；

第二步：在bg節(jié)點下創(chuàng)建top和button空節(jié)點作為頂與底部，然后在兩個空節(jié)點加入帶刺的節(jié)點（直接將圖片拖到top層級管理器就可以），現(xiàn)在我們需要給top與button節(jié)點添加一個Layout組件,屬性設置如圖，這樣可以看到屏幕上下都有刺了。

第三步：將玩家小人、子彈、敵機同樣的方法加入到場景中，再創(chuàng)建一個Label節(jié)點用來顯示分數(shù)，調節(jié)一下位置；

2. 代碼控制游戲

第一步：創(chuàng)建一個game腳本，掛載到dg節(jié)點上；

第二步：編輯代碼，在 properties添加屬性，用來關聯(lián)玩家、子彈、敵人節(jié)點，再編輯器關聯(lián)；

第三步：代碼邏輯控制，包括初始化玩家、子彈、敵人；注冊監(jiān)聽事件；寫動作函數(shù)；計分判斷等；

全部代碼：

cc.Class({
    extends: cc.Component,

    properties: {
        playerNode: cc.Node,
        enemyNode: cc.Node,
        fireNode: cc.Node,
        scoreNode: cc.Label,
    },
    
     onLoad () {
        this.playLoad();
        this.fireLoad();
        this.enemyLoad();
         this.node.on("touchstart",this.fire,this);
         
     },

     update (dt) {
          if(Math.abs(this.fireNode.y-this.enemyNode.y)<(this.fireNode.height/3+this.enemyNode.height/3)
            &&Math.abs(this.fireNode.x-this.enemyNode.x)<(this.fireNode.width/3+this.enemyNode.width/3)){
              console.log("擊敗敵機");
              this.scoreNode.string= ++this.score;//擊中得分
            this.fireNode.stopAction(this.fireAction);
            this.enemyNode.stopAction(this.enemyAction);
            this.enemyNode.active=false;
            this.fireNode.active=false;
            this.fireLoad();//初始化子彈
            this.enemyLoad();// 初始化敵機
          }

     },

     // 關閉事件監(jiān)聽
     onDestroy(){
        this.node.off("touchstart",this.fire,this);
     },
    // 初始玩家
    playLoad(){
        this.score=0;
        this.playerNode.y=-cc.winSize.height/4;
        
    },
    //初始化子彈
    fireLoad(){
        this.fireNode.active=true;
        this.isFire=false;
        this.fireNode.x=this.playerNode.x;
        this.fireNode.y=this.playerNode.y+this.playerNode.height;
    },
    // 初始化敵機
    enemyLoad(){
        this.enemyNode.active=true;
        this.enemyNode.x=Math.random()* cc.winSize.width;
        this.enemyNode.y=cc.winSize.height/3;
        let x=cc.winSize.width/2-this.enemyNode.width/2;
        let y=Math.random()* cc.winSize.height/4;
        let seq=cc.repeatForever(cc.sequence(cc.moveTo(1.5,cc.v2(-x,y)),cc.moveTo(1.5,cc.v2(x,y))));
        
        this.enemyAction=this.enemyNode.runAction(seq);
    },
    // 死亡 重新加載游戲
    dear(){
        console.log("死亡");
        cc.director.loadScene("game_scenes");
    },


    // 發(fā)射子彈
     fire(){
         if(this.isFire) return;
         this.isFire=true;
        console.log("開始發(fā)射");
         var fireaction=cc.sequence(
             cc.moveTo(1,cc.v2(this.playerNode.x,cc.winSize.height/2)),
             cc.callFunc(()=>{
                this.dear();
            }));
        this.fireAction=this.fireNode.runAction(fireaction);
        console.log("結束發(fā)射");
     }

});