如何使用Angular9和TypeScript開發(fā)RPG游戲

這篇文章將為大家詳細(xì)講解有關(guān)如何使用Angular9和TypeScript開發(fā)RPG游戲，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

RPG系統(tǒng)構(gòu)造

通過對于斗羅大陸小說的游戲化過程，熟悉Angular的結(jié)構(gòu)以及使用TypeScript的面向?qū)ο箝_發(fā)方法。

人物

和其他RPG游戲類似，游戲里面的人物角色大致有這樣的一些屬性：生命值，魔法值（魂力），攻擊力，防御力，速度。RPG游戲中的角色隨著等級的提高，這些屬性都會提升，屬性提升的快慢則取決于資質(zhì)，同時，由于在實際戰(zhàn)斗中，會出現(xiàn)各種增益和光環(huán)效果，這些值都是動態(tài)變化的，所以這里將這些屬性都設(shè)置了Base和Real兩套數(shù)據(jù)。

Base屬性是指人物的初始屬性，是一種固有屬性，在整個游戲開始的時候就固定下來的。然后每個人物根據(jù)不同的資質(zhì)，有一個成長值，例如SSR的角色，成長值可以是1.5，普通角色是1。這個成長值關(guān)系到每提升一個等級，角色屬性的增加值，代碼大致如下：

 /**經(jīng)過增益之后的生命最大值 */
 get RealMaxHP(): number {
 var R = this.BaseMaxHP + (this.LV - 1) * this.MaxHPUpPerLv * this.GrowthFactor;
 ...
 ...
 ...
 return Math.round(R);
 }

這里的 MaxHPUpPerLv 表示每個等級的最大生命值提升數(shù)值，GrowthFactor則表示成長值。

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

在小說里面，經(jīng)?？梢钥吹?成功力的角色，為了表示這種情況，代碼里面還設(shè)定了一個Factor變量，通過這個變量可以設(shè)定整體的縮放比例。這個值默認(rèn)為1，表示不縮放。

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

由于乘法計算會出現(xiàn)小數(shù)點，這里使用了Math.round對結(jié)果進行取整。

技能

技能是一個游戲的戰(zhàn)斗核心，所有技能本質(zhì)上都是為了改變角色狀態(tài)。如果要具體細(xì)分大致可以分為

• 攻擊類：對于指定角色產(chǎn)生傷害

• 回復(fù)類：對于指定角色，回復(fù)生命值和魔法值

• 狀態(tài)改變類：這里其實包含了Buffer和狀態(tài)變化兩種情況，Buffer類大多是被動技能，游戲中只要某個角色在戰(zhàn)場上就獲得，并且效果是持續(xù)性的。狀態(tài)變化則一般必須主動施放技能才行，而且持續(xù)時間也是有限制的。

同時技能設(shè)計的時候，還需要設(shè)定使用的方向，既這個技能是對于我方使用，還是敵方使用，還是無差別使用。另外這個技能的對象是某個對象，還是群體。

/**技能類型 */
export enum enmSkillType {
 /**攻擊 */
 Attact,
 /**治療 */
 Heal,
 /**光環(huán)和狀態(tài) */
 Buffer
}

/**技能范圍 */
export enum enmRange {
 Self, //自己
 PickOne, //選擇一個人
 RandomOne, //隨機選擇一個人
 FrontAll, //前排所有人
 BackAll, //后排所有人
 EveryOne, //戰(zhàn)場所有人
}

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

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

技能的設(shè)計，這里使用了OOP的繼承來實現(xiàn)，技能的基類定義了一些共通的屬性和抽象方法。設(shè)計的時候還考慮到以下幾種特殊情況

• 每一種具體技能必須要實現(xiàn)一個執(zhí)行（施放）方法：Excute，這里使用抽象函數(shù)，來強制子類型必須要實現(xiàn)這個方法

• 對于復(fù)雜技能，需要有一個自定義的執(zhí)行方法：CustomeExcute，同時通過返回值來告訴系統(tǒng)是不是該技能有自定義執(zhí)行方法。則跳過固有的Excute方法。

• 對于有些技能可能要同時實現(xiàn)兩種效果，這里增加了AddtionSkill變量

/** 技能 */
export abstract class SkillInfo {
 Name: string;
 Order: number; //第N魂技
 SkillType: enmSkillType;
 Range: enmRange;
 Direct: enmDirect;
 Description: string;
 Source: string;
 get MpUsage(): number {
 return Math.pow(2, this.Order);
 }
 /**武魂融合技的融合者列表 */
 Combine: string[];
 abstract Excute(c: character, fs: FightStatus): void;
 /**自定義執(zhí)行方法 */
 CustomeExcute(c: character, fs: FightStatus): boolean {
 return false;
 }
 //攻擊并中毒這樣的兩個效果疊加的技能
 AddtionSkill: SkillInfo = undefined;
}

export class AttactSkillInfo extends SkillInfo {
 SkillType = enmSkillType.Attact;
 Harm: number;
 Excute(c: character, fs: FightStatus) {
 //如果自定義方法被執(zhí)行，則跳過后續(xù)代碼
 if (this.CustomeExcute(c, fs)) return;
 let factor = fs.currentActionCharater.LV / 100;
 c.HP -= Math.round(this.Harm * factor);
 if (c.HP <= 0) c.HP = 0;
 //如果需要產(chǎn)生其他效果
 if (this.AddtionSkill !== undefined) this.AddtionSkill.Excute(c, fs);
 }
}

undefined來檢測是否擁有對象

劇情

劇情暫時使用傳統(tǒng)的列表在當(dāng)前位置指針方式來制作

export const FightPrefix = "[FightScene]";
export const ChangeScenePrefix = "[ChangeScene]";
export const Scene0000: SceneInfo = {
 Title: "引子 穿越的唐家三少",
 Background: "唐門",
 Lines: [
 "唐門唐三@我知道，偷入內(nèi)門，偷學(xué)本門絕學(xué)罪不可恕，門規(guī)所不容。但唐三可以對天發(fā)誓，絕未將偷學(xué)到的任何一點本門絕學(xué)泄露與外界。",
 FightPrefix + "Battle0001",
 "唐門唐三@我說這些，并不是希望得到長老們的寬容，只是想告訴長老們，唐三從未忘本。以前沒有，以后也沒有。",
 "唐門唐三@唐三的一切都是唐門給的，不論是生命還是所擁有的能力，都是唐門所賦予，不論什么時候，唐三生是唐門的人，死是唐門的鬼，",
 "唐門唐三@我知道，長老們是不會允許我一個觸犯門規(guī)的外門弟子尸體留在唐門的，既然如此，就讓我骨化于這巴蜀自然之中吧。",
 "唐門長老@玄天寶錄，你竟然連玄天寶錄中本門最高內(nèi)功也學(xué)了？",
 "唐門唐三@赤裸而來，赤裸而去，佛怒唐蓮算是唐三最后留給本門的禮物。",
 "唐門唐三@現(xiàn)在，除了我這個人以外，我再沒有帶走唐門任何東西，秘籍都在我房間門內(nèi)第一塊磚下。唐三現(xiàn)在就將一切都還給唐門。",
 "唐門唐三@哈哈哈哈哈哈哈……。",
 "唐門長老@等一下。",
 "唐門唐三@(云霧很濃，帶著陣陣濕氣，帶走了陽光，也帶走了那將一生貢獻給了唐門和暗器的唐三。)",
 ChangeScenePrefix + "Scene0001"
 ]
};

這里使用 FightPrefix表示進入戰(zhàn)斗，ChangeScenePrefix表示場景轉(zhuǎn)換。對話列表則使用@符號將角色和臺詞進行區(qū)分。

關(guān)于“如何使用Angular9和TypeScript開發(fā)RPG游戲”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。