使用Angular9和TypeScript开发RPG游戏的方法


Posted in Javascript onMarch 25, 2020

RPG系统构造

通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法。

项目地址

人物

和其他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表示场景转换。对话列表则使用@符号将角色和台词进行区分。

使用Angular9和TypeScript开发RPG游戏的方法

总结

到此这篇关于使用Angular9和TypeScript开发RPG游戏的文章就介绍到这了,更多相关Angular9和TypeScript开发RPG游戏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
Apr 13 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
js选择器全面解析
Jun 27 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 Javascript
详解小程序退出页面时清除定时器
Apr 28 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
Dec 06 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
javascript+css实现进度条效果
Mar 25 #Javascript
JS实现可控制的进度条
Mar 25 #Javascript
js实现简单进度条效果
Mar 25 #Javascript
JavaScript实现简单进度条效果
Mar 25 #Javascript
JavaScript实现随机点名程序
Mar 25 #Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 #Javascript
JS实现网页时钟特效
Mar 25 #Javascript
You might like
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
深入php数据采集的详解
2013/06/02 PHP
php实现邮件发送并带有附件
2014/01/24 PHP
PHP递归算法的简单实例
2019/02/28 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
JavaScript实现的简单拖拽效果
2015/06/01 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
理解Python垃圾回收机制
2016/02/12 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python 调用有道api接口的方法
2019/01/03 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
Python的信号库Blinker用法详解
2020/12/31 Python
高中生的自我鉴定范文
2014/01/24 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
大学生见习报告范文
2014/11/03 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2014年法院工作总结
2014/11/24 职场文书
2014年卫生工作总结
2014/11/27 职场文书