【開源】使用Angular9和TypeScript開發RPG遊戲(20200410版)

時間 2020-05-09

標籤開源使用 angular9 angular typescript 開發 rpg 遊戲欄目 AngularJS 简体版

原文原文鏈接

源代碼地址

經過對於斗羅大陸小說的遊戲化過程，熟悉Angular的結構以及使用TypeScript的面向對象開發方法。
Github項目源代碼地址
git

在線體驗網址（推薦使用移動設備訪問）

http://datavisualization.club:8888/github

極簡遊戲攻略

除了劇情對話以外，本遊戲暫時只有一個分叉選擇typescript

【趙無極試煉】是正確的分支，能夠通往史萊克的正常劇情，這個分支的話，史萊克七怪將挑戰趙無極老師等人
【昆圖庫塔卡提考特蘇瓦西拉鬆試煉】是番外篇的分支，能夠進入番外分支

若是你選擇了【趙無極試煉】分支，則戰鬥會很是幸苦。若是你選擇了【昆圖庫塔卡提考特蘇瓦西拉鬆試煉】分支，則你會發現敵我因爲等級屬性一致，沒法分出勝負。json

提示1.星斗大森林的二層寶箱有一個道具：佛怒唐蓮，羣體傷害99999（核彈級別殺傷力啊）
提示2.你的揹包裏面有一個道具：觀音淚，羣體傷害99，屠龍（LV1）是沒有問題的。
提示99.地圖去過的地方，能夠瞬移的

RPG系統構造

ver0.03 2020/04/10數組

人物

唐三數據結構JSON版數據結構

和其餘RPG遊戲相似，遊戲裏面的人物角色大體有這樣的一些屬性：生命值，魔法值（魂力），攻擊力，防護力，速度。RPG遊戲中的角色隨着等級的提升，這些屬性都會提高，屬性提高的快慢則取決於資質，同時，因爲在實際戰鬥中，會出現各類增益和光環效果，這些值都是動態變化的，因此這裏將這些屬性都設置了Base和Real兩套數據。dom

Base屬性是指人物的初始屬性，是一種固有屬性，在整個遊戲開始的時候就固定下來的。而後每一個人物根據不一樣的資質，有一個成長值，例如SSR的角色，成長值能夠是1.5，普通角色是1。這個成長值關係到每提高一個等級，角色屬性的增長值，代碼大體以下：函數

/**通過增益以後的生命最大值 */
    get RealMaxHP(): number {
        var R = this.BaseMaxHP + (this.LV - 1) * this.MaxHPUpPerLv * this.GrowthFactor;
        ...
        ...
        ...
        return Math.round(R);
    }

這裏的 MaxHPUpPerLv 表示每一個等級的最大生命值提高數值，GrowthFactor則表示成長值。測試

注意：這裏使用了TypeScript的get屬性，也就是隻讀/計算屬性來處理Real系的屬性，這些屬性都是實時計算出來的！this

在小說裏面，常常能夠看到3成功力的角色，爲了表示這種狀況，代碼裏面還設定了一個Factor變量，經過這個變量能夠設定總體的縮放比例。這個值默認爲1，表示不縮放。

/**通過增益以後的生命最大值 */
    get RealMaxHP(): number {
        var R = this.BaseMaxHP + (this.LV - 1) * this.MaxHPUpPerLv * this.GrowthFactor;
        R = R * this.Factor;
        ...
        ...
        ...
        return Math.round(R);
    }

因爲乘法計算會出現小數點，這裏使用了Math.round對結果進行取整。

技能

技能是一個遊戲的戰鬥核心，全部技能本質上都是爲了改變角色狀態。若是要具體細分大體能夠分爲

攻擊類：對於指定角色產生傷害
回覆類：對於指定角色，回覆生命值和魔法值
狀態改變類：這裏其實包含了Buffer和狀態變化兩種狀況，Buffer類大可能是被動技能，遊戲中只要某個角色在戰場上就得到，而且效果是持續性的。狀態變化則通常必須主動施放技能才行，並且持續時間也是有限制的。

同時技能設計的時候，還須要設定使用的方向，既這個技能是對於我方使用，仍是敵方使用，仍是無差異使用。另外這個技能的對象是某個對象，仍是羣體。

/**技能類型 */
export enum enmSkillType {
    /**攻擊 */
    Attact,
    /**治療 */
    Heal,
    /**光環和狀態  */
    Buffer
}

/**技能範圍 */
export enum enmRange {
    Self,       //本身
    PickOne,    //選擇一我的
    RandomOne,  //隨機選擇一我的
    FrontAll,   //前排全部人
    BackAll,    //後排全部人
    EveryOne,   //戰場全部人
}

/**技能方向 */
export enum enmDirect {
    MyTeam,     //本方
    Enemy,      //敵方
    All,        //全體
}

通常使用枚舉來編寫這樣相對固定，項目較少的列表

技能的設計，這裏使用了OOP的繼承來實現，技能的基類定義了一些共通的屬性和抽象方法。設計的時候還考慮到如下幾種特殊狀況

每一種具體技能必需要實現一個執行（施放）方法：Excute，這裏使用抽象函數，來強制子類型必需要實現這個方法
對於複雜技能，須要有一個自定義的執行方法：CustomeExcute，同時經過返回值來告訴系統是否是該技能有自定義執行方法。則跳過固有的Excute方法。
對於有些技能可能要同時實現兩種效果，這裏增長了AddtionSkill變量

/** 技能 */
export abstract class SkillInfo {
    Name: string;
    SkillType: enmSkillType;
    Range: enmRange;
    Direct: enmDirect;
    Description: string;
    /**冷卻回合數 */
    ColdDownTurn: number = 0;
    /**實時冷卻剩餘數 */
    CurrentColdDown = 0;
    /**是否能使用 */
    IsAvalible(fs: FightStatus): string {
        let c = fs.currentActionCharater;
        if (c.MP < this.MpUsage) return "MP不足";
        if (this.CurrentColdDown !== 0) return "冷卻中:" + this.CurrentColdDown;
        if (this.Combine !== undefined) {
            //武魂融合技
            let EveryOneCanAction = true;
            this.Combine.forEach(
                name => {
                    if (name !== c.Name) {
                        if (fs.TurnList.find(x => x.Name === name) === undefined) EveryOneCanAction = false;
                    }
                }
            );
            if (!EveryOneCanAction) return "融合者已行動";
        }
        return "";
    };
    /**效果隨着等級變化 */
    EffectWithLevel = false;
    MpUsage: number = 5;
    /**武魂融合技的融合者列表 */
    Combine: string[] = [];
    abstract Excute(c: Character, fs: FightStatus): void;
    /**自定義執行方法 */
    CustomeExcute(c: Character, fs: FightStatus): boolean {
        return false;
    }
    //攻擊並中毒這樣的兩個效果疊加的技能
    AddtionSkill: SkillInfo = undefined;
}

export class AttactSkillInfo extends SkillInfo {
    SkillType = enmSkillType.Attact;
    Harm: number;
    IgnoreceDefence: boolean;
    Excute(c: Character, fs: FightStatus) {
        //若是自定義方法被執行，則跳事後續代碼
        if (this.CustomeExcute(c, fs)) return;
        let factor = 1 + fs.currentActionCharater.LV / 100;
        c.HP -= Math.round(this.Harm * factor);
        if (c.HP <= 0) c.HP = 0;
        if (this.AddtionSkill !== undefined) this.AddtionSkill.Excute(c, fs);
    }
}

undefined來檢測是否擁有對象

Buffer技能

Buffer，能夠叫作狀態增益，本系統的Buffer以下所示：該結構標明瞭Buffer的做用，來源，剩餘回合數，已經對於狀態的影響。

其中，狀態有常規的攻防增益，中毒，也有一些特殊的，例如施法以後產生的Flag型狀態：浴火鳳凰,幽冥影分身,飛行等就屬於這種特殊狀態。

/**狀態 */
export enum characterStatus {
    /**通用 */
    魂技,
    /**增益 */
    攻擊增益,
    防護增益,
    速度增益,
    生命增益,
    魂力增益,

    /**每回合失去生命值 */
    中毒,
    /**沒法使用技能 */
    禁言,
    /**沒法物理和技能攻擊 */
    暈眩,
    /**沒法普通攻擊，可使用技能 */
    束縛,
    /**物理攻擊免疫 */
    物免,
    /**技能攻擊免疫 */
    魔免,
    /**所有免疫 */
    無敵,
    //特點特殊狀態:戰鬥開始的時候將被清除掉
    /**馬紅俊 */
    浴火鳳凰,
    /**朱竹清 */
    幽冥影分身,
    /**香腸效果 */
    飛行
}

/**Buffer */
export class Buffer {
    //Value表示絕對值，Percent表示百分比

    MaxHPValue: number = undefined;
    MaxHPFactor: number = undefined;

    HPValue: number = undefined;
    HPFactor: number = undefined;

    MaxMPValue: number = undefined;
    MaxMPFactor: number = undefined;

    MPValue: number = undefined;
    MPFactor: number = undefined;

    SpeedValue: number = undefined;
    SpeedFactor: number = undefined;

    AttactValue: number = undefined;
    AttactFactor: number = undefined;

    DefenceValue: number = undefined;
    DefenceFactor: number = undefined;
    /**來源 */
    Source: string;
    /**持續回合數 */
    Turns: number = 999;    //默認999回合
    /**狀態 */
    Status: characterStatus[] = [characterStatus.魂技];
}

在技能裏面有一類是Buffer技能，這個時候須要將Buffer放入角色的BufferList中，注意，因爲技能描述中的Buffer是對於Skill的描述，是一個類，不能直接放入到人物BufferList中。而應該將Buffer的副本放入人物BufferList中去。

/**增益和減弱 */
export class BufferStatusSkillInfo extends SkillInfo {
    SkillType = enmSkillType.Buffer;
    Buffer: Buffer = new Buffer();
    /**Buffer強度是否和施法者等級掛鉤？ */

    Excute(c: character, fs: FightStatus) {
        if (this.CustomeExcute(c, fs)) return;
        //增長Buffer來源信息，相同的不疊加
        if (c.BufferList.find(x => x.Source === this.Name) !== undefined) return;
        //增幅強度和等級關聯:若是是和施法者相關，必須使用currentActionCharater的信息
        if (this.BufferFactorByLV) {
            let factor = fs.currentActionCharater.LV / 100;
            //如下不使用 1 + factor 是由於RealTimeAct()計算使用了 R += R * element.AttactFactor; 
            if (this.Buffer.AttactFactor !== undefined) this.Buffer.AttactFactor = factor;
            if (this.Buffer.DefenceFactor !== undefined) this.Buffer.DefenceFactor = factor;
            if (this.Buffer.MaxHPFactor !== undefined) this.Buffer.MaxHPFactor = factor;
            if (this.Buffer.MaxMPFactor !== undefined) this.Buffer.MaxMPFactor = factor;
            if (this.Buffer.SpeedFactor !== undefined) this.Buffer.SpeedFactor = factor;
        }
        //從技能使用點開始就起效的屬性變化的調整:因爲使用了get自動屬性功能，Real系的都會自動計算
        let MaxHpBefore = c.RealMaxHP;
        let MaxMpBefore = c.RealMaxMP;
        this.Buffer.Source = this.Name;
        //這裏必須使用副本
        c.BufferList.push(JSON.parse(JSON.stringify(this.Buffer)));
        let MaxHpAfter = c.RealMaxHP;
        let MaxMpAfter = c.RealMaxMP;
        //魂力和生命的等比縮放
        if (MaxHpAfter !== MaxHpBefore) c.HP = Math.round(c.HP * (MaxHpAfter / MaxHpBefore))
        if (MaxMpAfter !== MaxMpBefore) c.MP = Math.round(c.MP * (MaxMpAfter / MaxMpBefore))
        //生命值和魂力的Buffer，還須要對於HP和MP進行修正
        if (c.HP > c.RealMaxHP) c.HP = c.RealMaxHP;
        if (c.MP > c.RealMaxMP) c.MP = c.RealMaxMP;
        if (fs.IsDebugMode) {
            console.log("技能對象：" + c.Name);
            c.BufferList.forEach(element => {
                console.log("回合數：" + element.Turns + "\t狀態" + element.Status.toString() + "\t來源" + element.Source);
            });
        }
        if (this.AddtionSkill !== undefined) this.AddtionSkill.Excute(c, fs);
    }
}

具體到斗羅大陸，其技能可能來自於魂骨（相似於極品裝備的概念）和魂環，或者角色自身融合技，設計的時候，暫時考慮技能獨立體系獨立存在，而後分配給魂骨魂環,魂骨魂環分配給人物。用這樣的方式將人物和技能串聯起來。

public static 唐三(): Character {
        let 唐三 = new Character("唐三");
        唐三.LV = 29;
        唐三.GrowthFactor = 1.5;
        唐三.Bones = [
            BoneCreator.外附魂骨八蛛矛(),
            BoneCreator.天青牛蟒右臂骨(),
            BoneCreator.泰坦巨猿左臂骨(),
            BoneCreator.深海魔鯨王的軀幹骨(),
            BoneCreator.精神凝聚之智慧頭骨(),
            BoneCreator.藍銀皇右腿骨(),
            BoneCreator.邪魔虎鯨王左腿骨()
        ]
        唐三.TeamPosition = enmTeamPosition.控制系;
        唐三.Description = "唐三前世爲巴蜀唐門外門子弟，來到斗羅大陸後與夥伴們一塊兒在異界大陸從新創建了唐門。"
        唐三.Soul = "藍銀皇";
        唐三.Circles = CircleCreator.唐三();
        唐三.SecondSoul = "昊天錘";
        唐三.Fields = [FieldCreator.藍銀領域(), FieldCreator.海神領域(),
        FieldCreator.殺神領域(), FieldCreator.修羅領域()];
        return 唐三;
    }

    public static 邪魔虎鯨王左腿骨(): Bone {
        let e = new Bone();
        e.Name = "邪魔虎鯨王左腿骨";
        e.Position = BonePosition.左腿骨;
        e.FirstSkill = BoneSkillCreator.虎鯨碎牙斬();
        e.SecondSkill = BoneSkillCreator.虎鯨邪魔斧();
        return e;
    }

    //邪魔虎鯨王左腿骨
    public static 虎鯨邪魔斧(): SkillInfo {
        let s = new AttactSkillInfo();
        s.Name = "虎鯨邪魔斧";
        s.Description = "徹底做用於攻擊，凝全身功力於左腿，經魂骨增幅，化爲薄如蟬翼的戰斧利刃，直線型單體攻擊";
        s.Direct = enmDirect.Enemy;
        s.Range = enmRange.PickOne;
        s.Harm = 5000;
        return s;
    }

    public static 虎鯨碎牙斬(): SkillInfo {
        let s = new AttactSkillInfo();
        s.Name = "虎鯨碎牙斬";
        s.Description = "羣攻技能";
        s.Direct = enmDirect.Enemy;
        s.Range = enmRange.EveryOne;
        s.Harm = 2000;
        return s;
    }

劇情

每一個場景包含了名稱，標題，對白（戰鬥）列表，背景，下一個場景名稱和分支的信息。

public static lineIdx: number = 0;    //臺詞位置
export interface SceneInfo {
    Name: string;
    Title: string;
    Lines: string[];
    Background: string;
    NextScene?: string;
    Branch?: [string, string][]
}

export const Scene0001: SceneInfo = {
    Name: "Scene0001",
    Title: "引子 穿越的唐家三少",
    Background: "唐門",
    Lines: [
        "唐門長老@玄天寶錄，你居然連玄天寶錄中本門最高內功也學了？",
        "唐門唐三@赤裸而來，赤裸而去，佛怒唐蓮算是唐三最後留給本門的禮物。",
        "唐門唐三@如今，除了我這我的之外，我再沒有帶走唐門任何東西，祕籍都在我房間門內第一塊磚下。唐三如今就將一切都還給唐門。",
        "唐門唐三@哈哈哈哈哈哈哈……。",
        "唐門長老@等一下。",
        "唐門唐三@(雲霧很濃，帶着陣陣溼氣，帶走了陽光，也帶走了那將一輩子貢獻給了唐門和暗器的唐三。)",
    ],
    Branch: [
        ["趙無極試煉", "Scene0011"],
        ["達拉崩巴試煉", "Scene0012"]
    ]
};

每次對話發生的時候，lineIdx這個臺詞位置的指針都會下移，指向下一句臺詞或者開啓戰鬥。這裏使用 FightPrefix表示進入戰鬥。對話列表則使用@符號將角色和臺詞進行區分。

export const Scene0011: SceneInfo = {
    Name: "Scene0011",
    Title: "史萊克學院",
    Background: "史萊克學院",
    Lines: [
        "小舞@史萊克學院的趙無極老師及其厲害，當心對付啊。",
        FightPrefix + "Battle0001",
        "唐三@終於經過史萊克學院的入學測試了！奧力給！",
    ]
};

道具系統

能夠將道具看做一種特殊的技能,只是這種技能是能夠購買的。固然特殊的劇情道具則不屬於這個範疇，設計起來比較複雜，須要配合場景的經過條件來使用。

import { SkillInfo } from './SkillInfo';

/** 道具 */
export class ToolInfo {
    /** 名字 */
    Name: string;
    /** 圖標 */
    Icon: string;
    /** 價格 */
    Price: number;
    /** 道具和技能能夠合併 */
    Func: SkillInfo;
    /**道具類型 */
    ToolType: enmToolType = enmToolType.StoreItem;
}

export class HiddenWeapon extends ToolInfo {
    ToolType = enmToolType.HiddenWeapon;
};

export enum enmToolType {
    /**暗器 */
    HiddenWeapon,
    /**可購入的通常道具 */
    StoreItem,
    /**劇情道具 */
    Spacial
}

public static 佛怒唐蓮(): ToolInfo {
    let t = new ToolInfo();
    t.ToolType = enmToolType.HiddenWeapon;
    t.Name = "佛怒唐蓮";
    t.Icon = ResourceMgr.icon_attact;
    t.Func = ToolSkillCreator.佛怒唐蓮();
    t.Price = 99999;
    return t;
}

戰鬥流程

ver0.02 2020/03/30

回合開始

每個回合開始的時候，首先對上一個回合進行一次清算。

狀態回合數的遞減
中毒狀態的傷害計算

BufferTurnDown() {
        this.BufferList.forEach(element => {
            if (element.Status.find(x => x === characterStatus.中毒) !== undefined) {
                //中毒狀態，若是存在HP傷害部分，則這裏處理，因爲使用了get自動屬性功能，Real系的都會自動計算
                if (element.HPFactor !== undefined) this.HP += this.HP * element.HPFactor;
                if (element.HPValue !== undefined) this.HP += element.HPValue;
            }
            element.Turns -= 1;
        });
        this.BufferList = this.BufferList.filter(x => x.Turns > 0);
    }

極端狀況下，敵我雙方均可能被束縛，沒法行動，因此先作一下判斷是否有能夠行動的角色。

按照出手速度，將全部角色放在一個數組裏面，而後決定第一個出手的人，若是是我方人員，等待用戶界面的指令輸入，若是是敵方的話，則使用AI進行行動。不管是AI仍是用戶界面的指令，一旦完成，則執行ActionDone方法，進行勝負斷定，切換當前的行動角色。

/**當前角色動做完成 */
    ActionDone() {
        //勝負統計
        let MyTeamLive = this.MyTeam.find(x => x !== undefined && x.HP > 0);
        if (MyTeamLive === undefined) {
            console.log("團滅");
            this.MyTeam.forEach(element => { this.InitRole(element) });
            this.ResultEvent.emit(0);
            return;
        }

        let EnemyTeamLive = this.Enemy.find(x => x !== undefined && x.HP > 0);
        if (EnemyTeamLive === undefined) {
            console.log("勝利");
            //這裏須要還原MyTeam的隊列
            this.MyTeam = this.info.MyTeam.map(x => this.GetRoleByName(x));
            this.MyTeam.forEach(element => {
                if (element !== undefined) {
                    element.Exp += this.Exp;
                    this.InitRole(element)
                }
            });
            this.ResultEvent.emit(this.Exp);
            return;
        }

        //氣絕者去除
        this.MyTeam = this.MyTeam.map(x => (x !== undefined && x.HP > 0) ? x : undefined);
        this.Enemy = this.Enemy.map(x => (x !== undefined && x.HP > 0) ? x : undefined);
        this.TurnList = this.TurnList.map(x => (x !== undefined && x.HP > 0) ? x : undefined);
        this.TurnList = this.TurnList.filter(x => x !== undefined);

        if (this.TurnList.length == 0) {
            console.log("回合結束");
            this.NewTurn();
        } else {
            let Role = this.TurnList.pop();
            let block = Role.StatusList.find(x => x === characterStatus.束縛 || x === characterStatus.暈眩);

            if (Role === undefined || block !== undefined) {
                console.log(Role.Name + ":角色已經氣絕,或者角色被束縛");
                this.ActionDone();
            } else {
                console.log("當前角色：" + Role.Name + "[" + Role.IsMyTeam + "]");
                this.currentActionCharater = Role;
                if (!Role.IsMyTeam) {
                    //AI For Enemy
                    this.EnemyAction.emit(RPGCore.EnemyAI(Role, this));
                    this.ActionDone();
                }
            }
        }
    }

這裏使用了@Output()的EventEmitter<>向外部發送消息戰鬥結束。因爲敵方AI運行速度極快，因此這裏沒有發送消息給用戶界面指示我方能夠行動了。

ngOnInit(): void {
        this.ge.InitFightStatus();
        this.Message = this.ge.fightStatus.currentActionCharater.Name + "的行動";
        this.ge.fightStatus.ResultEvent.subscribe((x) => {
            if (x === 0) {
                this.FightResultTitle = "團滅了......魂力不足"
                this.ge.gamestatus.lineIdx--;
            } else {
                this.FightResultTitle = "勝利了......奧力給"
                this.ge.gamestatus.lineIdx++;
            }
            this.FightEnd = true;
            console.log("jump to scene");
            setTimeout(() => { this.router.navigateByUrl("scene"); }, 3000);
        }, null, null);
    }