【開源】使用Angular9和TypeScript開發RPG遊戲(補充了Buffer技能)

【開源】使用Angular9和TypeScript開發RPG遊戲(補充了Buffer技能)

人物

和其他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來檢測是否擁有對象

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);
}           

劇情

劇情暫時使用傳統的清單在目前位置指針方式來制作

export const FightPrefix = "[FightScene]";

export const ChangeScenePrefix = "[ChangeScene]";

export const Scene0000: SceneInfo = {

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

};

這裡使用 FightPrefix表示進入戰鬥，ChangeScenePrefix表示場景轉換。對話清單則使用@符号将角色和台詞進行區分。

道具系統

可以将道具看作一種特殊的技能,隻是這種技能是可以購買的。當然特殊的劇情道具則不屬于這個範疇，設計起來比較複雜，需要配合場景的通過條件來使用。

export enum enmToolType {

/**暗器 */
HiddenWeapon,
/**可購入的一般道具 */
StoreItem,
/**劇情道具 */
Spacial           

戰鬥流程

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("勝利");
        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進行訂閱

原文位址

https://www.cnblogs.com/TextEditor/p/12604022.html