使用Angular9和TypeScript開發(fā)RPG游戲的方法
RPG系統(tǒng)構(gòu)造
通過對(duì)于斗羅大陸小說的游戲化過程,熟悉Angular的結(jié)構(gòu)以及使用TypeScript的面向?qū)ο箝_發(fā)方法。
人物
和其他RPG游戲類似,游戲里面的人物角色大致有這樣的一些屬性:生命值,魔法值(魂力),攻擊力,防御力,速度。RPG游戲中的角色隨著等級(jí)的提高,這些屬性都會(huì)提升,屬性提升的快慢則取決于資質(zhì),同時(shí),由于在實(shí)際戰(zhàn)斗中,會(huì)出現(xiàn)各種增益和光環(huán)效果,這些值都是動(dòng)態(tài)變化的,所以這里將這些屬性都設(shè)置了Base和Real兩套數(shù)據(jù)。
Base屬性是指人物的初始屬性,是一種固有屬性,在整個(gè)游戲開始的時(shí)候就固定下來的。然后每個(gè)人物根據(jù)不同的資質(zhì),有一個(gè)成長(zhǎng)值,例如SSR的角色,成長(zhǎng)值可以是1.5,普通角色是1。這個(gè)成長(zhǎng)值關(guān)系到每提升一個(gè)等級(jí),角色屬性的增加值,代碼大致如下:
/**經(jīng)過增益之后的生命最大值 */
get RealMaxHP(): number {
var R = this.BaseMaxHP + (this.LV - 1) * this.MaxHPUpPerLv * this.GrowthFactor;
...
...
...
return Math.round(R);
}
這里的 MaxHPUpPerLv 表示每個(gè)等級(jí)的最大生命值提升數(shù)值,GrowthFactor則表示成長(zhǎng)值。
注意:這里使用了TypeScript的get屬性,也就是只讀/計(jì)算屬性來處理Real系的屬性,這些屬性都是實(shí)時(shí)計(jì)算出來的!
在小說里面,經(jīng)常可以看到3成功力的角色,為了表示這種情況,代碼里面還設(shè)定了一個(gè)Factor變量,通過這個(gè)變量可以設(shè)定整體的縮放比例。這個(gè)值默認(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);
}
由于乘法計(jì)算會(huì)出現(xiàn)小數(shù)點(diǎn),這里使用了Math.round對(duì)結(jié)果進(jìn)行取整。
技能
技能是一個(gè)游戲的戰(zhàn)斗核心,所有技能本質(zhì)上都是為了改變角色狀態(tài)。如果要具體細(xì)分大致可以分為
- 攻擊類:對(duì)于指定角色產(chǎn)生傷害
- 回復(fù)類:對(duì)于指定角色,回復(fù)生命值和魔法值
- 狀態(tài)改變類:這里其實(shí)包含了Buffer和狀態(tài)變化兩種情況,Buffer類大多是被動(dòng)技能,游戲中只要某個(gè)角色在戰(zhàn)場(chǎng)上就獲得,并且效果是持續(xù)性的。狀態(tài)變化則一般必須主動(dòng)施放技能才行,而且持續(xù)時(shí)間也是有限制的。
同時(shí)技能設(shè)計(jì)的時(shí)候,還需要設(shè)定使用的方向,既這個(gè)技能是對(duì)于我方使用,還是敵方使用,還是無差別使用。另外這個(gè)技能的對(duì)象是某個(gè)對(duì)象,還是群體。
/**技能類型 */
export enum enmSkillType {
/**攻擊 */
Attact,
/**治療 */
Heal,
/**光環(huán)和狀態(tài) */
Buffer
}
/**技能范圍 */
export enum enmRange {
Self, //自己
PickOne, //選擇一個(gè)人
RandomOne, //隨機(jī)選擇一個(gè)人
FrontAll, //前排所有人
BackAll, //后排所有人
EveryOne, //戰(zhàn)場(chǎng)所有人
}
/**只能方向 */
export enum enmDirect {
MyTeam, //本方
Enemy, //敵方
All, //全體
}
一般使用枚舉來編寫這樣相對(duì)固定,項(xiàng)目較少的列表
技能的設(shè)計(jì),這里使用了OOP的繼承來實(shí)現(xiàn),技能的基類定義了一些共通的屬性和抽象方法。設(shè)計(jì)的時(shí)候還考慮到以下幾種特殊情況
- 每一種具體技能必須要實(shí)現(xiàn)一個(gè)執(zhí)行(施放)方法:Excute,這里使用抽象函數(shù),來強(qiáng)制子類型必須要實(shí)現(xiàn)這個(gè)方法
- 對(duì)于復(fù)雜技能,需要有一個(gè)自定義的執(zhí)行方法:CustomeExcute,同時(shí)通過返回值來告訴系統(tǒng)是不是該技能有自定義執(zhí)行方法。則跳過固有的Excute方法。
- 對(duì)于有些技能可能要同時(shí)實(shí)現(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;
}
//攻擊并中毒這樣的兩個(gè)效果疊加的技能
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來檢測(cè)是否擁有對(duì)象
劇情
劇情暫時(shí)使用傳統(tǒng)的列表在當(dāng)前位置指針方式來制作
export const FightPrefix = "[FightScene]";
export const ChangeScenePrefix = "[ChangeScene]";
export const Scene0000: SceneInfo = {
Title: "引子 穿越的唐家三少",
Background: "唐門",
Lines: [
"唐門唐三@我知道,偷入內(nèi)門,偷學(xué)本門絕學(xué)罪不可恕,門規(guī)所不容。但唐三可以對(duì)天發(fā)誓,絕未將偷學(xué)到的任何一點(diǎn)本門絕學(xué)泄露與外界。",
FightPrefix + "Battle0001",
"唐門唐三@我說這些,并不是希望得到長(zhǎng)老們的寬容,只是想告訴長(zhǎng)老們,唐三從未忘本。以前沒有,以后也沒有。",
"唐門唐三@唐三的一切都是唐門給的,不論是生命還是所擁有的能力,都是唐門所賦予,不論什么時(shí)候,唐三生是唐門的人,死是唐門的鬼,",
"唐門唐三@我知道,長(zhǎng)老們是不會(huì)允許我一個(gè)觸犯門規(guī)的外門弟子尸體留在唐門的,既然如此,就讓我骨化于這巴蜀自然之中吧。",
"唐門長(zhǎng)老@玄天寶錄,你竟然連玄天寶錄中本門最高內(nèi)功也學(xué)了?",
"唐門唐三@赤裸而來,赤裸而去,佛怒唐蓮算是唐三最后留給本門的禮物。",
"唐門唐三@現(xiàn)在,除了我這個(gè)人以外,我再?zèng)]有帶走唐門任何東西,秘籍都在我房間門內(nèi)第一塊磚下。唐三現(xiàn)在就將一切都還給唐門。",
"唐門唐三@哈哈哈哈哈哈哈……。",
"唐門長(zhǎng)老@等一下。",
"唐門唐三@(云霧很濃,帶著陣陣濕氣,帶走了陽光,也帶走了那將一生貢獻(xiàn)給了唐門和暗器的唐三。)",
ChangeScenePrefix + "Scene0001"
]
};
這里使用 FightPrefix表示進(jìn)入戰(zhàn)斗,ChangeScenePrefix表示場(chǎng)景轉(zhuǎn)換。對(duì)話列表則使用@符號(hào)將角色和臺(tái)詞進(jìn)行區(qū)分。

總結(jié)
到此這篇關(guān)于使用Angular9和TypeScript開發(fā)RPG游戲的文章就介紹到這了,更多相關(guān)Angular9和TypeScript開發(fā)RPG游戲內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
AngularJS2中一種button切換效果的實(shí)現(xiàn)方法(二)
這篇文章主要介紹了AngularJS2中一種button切換效果的實(shí)現(xiàn)方法(二),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-03-03
AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試
本文主要介紹AngularJS 如何在控制臺(tái)進(jìn)行錯(cuò)誤調(diào)試,還不錯(cuò),分享給大家,希望給大家做一個(gè)參考。2016-06-06
詳解webpack+es6+angular1.x項(xiàng)目構(gòu)建
這篇文章主要介紹了詳解webpack+es6+angular1.x項(xiàng)目構(gòu)建, 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
詳解基于Bootstrap+angular的一個(gè)豆瓣電影app
本篇文章主要介紹了基于Bootstrap+angular的一個(gè)豆瓣電影app ,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06
AngularJS使用ng-Cloak阻止初始化閃爍問題的方法
這篇文章主要介紹了AngularJS使用ng-Cloak阻止初始化閃爍問題的方法,結(jié)合實(shí)例形式分析了AngularJS使用ng-Cloak來解決初始化時(shí)出現(xiàn)閃爍問題的相關(guān)技巧,需要的朋友可以參考下2016-11-11
Angularjs中ng-repeat的簡(jiǎn)單實(shí)例
這篇文章主要介紹了Angularjs中ng-repeat的簡(jiǎn)單實(shí)例的相關(guān)資料,這里提供兩個(gè)實(shí)例方法幫助大家徹底掌握這部分內(nèi)容,需要的朋友可以參考下2017-08-08
AngularJs返回前一頁面時(shí)刷新一次前面頁面的方法
今天小編就為大家分享一篇AngularJs返回前一頁面時(shí)刷新一次前面頁面的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
AngularJS基礎(chǔ) ng-readonly 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-readonly 指令,這里對(duì)ng-readonly指令的資料做了整理,有學(xué)習(xí)AngularJS 指令的同學(xué)可以參考下2016-08-08

