RPG系統構造
通過對于斗羅大陸小說的游戲化程序，熟悉Angular的結構以及使用TypeScript的面向物件開發方法，
Github專案源代碼地址
人物
和其他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;
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;
/**自定義執行方法 */
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) {
//如果自定義方法被執行，則跳過后續代碼
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;
//如果需要產生其他效果
if (this.AddtionSkill !== undefined) this.AddtionSkill.Excute(c, fs);
}
}
undefined來檢測是否擁有物件
劇情
劇情暫時使用傳統的串列在當前位置指標方式來制作
export const FightPrefix = "[FightScene]";
export const ChangeScenePrefix = "[ChangeScene]";
export const Scene0000: SceneInfo = {
Title: "引子 穿越的唐家三少",
Background: "唐門",
Lines: [
"唐門唐三@我知道，偷入內門，偷學本門絕學罪不可恕，門規所不容，但唐三可以對天發誓，絕未將偷學到的任何一點本門絕學泄露與外界，",
FightPrefix + "Battle0001",
"唐門唐三@我說這些，并不是希望得到長老們的寬容，只是想告訴長老們，唐三從未忘本，以前沒有，以后也沒有，",
"唐門唐三@唐三的一切都是唐門給的，不論是生命還是所擁有的能力，都是唐門所賦予，不論什么時候，唐三生是唐門的人，死是唐門的鬼，",
"唐門唐三@我知道，長老們是不會允許我一個觸犯門規的外門弟子尸體留在唐門的，既然如此，就讓我骨化于這巴蜀自然之中吧，",
"唐門長老@玄天寶錄，你竟然連玄天寶錄中本門最高內功也學了？",
"唐門唐三@赤裸而來，赤裸而去，佛怒唐蓮算是唐三最后留給本門的禮物，",
"唐門唐三@現在，除了我這個人以外，我再沒有帶走唐門任何東西，秘籍都在我房間門內第一塊磚下，唐三現在就將一切都還給唐門，",
"唐門唐三@哈哈哈哈哈哈哈……，",
"唐門長老@等一下，",
"唐門唐三@(云霧很濃，帶著陣陣濕氣，帶走了陽光，也帶走了那將一生貢獻給了唐門和暗器的唐三，)",
ChangeScenePrefix + "Scene0001"
]
};
這里使用 FightPrefix表示進入戰斗，ChangeScenePrefix表示場景轉換，對話串列則使用@符號將角色和臺詞進行區分，
戰斗流程
回合開始
每一個回合開始的時候，首先對上一個回合進行一次清算，
- 狀態回合數的遞減
- 中毒狀態的傷害計算
BufferTurnDown() {
this.BufferStatusList.forEach(element => {
if (element.Status === characterStatus.中毒) {
//中毒狀態，如果存在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.BufferStatusList = this.BufferStatusList.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("勝利");
this.MyTeam.forEach(element => { this.InitRole(element) });
this.ResultEvent.emit(1);
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);
if (this.TurnList.length == 0) {
console.log("回合結束");
this.NewTurn();
} else {
let Role = this.TurnList.pop();
let block = Role.BufferStatusList.find(x => x.Status === 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
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進行訂閱
Angular技巧
關于get計算屬性
在界面系結的時候，如果系結的是get的計算屬性，則get計算屬性的值也是被監視的，其值也會隨著其依賴的值的變化而變化的，不用擔心get計算屬性值在界面上不重繪，
*ngFor在無子元素的組件上運用
一般的li,tr元素，由于都包含了子元素，所以覺得可以用 *ngFor,對于img這種沒有子元素的組件，同樣也可以使用 ngFor的，
<img *ngFor="let s of this.StatusTitle" [src]="'/assets/Icons/' + s" width="16px" height="16px" />
只有 ngSwitch需要有父元素
<div [ngSwitch]="this.Status" style="width: 52px;height: 52px;padding: 2px;"
[ngStyle]="{'background-color':BackGoundColor}" (click)="CellClicked()">
<img *ngSwitchCase="HideStatus" [src]="'/assets/minilogo.jpg'" width="48px" height="48px">
<img *ngSwitchCase="ShowStatus" [src]="'/assets/character/' + ImageName + '/頭像.jpg'" width="48px" height="48px">
<img *ngSwitchCase="SelectedStatus" [src]="'/assets/character/' + ImageName + '/頭像.jpg'" width="48px" height="48px">
</div>
ver0.01 2020/03/25
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/140010.html
標籤：JavaScript
上一篇：ES6實作小案例--自定義彈框