【開源】使用Angular9和TypeScript開發RPG游戲

来源:https://www.cnblogs.com/TextEditor/archive/2020/03/25/12564714.html

RPG系統構造 通過對於鬥羅大陸小說的游戲化過程,熟悉Angular的結構以及使用TypeScript的面向對象開發方法。 "Github項目源代碼地址" 人物 和其他RPG游戲類似,游戲裡面的人物角色大致有這樣的一些屬性:生命值,魔法值(魂力),攻擊力,防禦力,速度。RPG游戲中的角色隨著等級的提 ...


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


您的分享是我們最大的動力!

更多相關文章
  • vuex控制台告警There are multiple modules with names that only differ in casing ...
  • 如今前端開發的任職要求越來越高了,不僅要掌握 javascript,熟悉vue、react等各種框架,甚至連後端和 python 都得懂。 前幾年只要熟練HTML、CSS、JavaScript ,靠扒代碼套用代碼工具就能找到一份相對不錯的工作,看來現在這套是行不通了。 要是碰上面試官問你“Vue數據 ...
  • 對於web中的icons的各種實現的利弊,請參考:Web中實現Icon的利弊 本文以阿裡矢量圖標庫為例,說下svg圖標簡單的使用: 挑選圖標下載到本地,文件結構如下: 運行demo_index.html文件,裡面有很詳細的介紹: Unicode 引用 font-class 引用 Symbol 引用 ...
  • 模版字元串 ``反引號表示 var cyy={ name:"cyy", age:18, say:function(){ console.log('我叫'+this.name+',我今年'+this.age+'歲'); }, say2:function(){ console.log(`我叫`+this ...
  • `react router ^5.1.2` 在有正在編輯的內容未保存時,發生了路由切換,此時需要給出一些提示,並由用戶控制是否進行跳轉。 在 進行路由管理時,可以使用 組件實現此功能,其中的 屬性可以接受一個函數,返回 的時候就提示,預設為window.confirm進行提示,用戶可以選擇是否跳轉; ...
  • HTML 鏈接:HTML 使用超級鏈接與網路上的另一個文檔相連。幾乎可以在所有的網頁中找到鏈接。點擊鏈接可以從一張頁面跳轉到另一張頁面。 HTML 超鏈接(鏈接)? HTML使用標簽 <a>來設置超文本鏈接,是可以從一個頁面指向另一個目的端的鏈接。 超鏈接可以是一個字,一個詞,或者一組詞,也可以是一 ...
  • HTML 段落:段落是通過 <p> 標簽定義的 1 <p>這是一個段落 2 <p>這是另一個段落 註釋:即使忘了使用結束標簽,上面的例子在大多數瀏覽器中都沒問題,但不要依賴這種做法。忘記使用結束標簽會產生意想不到的結果和錯誤。 HTML 折行:在不產生一個新段落的情況下進行換行(新行),請使用 <b ...
  • 初學編程的小伙伴經常會遇到的問題,1.沒資源 2.沒人帶 3.不知道從何開始 ,小編也是從新手期過來的,所以很能理解萌新的難處,現在整理一些以前自己學習的一些資料送給大家,希望對廣大初學小伙伴有幫助! 這套「web前端入門教程」將多年的編程經驗灌輸其中,典型的實踐派。既適合初學者入門,也適合程式員進 ...
一周排行
  • 前幾天發佈了 "抄抄《CSS 故障藝術》的動畫" 這篇文章,在這篇文章里介紹瞭如何使用Win2D繪製文字然後配合BlendEffect製作故障藝術的動畫。本來打算就這樣收手不玩這個動畫了,但後來又發現性能不符合理想。明明只是做做Resize動畫和用BlendEffect混合,為什麼性能會這麼差呢? ...
  • 控制條控制項: progressBar 不能按照你程式的進程自動變化,需認為計算,調整變化量 private void progressBar1_Click(object sender, EventArgs e) { this.progressBar1.Maximum = 100;//設置進度條最大長 ...
  • 首先創建一個asp.net core web應用程式 第二步 目前官方預置了7種模板項目供我們選擇。從中我們可以看出,既有我們熟悉的MVC、WebAPI,又新添加了Razor Page,以及結合比較流行的Angular、React前端框架的模板項目。 空項目模板 Program.cs using S ...
  • 對閉包的理解 1.對於成員變數和局部變數:成員變數就是方法外部,類的內部定義的變數;局部變數就是方法或語句塊內部定義的變數。局部變數必須初始化。 形式參數是局部變數,局部變數的數據存在於棧記憶體中。棧記憶體中的局部變數隨著方法的消失而消失。成員變數存儲在堆中的對象裡面,由垃圾回收器負責回收。 成員變數它 ...
  • Xamarin.Forms讀取並展示Android和iOS通訊錄 TerminalMACS客戶端 本文同步更新地址: https://dotnet9.com/11520.html https://terminalmacs.com/861.html 閱讀導航: 一、功能說明 二、代碼實現 三、源碼獲取 ...
  • 做下對文件複製操作相關的筆記: /// <summary> /// 文件幫助類 /// </summary> public class FileHelper { /// <summary> /// 複製一個目錄下所有文件到一個新目錄下 /// </summary> /// <param name=" ...
  • 前言 有一個東西叫做鴨子類型,所謂鴨子類型就是,只要一個東西表現得像鴨子那麼就能推出這玩意就是鴨子。 C 裡面其實也暗藏了很多類似鴨子類型的東西,但是很多開發者並不知道,因此也就沒法好好利用這些東西,那麼今天我細數一下這些藏在編譯器中的細節。 不是只有 和 才能 在 C 中編寫非同步代碼的時候,我們經 ...
  • [toc] 1.應用背景 底端設備有大量網路報文(位元組數組):心跳報文,數據採集報文,告警報文上報。需要有對應的報文結構去解析這些位元組流數據。 2.結構體解析 由此,我第一點就想到了用結構體去解析。原因有以下兩點: 2.1.結構體存在棧中 類屬於引用類型,存在堆中;結構體屬於值類型,存在棧中,在一個 ...
  • 《深入淺出 C#》 (第3版) [作者] (美) Andrew Stellman (美) Jennifer Greene[譯者] (中) 徐陽 丁小峰 等譯[出版] 中國電力出版社[版次] 2016年08月 第1版[印次] 2018年04月 第4次 印刷[定價] 148.00元 【引子】 要學習編程 ...
  • 記錄使用對象初始值設定項初始化對象。 using System; using System.Collections.Generic; namespace ConsoleApp2 { class Program { static void Main(string[] args) { // 使用構造函數 ...
x