【開源】使用Angular9和TypeScript開發RPG遊戲(20200410版)
- 2020 年 4 月 10 日
- 筆記
源代碼地址
通過對於斗羅大陸小說的遊戲化過程，熟悉Angular的結構以及使用TypeScript的面向對象開發方法。 Github項目源代碼地址 
RPG系統構造
ver0.03 2020/04/10
人物
和其他RPG遊戲類似，游戲裏面的人物角色大致有這樣的一些屬性：生命值，魔法值（魂力），攻擊力，防禦力，速度。RPG遊戲中的角色隨着等級的提高，這些屬性都會提升，屬性提升的快慢則取決於資質，同時，由於在實際戰鬥中，會出現各種增益和光環效果，這些值都是動態變化的，所以這裡將這些屬性都設置了Base和Real兩套數據。
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系的屬性，這些屬性都是實時計算出來的！
在小說裏面，經常可以看到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); } EventEmitter在用戶界面使用subscribe進行訂閱
