cocoscreator 搭建小游戲

1、 游戲基本介紹

1.1 游戲介紹

• 本游戲主題是探索收集類的 RPG游戲，對于劇情任務沒有太多的設計，是一個自由探索度較高的游戲，

• 人物可通過在地圖上的自由探索獲得寶箱，在野外刷怪獲得經驗進行升級，獲取相應的獎勵，游戲特點是在玩家被擊敗之后將會失去所有的拾取物品，但是會保留當前的hero等級，

• 采用的程式設計語言是 JavaScript 腳本語言，適用于和引擎進行互動，利用 cocos creator 游戲引擎進行游戲外觀的整體實作，內層邏輯由撰寫的腳本進行控制，

1.2 游戲思想

• 主角設定是 hero ，游戲版圖是 迷宮式 的大地圖，通過在一個地圖上 探索收集 裝備，打怪 獲得經驗升級；NPC的設定是靜態的，當hero接近時便會與之進行交談，獲取迷宮的資訊或普通的交談對話；
• monster 和NPC 有一樣的規則設定，但是與hero的唯一互動就是戰斗，
• 當hero接近游戲地圖的傳送點時會進行游戲的傳送，但是會實作進行hero等級的檢測，如果沒有滿足相應的等級要求，則不能進行地圖的傳送，也就是所謂的通關，
• 地圖的周圍有墻體限定，hero不能越過地圖邊界，防止出現穿模現象，
• 在通過某些特定的場景或者是特殊的monster時，會開啟場景的音效設定，包括人物的釋放技能，與NPC的互動等等，

2、 游戲規劃

• 第一步：在確定游戲的整個流程走向之后，便開始針對hero，monster，NPC等進行屬性、行為設計（預先規劃可能會與后面的實作有些許的沖突，最終的效果由后期完善的結果為準），屬性設計完成之后便開始尋找相關的素材貼圖，

• 第二步：對游戲素材進行一個處理，將一型別之類的素材進行打包防止，防止內部資源訪問錯亂，確定主要人物的行走、攻擊動作，各種UI界面的貼圖，按鍵的回應影片，敵人的動作，制作地圖即游戲背景，還有設計與NPC有關的劇情設計，尋找合適的背景音樂，音效等等，游戲的大部分素材此階段完成準備，后期需要的特定素材再進行單獨的處理，圖片的預處理由 ShoeBox、TexturePackerGUI 等圖片處理工具進行，包括動態動作的拆分序列、重新打包成合集圖片等等，

• 第三步：搭建游戲主場景，制作相關的人物預制體，包括技能、怪物等影片制作，

• 第四步：按照游戲設計規劃，進行游戲腳本的撰寫，逐步實作整個游戲的制作，

• 第五步：游戲整體測驗，完善邏輯，修復bug，打包發布，

3、 游戲功能設計

?3.1 地圖設計

??由于是探索式的收集游戲，地圖采取大圖的方式，視圖視窗隨著hero的移動而在整個大背景地圖上進行移動，避免 游戲穿模 的現象發生，在 房屋、城墻、樹木 等應具有物體的物體上添加碰撞檢測，全部設計為靜態的floor層級，當與hero的層級物件進行碰撞時，將靜止hero進行任何方向的位置偏移，也就限制hero的活動范圍，當hero滿足一定的條件后會開啟下一個地圖的通道，可實作場景的切換，地圖間的設定規格一致，

游戲地圖

?3.2 界面設計

??游戲涉及的UI界面不多，主要是系結在hero身上的一個大界面以及一個顯示當前hero所擁有的物品的背包界面，代表hero擁有的 金幣、鉆石的UI，hero等級、血量、藍量、名稱的UI，背包 及設定界面的按鈕UI，以及各類的 游戲物品 ，用戶剛進入游戲時會在主界面進行停留，根據用戶的選擇而進行游戲的具體開展，
游戲界面

登陸界面

?3.3 互動設計

??整個游戲的互動系統都是由hero進行觸發的，hero靠近寶箱時會隨機產生一個寶物被hero所拾取，同時會獲得相應的金幣和鉆石，靠近游戲的NPC時會進行相應的對話交談，遇見monster時可以選擇交戰或者逃 走，戰勝則可獲得hero升級所需的經驗，有幾率掉落稀有的物品，

NPC 互動

?3.4 角色設計

??作為一個RPG游戲，首先的需求便是玩家操控的角色，在此游戲中為一個hero人物，玩家操作此角色在游戲中任意探索，

??玩家對應一個角色，開始游戲，隨著后面關卡的發展，會有不同敵人出現，玩家扮演的hero角色對抗monster，玩家可根據游戲規則進行相應的攻擊玩法，

??給每個角色的屬性：bloodBase(基礎血量)，bloodTime(實時血量), blueBase (基礎藍量)，blueTime(實時藍量)，experice(經驗值)，grade (等級)，attack（攻擊力），property（隨機屬性增強），goal（金幣），diamond（鉆石），這些屬性初始值決定這個角色的生命值、魔法值、經驗值，通過對抗每個屬性值會減少，生命值也會降低，如果生命值為零，則說明游戲失敗，

??HP初始值為 100，BP初始值為 100 ，EXP初始值為 0，需要玩家通過游戲來獲取，游戲中途會掉落寶箱，有可能會有寶物，或其他道具來提升屬性，戰勝monster也會獲得一些獎勵，

• 每個屬性初始值：

  初始屬性	基礎血量	實時血量	基礎藍量	實時藍量	經驗值
  	等級*100	100	等級*100	100	0
  	等級	金幣	鉆石	攻擊	屬性
  	1	0	0	20	1

??說明：

??初始值：HP=100，BP=100，EXP=0

??每升一級提升1個屬性點，屬性點隨機增強hero的各項屬性技能，按照0-0.5之間的偏移變化，游戲為自由隨機機制，屬性會隨機分配，同樣的條件下可能會產生不一樣的結果，玩家可自行探索，

hero

?3.5 敵人設計

??其次需要與主角作戰的敵人，在此游戲中為世界各地的怪物，包括雞怪、鴨怪、狗怪、豬怪以及大龍等，

??敵人其實和玩家操作的角色相同，只不過隨著hero的升級，我們遇到的屬性更加強大，游戲難度會隨之加大，玩家需要根據實際情況進行對戰，合理攻擊并擊敗敵人奪取勝利，

??給每個角色的屬性：bloodBase(基礎血量)，grade(等級)，property（隨機屬性增強），這些屬性初始值決定這個角色的生命值，生命初始值為100，通過對抗屬性值會減少，生命值也會降低，如果怪物生命值為零，說明玩家勝利 ，敵人的生命值一般是不可以增加的，但存在特殊的monster會存在增加生命的技能屬性，而玩家可以使用道具來恢復生命，

• 每個屬性初始值

  角色/屬性	力量	敏捷	血量	智慧
  雞	20	0.2	100	25
  鴨	45	0.2	100	40
  狗	70	0.2	100	60
  豬	80	0.2	100	75
  龍	90	0.4	1000	95

dragon

?3.6 裝備設計

??為了增加游戲性，還需要裝備系統，應分為不同品質，使玩家樂意花時間去刷裝備，增加他們的游戲時間，

??游戲裝備應該有服裝，玩家可以使用獲得的金幣，去購買一些更好看的服飾，裝扮物品，來提升游戲體驗，

??還有道具，玩家可以在游戲開始前，前往商店，使用金幣，購買一些能夠提升技能的裝備，讓自己更加強大對抗敵人，還可以購買一些讓自己恢復的藥品，

??寶箱：玩家可以購買寶箱，然后打開，里面會有隨機物品出現，有可能是錢幣，一份，道具，裝扮，經驗卡，復活卡，等東西，針對不同屬性的恢復藥品，

??玩家所有的東西都可在背包中查看，

bag

4、 游戲程式設計

?4.1 HeroControl.js

游戲的所有線索由hero進行推動，也就是控制hero的腳本控制整個游戲的走向，其他的腳本起到豐富游戲的作用，Hero有一個全域屬性目錄，包括背包屬性、物品屬性等，這一系列的屬性歸整個游戲所共有，可以方便資料的更新處理，

var box = require("BoxControl");

cc.Class({
    extends: cc.Component,
    
    properties: {
        //  播放主鍵
        m_animation : cc.Animation,
        m_sprite : [cc.Sprite],
    },
    //  游戲加載時的函式
    onl oad: function () {
        //  當前hero的移動方向
        this.move = 0;
        //  當前hero的技能標記
        this.kill;
        //  英雄等級標簽
        var nodeGrade = cc.find("Canvas/Main/Hero/name/grade");
        this.gradeString = nodeGrade.getComponent(cc.Label);
        this.gradeString.string = "等級：" + hero.grade;
        //  注冊按鈕事件
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);
        //  hero靜止
        this.m_animation.play("3");
        //  獲取當前的經驗條
        this.experice = cc.find('Canvas/Main/Hero/Experiencebar/Time');
        // 記載金幣鉆石
        this.heroDiamondChange();
        //  獲取本地的技能預制
        this.bone = cc.loader.loadRes("Prefab/bone", cc.Prefab, (err, prefab) => {
            //  加載錯誤則報錯
            if (err) {
                console.error(err);
                return;
            }
            this.newMyPrefab = cc.instantiate(prefab);
            
        });
    },
    //  游戲的幀處理 控制hero的移動
    update: function (dt) {
        this.bloodDetection();
        this.actionJudge();
        if(this.move == 1){
            this.node.x += speed;
        }
        else if(this.move == 2){
            this.node.x += -speed;
        }
        else if(this.move == 3){
            this.node.y += speed;
        }
        else if(this.move == 4){
            this.node.y +=  -speed;
        }
    },
    //  設定代表金幣和鉆石的數量
    heroDiamondChange: function() {
        //  獲取金幣標簽父節點
        var nodegoal = cc.find("Canvas/Main/Hero/buttongoal/New Label");
        //  取得金幣標簽并進行數量設定
        var goal = nodegoal.getComponent(cc.Label);
        goal.string = hero.goal;
        //  獲取鉆石標簽父節點
        var nodediamond = cc.find("Canvas/Main/Hero/buttondiamond/New Label");
        //  取得鉆石標簽并進行數量設定
        var diamond = nodediamond.getComponent(cc.Label);
        diamond.string = hero.diamond;
        //  hero經驗條的變換
        this.expericeChange();
    },
    //  更改播放的影片
    animationChange: function(data){
        if(this.actionJudge()){
            //  右移影片
            if(this.move == 1)
                this.m_animation.play("runr");
            //  左移影片
            else if(this.move == 2)
                this.m_animation.play("runl");
            //  上移影片
            else if(this.move == 3)
                this.m_animation.play("runu");
            //  下移影片
            else if(this.move == 4){
                this.m_animation.play("rund");
            }  
            //  攻擊影片
            else if(this.move == 5){
                this.playingKill();
            }
        }
    },
    //  按鍵按下時的回應函式
    onKeyDown:function(event){
       switch(event.keyCode){
            //  按下D鍵      
            case 68:{
                this.move = 1;
            }
                break;
            //  按下A鍵
            case 65:{
                this.move = 2;
            }
                break;
            //  按下W鍵
            case 87:
                this.move = 3;
                break;
            //  按下S鍵
            case 83:
                this.move = 4;
                break;
            //  按下K鍵
            case 75:
                pickUp = 1;
                break;
            //  按下H鍵
            case 72:
                this.move = 5;
                this.kill = 1;
            break;
            case 74:
                this.move = 6;
            break;
        }
        this.animationChange("");
    },
    //  按鍵彈起時的回應函式
    onKeyUp: function(event){
       switch(event.keyCode){
           case 68:
           break;

           case 65:
           break;

           case 87:
           break;

           case 83:
           break;

           case 75:
           pickUp = 0;
           break;
       }
       this.move = 0;
       this.heroDiamondChange();
    },

    //  檢測是否可以進行影片的播放
    actionJudge: function() {
        if(this.m_animation.getAnimationState("kill_swing")._isPlaying){
            speed = 0;
            return false;
        }
        else{
            if(this.node.getChildByName("bone") != null){
                this.newMyPrefab.removeFromParent();
                this.animationChange();
                speed = 1.5;
            }  
            return true;
        }
    },

    //  hero血條的實時回應方法
    bloodDetection: function() {
        //  人物血條制作
        this.m_sprite[0].fillRange = hero.bloodTime / hero.bloodBase * hero.grade;
        this.m_sprite[1].fillRange = hero.blueTime / hero.blueBase * hero.grade;       
    },

    //  hero經驗條的更新檢測
    expericeChange: function() {
        //  如果經驗條滿了
        if(hero.experice >= 100 * hero.grade){
            hero.experice -= 100 * hero.grade;
            hero.grade += 1;
            this.gradeString.string = "等級：" + hero.grade;
            expericeChange();
        }
        //  如果經驗條沒滿
        else{
            this.experice.scaleX = hero.experice / (100 * hero.grade);
        }
    },

    //  技能播放
    playingKill(){
        if(this.kill == 1){
            this.m_animation.play("kill_swing");
            this.node.addChild(this.newMyPrefab);
            this.newMyPrefab.setPosition(-200, 0);
        }
    }
});

?4.2 BoxControl.js

控制游戲的一切界面互動，例如游戲界面的跳轉、背包界面的打開、hero物品的生成等等，

cc.Class({
    extends: cc.Component,
    properties: {
        packet: {
            default: null,
            type: cc.Node,
            count : Boolean,
            display : Boolean,
        },
        monsterbame: {
            default: null,
            type: cc.Node,
        },
    },
    
    //  場景初始化
    onl oad: function () {
        //  monster的血條顯示
        this.sign = true;
        //  背包的點擊狀態
        this.packet.count = true;
        //  背包顯示情況
        this.packet.display = true;
        //  怪物血條的重繪頻率
        this.loadMonsterBloodPassTime = 0.2;
        this.loadMonsterBloodNowTime = 0;
        //  怪物血條和名字控制元件
        this.monstername = this.monsterbame.getChildByName("name").getComponent(cc.Label);
        this.monsterblood = this.monsterbame.getChildByName("ui").getChildByName("blood").getComponent(cc.Sprite);
        //  注冊按鈕事件
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_DOWN, this.onKeyDown, this);
        cc.systemEvent.on(cc.SystemEvent.EventType.KEY_UP, this.onKeyUp, this);

    },

    update: function (dt) {
        //  累計重繪時間
        this.loadMonsterBloodNowTime += dt;
        if(this.loadMonsterBloodNowTime > this.loadMonsterBloodPassTime){
            this.loadMonsterBloodNowTime = 0;
            if(isLoad){ 
                this.loadMonsterBlood();
                this.sign = false;
            }
            else{
                this.removeMonsterBlood();
                this.sign = true;
            }
        }
        
    },
    //  按鍵按下時的回應函式
    onKeyDown:function(event){
        switch(event.keyCode){    
            //  按下 B 鍵  
            case 66:
            this.bagClick();
                break;
         }
     },

    //  背包點擊方法
    bagClick: function(data){
        if(this.packet.count){
            //  將背包顯示到界面
            this.packet.setPosition(0, 0);
            this.packet.count = false;
            speed = 0;
            this.loadGoods();
        }
        else if (!this.packet.count){
            //  將背包移除界面
            this.packet.setPosition(1000, 0);
            this.packet.count = true;
            this.packet.display = true;
            var node = cc.find('Canvas/Main/Hero/package');
            //  移除所有物品
            node.removeAllChildren();
            speed = 1.5;
        }
    },

    //  背包物品加載
    loadGoods: function() {
        var node = cc.find('Canvas/Main/Hero/package');
        node.removeAllChildren();
        if(this.packet.display){
            cc.loader.loadRes('Interface/button1',cc.SpriteAtlas, (err, atlas) => {
            let starNode = new cc.Node();
            //  呼叫新建的node的addComponent函式，會回傳一個sprite的物件
            const sprite=starNode.addComponent(cc.Sprite)
            //  給sprite的spriteFrame屬性 賦值
            sprite.spriteFrame=atlas.getSpriteFrame("slice85_85");
            //  把新的節點追加到node節點去，就是腳本掛載的節點
            starNode.parent = this.packet;
       })
        }
        bagNum = 0;
        cc.loader.loadRes("Food/Foods", cc.SpriteAtlas, (err, atlas) => {
            //  加載錯誤則報錯
            if (err) {
                console.error(err);
                return;
            }
            //  創建一個使用圖片資源的新節點物件
            for (let index = 0; index < bag.length; index++) {
                if(bag[index].num > 0){
                    //  創建一個新節點
                    let starNode = new cc.Node(); 
                    starNode.name = bag[index].name;
                    //  創建物品位置
                    starNode.setPosition(-180 + bagNum * 60, 120); 
                    //  增加精靈組件
                    let starSprite = starNode.addComponent(cc.Sprite); 
                    //  設定精靈組件圖片資源
                    starSprite.spriteFrame = atlas.getSpriteFrame(bag[index].name); 
                    let button = starNode.addComponent(cc.Button);
                    button.name = bag[index].name;
                    button.node.on('click', this.callback, this);
                    starNode.parent = this.packet;
                    bagNum++;
                }
            }
        });  
    },

    //  場景更換
    changeGame: function(target, data){
    },

    //  背包物品點擊回呼
    callback: function(event) {
        //  點擊之后物品數量減少
        cc.log(event.target.name);
        //  初始化物品位置
        var index = -1;
        //  查找物品在背包中的位置
        for (var i = 0; i < bag.length; i++) {
            if (bag[i].name == event.target.name) {
                index = i;
                break;
            }
        }
        // 判斷使用的物品給hero加屬性
        switch (event.target.name) {
            case "bun":
                hero.bloodTime += 8;
                break;
            case "cowpea":
                hero.blueTime += 15;
                break;
            case "drumstick":
                hero.bloodTime += 20;
                break;    
            case "hot_dog":
                hero.bloodTime += 10;
                break;  
            case "hot_pot":
                hero.bloodTime += 15;
                break;
            case "noodles":
                hero.bloodTime += 12;
                break;
            case "omelet_rice":
                hero.blueTime += 20;
                break;    
            case "pepper_spray":
                hero.bloodTime += 30;
                break;
            case "sliced_bread":
                hero.bloodTime += 5;
                break;    
            case "tortoise":
                hero.blueTime += 20;
                break;   
        }
        // 超出基本血量則直接等于基本血量
        if (hero.bloodTime > hero.bloodBase) {
            hero.bloodTime = hero.bloodBase;
        }
        // 超出基本藍量則直接等于基本藍量
        if (hero.blueTime > hero.blueBase) {
            hero.blueTime = hero.blueBase;
        }
        //  數量減一
        bag[index].num--;
    },

    //  記載monster的血條UI
    loadMonsterBlood: function(){
        if(this.sign){
            //  monster相關資訊顯示
            this.monsterbame.setPosition(110,280);
            this.monstername.string = monsterDragon.name + "---" + monsterDragon.grade + "級";
            this.monstername.node.color = cc.color(255,0,0);
            this.monstername.fontSize = 15;
        }
        this.monsterblood.fillRange = monsterDragon.bloodTime / monsterDragon.bloodBase;
    },
    //  卸載monster的血條UI
    removeMonsterBlood : function(){
        if(!this.sign){
            //  將monster血條移除界面顯示
            this.monsterbame.setPosition(110,400);
        }
    },
    //  save file
    fileClick: function() {
        cc.sys.localStorage.setItem("grade", hero.grade);
        cc.sys.localStorage.setItem("goal", hero.goal);
        cc.sys.localStorage.setItem("diamond", hero.diamond);
    },
});

?4.3 AllControl.js

負責存盤游戲中的全部共有屬性變數，例如NPC的交談內容、游戲的幫助檔案等等，

//  螢屏的移動速度也可視為hero的引動速度
window.speed = 1.5;
//  hero的整體屬性
window.hero = {
    bloodBase : 100,
    bloodTime : 50,
    blueBase : 100,
    blueTime : 50,
    experice : 0,
    grade : 1,
    goal : 0,
    diamond : 0,  
};
//  hero的背包屬性
window.bagNum = 0;
window.bag = [{name : "bun" , num : 0}, // 小面包加血8點
              {name : "cowpea" , num : 0}, // 缸豆加血藍15點
              {name : "drumstick" , num : 0},// 雞腿加血20點
              {name : "hot_dog" , num : 0},  // 熱狗加血10點
              {name : "hot_pot" , num : 0},  // 火鍋加血15點
              {name : "noodles" , num : 0},  // 面條加血12點
              {name : "omelet_rice" , num : 0}, // 蛋包飯加藍20點
              {name : "pepper_spray" , num : 0},// 辣椒水加血30點
              {name : "sliced_bread" , num : 0},// 切片面包加血5點
              {name : "tortoise" , num : 0}]; // 王八湯加藍20點

//  拾取
window.pickUp = 0;
//  商店NPC
window.message = {
    // 商店NPC
    shop : "你好，冒險者，有什么食物需要購買的么！",
    // 鐵匠npc
    smithy : "你好，冒險者，有什么武器需要打造的么！",
    // 酒館NPC
    tavern : "你好，冒險者，有什么藥水需要購買的么！",
    // 雜貨NPC
    variety : "你好，冒險者，有什么物品需要兌換的么！",
};
//  monster的整體屬性
window.monsterDragon = {
    bloodBase : 1000,
    bloodTime : 0,
    experice : 100,
    grade : 10,
    name : "魔龍",
    attackArea : 100,
}
//  是否加載monster血條
window.isLoad = false;
//  相關的碰撞檢測資訊
window.tag = {
    tag0 : 0,   //  防穿模檢測
    tag1 : 1,   //  寶箱
    tag2 : 2,   //  NPC
    tag3 : 3,   //  場景切換到森林
    tag4 : 4,   //  場景切換到市區
    tag5 : 5,   //  hero技能
    tag6 : 6,
    tag7 : 7,
    tag8 : 8,
    tag9 : 9,
    tag10 : 10, //  hero
}

?4.4 HitDetect.js

負責游戲的整體碰撞檢測，檢測 hero 與 floor、road、wall 等層級發生碰撞時的檢測和動作，還存在其他的檢測腳本，針對于特殊物件設定的專屬碰撞檢測，

cc.Class({
    extends: cc.Component,

    properties: {

    },

    onl oad: function () {
        //開啟碰撞監聽
        cc.director.getCollisionManager().enabled = true;
    },

    onCollisionEnter: function (other) {
        if(other.tag == 1){
            speed = 1.5;
        }
        else if(other.tag == 2){
            speed = 1.5;
        }
        else if(other.tag == 3){
            cc.director.loadScene('game2');
        }
        else if(other.tag == 4){
            cc.director.loadScene('game1');
        }
        else{
            speed = 0;
        }
    },

    // 碰撞狀態中呼叫
    onCollisionStay(other, self) {
        if(other.tag == 1){
            speed = 1.5;
        }
        else if(other.tag == 2){
            speed = 1.5;
        }
        else{
            speed = 0.1;
        }
    },

    // 碰撞結束時呼叫
    onCollisionExit(other, self) {
        speed = 1.5;
    },

});

?4.5 TreasureControl.js

負責 hero 與 寶箱 等可進行拾取的物品的碰撞的檢測及相應的產生動作等，

cc.Class({
    extends: cc.Component,

    properties: {

    },

    onl oad: function () {
        //  開啟碰撞監聽
        cc.director.getCollisionManager().enabled = true;
        this.touch = 0;
        this.randomTreasure = parseInt(Math.random() * 5);
    },

    onCollisionEnter: function (other) {
        //  英雄與寶箱相碰撞
        if(other.tag == 10 && this.touch == 0){
            //  
            this.touch++;
            cc.loader.loadRes("Food/Foods", cc.SpriteAtlas, (err, atlas) => {
                //  加載錯誤則報錯
                if (err) {
                    console.error(err);
                    return;
                }
                //  創建一個使用圖片資源的新節點物件
                let starNode = new cc.Node(); 
                starNode.parent = this.node;
                starNode.name = "";
                //  增加精靈組件
                let starSprite = starNode.addComponent(cc.Sprite); 
                //  設定精靈組件圖片資源
                starSprite.spriteFrame = atlas.getSpriteFrame(bag[this.randomTreasure].name); 
                //  添加物品的上升動作
                var move = cc.moveTo(1, 0, 40);
                starNode.runAction(move)
            }); 
        }
    },

    // 碰撞狀態中呼叫
    onCollisionStay(other, self) {
        if(pickUp == 1){
            this.pickUp(); 
        }
    },

    // 碰撞結束時呼叫
    onCollisionExit(other, self) {
        ;
    },

    pickUp: function() {
        //  隨機進行金幣和鉆石的數量添加
        if(Math.random() % 2 == 0){
            hero.goal += 10;
        }
        else{
            hero.diamond += 5;
        }
        hero.experice += 20;
        bag[this.randomTreasure].num += 1;
        this.node.removeFromParent();
        pickUp = 0;
    },

    update: function (dt) {
        
    },
});

?4.6 NpcControl.js

負責游戲中玩家與NPC的整個互動系統，

cc.Class({
    extends: cc.Component,

    properties: {
        //  hero的節點
        m_hero : {
            default : null,
            type : cc.Node,
        },
    },

    onl oad: function () {
        //  開啟碰撞監聽
        cc.director.getCollisionManager().enabled = true;
        //  創建NPC的對話節點
        this.textNode = new cc.Node();
        this.textNode.name = "label"; 
        this.textNode.parent = this.node;
        this.textNode.color = cc.color(255, 255, 0);
        //  創建位置
        this.textNode.setPosition(-80, 80); 
        //  增加對話節點框 文本節點
        this.textSprite = this.textNode.addComponent(cc.Sprite);
        this.starLabel = this.textSprite.addComponent(cc.Label); 
        this.starLabel.enableWrapText = true;
        this.starLabel.overflow = 3;
        this.starLabel.lineHeight = 15;
        this.starLabel.HorizontalAlign = cc.LEFT;
        this.starLabel.string = "";
        this.starLabel.fontSize = 10;
    },

    update: function (dt) {
        
    },
    //  碰撞開始時呼叫
    onCollisionEnter: function (other) {
        if(other.tag == 10){
            //  加載對話面板
            this.loadText();
            //  取得對話框標簽并進行數量設定
            if (this.node.name == "shopnpc") {
                // 商店NPC的對話內容
                this.starLabel.string = message.shop;
            }else if (this.node.name == "smithynpc") {
                // 鐵匠NPC的對話內容
                this.starLabel.string = message.smithy;
            }else if (this.node.name == "varietynpc") {
                // 雜貨NPC的對話內容
                this.starLabel.string = message.variety;
            }else if (this.node.name == "tavernnpc") {
                // 酒館NPC的對話內容
                this.starLabel.string = message.tavern;
            }
            
        }
        else{
            
        }
    },

    // 碰撞狀態中呼叫
    onCollisionStay(other, self) {
        
    },

    // 碰撞結束時呼叫
    onCollisionExit(other, self) {
        this.starLabel.string = "";
        this.textSprite.spriteFrame = null;
    },

    //  加載對話面板
    loadText: function() {
        //  加載對話框背景
        cc.loader.loadRes('Interface/text', cc.SpriteFrame, (err,Frame) => {
            this.textSprite.spriteFrame = Frame;
        });
    },
});

?4.7 LoginControl.js

負責游戲登陸的界面判斷，和主界面的跳轉作業，

cc.Class({
    extends: cc.Component,

    properties: {
        user: {
            default: null,
            type: cc.EditBox,
        },
        password: {
            default: null,
            type: cc.EditBox,
        }
    },

    onl oad: function () {
        //  創建版本顯示資訊的文本框
        this.infoNode = new cc.Node();
        this.infoNode.parent = this.node;
        this.versionNode = new cc.Node();
        this.versionNode.parent = this.node;
        //  創建位置和顯示顏色
        this.infoNode.setPosition(0, 245); 
        this.infoNode.color = cc.color(0, 0, 255);
        this.versionNode.setPosition(0, 185); 
        this.versionNode.color = cc.color(0, 0, 255);
        //  增加對話文本節點
        this.info = this.infoNode.addComponent(cc.Label); 
        this.version = this.versionNode.addComponent(cc.Label);
        //  設定文本內容
        this.info.string = "Magic baby";
        this.version.string = "version 1.1.0";
        //  拿到顯示資訊
        var node = cc.find('Canvas/loginB/hint');
        this.hint = node.getComponent(cc.Label);
    },

    login: function (params) {
        //  檢測賬號密碼輸入是否正確
        if (this.user.string == "admin" && this.password.string == "root") {
            this.hint.node.color = cc.color(0, 0, 255);
            this.hint.string = "correct";
            // 記載本地檔案中的所有資料資訊
            this.loadGameInfo();
            //  正確跳轉游戲主界面
            cc.director.loadScene('game1');
        }else {
            //  錯誤提示玩家輸入錯誤
            this.hint.node.color = cc.color(255, 0, 0);
            this.hint.string = "error";
            cc.log(cc.sys.localStorage.getItem("password"));
        }
    },
    update: function (dt) {

    },
    
    // 記載本地檔案中的所有資料資訊
    loadGameInfo : function() {
        // 加載本地資料
        // cc.loader.loadRes('data/hero.json', function (err, object) {
        //     if (err) {
        //         console.log(err);
        //         return;
        //     }
        //     // 讀取的資料回傳在object中，這是一個擁有2個元素的物件
        //     hero.grade = object.grade; 
        //     hero.goal = object.goal;   
        // });
        hero.grade = JSON.parse(cc.sys.localStorage.getItem("grade"));
        hero.goal = JSON.parse(cc.sys.localStorage.getItem("goal"));
        hero.diamond = JSON.parse(cc.sys.localStorage.getItem("diamond"));
    },
});

?4.8 MonsterControl.js

負責游戲monster的控制，

cc.Class({
    extends: cc.Component,

    properties: {
        //  hero的節點
        m_hero : {
            default : null,
            type : cc.Node,
        },
    },
    onl oad: function () {
        //開啟碰撞監聽
        cc.director.getCollisionManager().enabled = true;
        //  拿到monster及hero的節點資訊，便于后面的互動處理
        this.hero = this.m_hero;
        this.monster = this.node;
        this.name = this.node.name;
        //  monster的面板顯示范圍，移動范圍
        this.area = 300;
        this.moveArea = 100;
    },

    update: function (dt) {
        this.calculatePosition();
    },

    //  monster與hero的距離檢測，當距離范圍小于100時，monster這則可以開始進行攻擊
    calculatePosition: function() {
        var mx = this.monster.x;
        var my = this.monster.y;
        var hx = this.hero.x;
        var hy = this.hero.y;
        if(Math.sqrt((mx-hx)*(mx-hx)+(my-hy)*(my-hy)) < this.area){
            isLoad = true;
        }
        else{
            isLoad = false;
        }
    },
    onCollisionEnter: function (other) {
        monsterDragon.bloodTime -= 100;
    },

    // 碰撞狀態中呼叫
    onCollisionStay(other, self) {
        if(other.tag == 5){
            monsterDragon.bloodTime -= 2;
        }
    },

    // 碰撞結束時呼叫
    onCollisionExit(other, self) {
        if(monsterDragon.bloodTime <= 0){
            this.node.removeFromParent();
            isLoad = false;
            hero.experice += 90;
        }
    },
});

5、游戲操作

?5.1 運行控制

• 點擊 “登陸” 進入游戲界面，

• 游戲開始時可以通過游戲界面的設定按鈕進行游戲幫助的訪問，

• 任務界面，通過使用鍵盤操控主角完成一系列動作，消滅敵人，獲取經驗值，

• 敵人消失獲取經驗值升級表示游戲挑戰成功，血量和生命值 消耗為0 表示挑戰失敗退出游戲進行重置，

• 點擊游戲界面的設定按鈕彈出退出游戲的按鍵就可以回傳游戲的主界面中進行游戲的重新進入，（游戲沒有設定資料庫的支持，所以在退出游戲之后所有當前游戲產生的屬性都會被清置為0），

?5.2 操作資訊

• A、D、W、S分別為hero的左、右、上、下移動按鍵；

• K鍵可以拾取物品；

• J、H鍵為hero的技能攻擊鍵；

• B鍵可以打開人物的背包界面，

結果視頻

[video(video-3OMfCVVG-1623651081648)(type-csdn)(url-https://live.csdn.net/v/embed/166627)(image-https://vedu.csdnimg.cn/87cab34fdb1f44dbb3a3e14a60c7a0ac/snapshots/f7be385c7fd444579837e71f137a62db-00005.jpg)(title-)]