【开源】使用Angular9和TypeScript开发RPG游戏(补充了Buffer技能)

RPG系统构造

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

Github项目源代码地址

RPG系统构造

ver0.02 2020/03/31

人物

和其他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

时间: 2024-10-01 06:51:52

【开源】使用Angular9和TypeScript开发RPG游戏(补充了Buffer技能)的相关文章

【开源】使用Angular9和TypeScript开发RPG游戏(20200410版)

源代码地址 通过对于斗罗大陆小说的游戏化过程,熟悉Angular的结构以及使用TypeScript的面向对象开发方法. Github项目源代码地址 RPG系统构造 ver0.03 2020/04/10 人物 和其他RPG游戏类似,游戏里面的人物角色大致有这样的一些属性:生命值,魔法值(魂力),攻击力,防御力,速度.RPG游戏中的角色随着等级的提高,这些属性都会提升,属性提升的快慢则取决于资质,同时,由于在实际战斗中,会出现各种增益和光环效果,这些值都是动态变化的,所以这里将这些属性都设置了Bas

HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布

经历了几个月的改进,终于发布1.0.0版了.虽然引擎依然存在漏洞,但是比起上次更新还是要好多了.在这里不得不感谢各位网友的大力支持. 首先为引擎做一个开场白吧,也好让大家了解一下它: lufylegendRPG是基于lufylegend的HTML5游戏引擎.使用它时,需要引入lufylegend.js. 包含了LTileMap,LCharacter,LTalk,LEffect等多个实用的类. 由于是基于lufylegend,所以你需要了解一下lufylegend的用法,这样才能更合理,更快捷地运

JS开发HTML5游戏《神奇的六边形》(四)

近期出现一款魔性的消除类HTML5游戏<神奇的六边形>,今天我们一起来看看如何通过开源免费的青瓷引擎(www.zuoyouxi.com)来实现这款游戏. (点击图片可进入游戏体验) 因内容太多,为方便大家阅读,所以分成四部分来讲解. 本文为第四部分,主要包括: 16.分数往上飘动画 17.形状飞入动画 18.其他动画表现添加 19.游戏结束界面 20. 添加LOGO 21. 渲染优化 若要一次性查看所有文档,也可点击这里. 十六. 分数往上飘的动画 在表现加分时,分数会有个缩放的效果,然后往上

一个人独立开发 3D 游戏引擎可能吗?

作者:孙志超链接:https://www.zhihu.com/question/24733255/answer/42000966来源:知乎著作权归作者所有,转载请联系作者获得授权. 当然可以,但难道有个引擎,就可以做出真正商业化的游戏么?而且国产游戏大部分是网游啊. 几年前的老文--<一个人的服务器端>(只是为了说明游戏开发难度,不是针对题主问题.) 技术准备 能够做这个MMO的触发点是通过某些途径得到了某个大公司使用的一款3D引擎,其他的都是白手起家.当时大家还不知道有"分布式服务

如何制作一款HTML5 RPG游戏引擎——第三篇,利用幕布切换场景

开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么一个类. 本系列文章目录: 如何制作一款HTML5 RPG游戏引擎--第一篇,地图类的实现 http://blog.csdn.net/yorhomwang/article/details/8892305 如何制作一款HTML5 RPG游戏引擎--第二篇,烟雨+飞雪效果 http://blog.csd

如何制作一款HTML5 RPG游戏引擎——第四篇,情景对话

今天我们来实现情景对话.这是一个重要的功能,没有它,游戏将变得索然无味.所以我们不得不来完成它. 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容... 因此我们只能通过数组+JSON来将对话信息装起来,然后根据信息作出不同的显示.接下来我便要向大家展示实现方法. 先看本系列文章目录: 如何制作一款HTML5 RPG游戏引擎--第一篇,地图类的实现 http://blog.csdn.net/yorhomwang/article/details/88

RPG游戏设计(转自Gameres)

目录: 第一章 概述 第二章 场景 第三章 角色 第四章 道具 第五章 事件 第六章 对白 第七章 语音和音效 第八章 音乐 第九章 界面 第十章 规则 第十一章 命名 第一章:概述 RPG游戏即角色扮演游戏(Role Personate Game),玩家需要扮演游戏中的一位或者多位角色,在虚拟的世界中进行冒险.首先,让我们先来认识RPG游戏,从表现形式和玩法上,它可以分为以下几种: RPG:普通RPG游戏,有专门的战斗画面.战斗画面用不同的视角来表现: 采用斜45度视角,如台湾<仙剑奇侠传>

如何制作一款HTML5 RPG游戏引擎——第五篇,人物&amp;人物特效

上一次,我们实现了对话类,今天就来做一个游戏中必不可少的--人物类. 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几个特效,在以下讲解中会提到. 以下是本系列文章的目录: 如何制作一款HTML5 RPG游戏引擎--第一篇,地图类的实现 http://blog.csdn.net/yorhomwang/article/details/8892305 如何制作一款HTML5 RPG游戏引擎--第二篇,烟雨+飞雪效果 h

如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现

一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufylegend.暂时命名为lufylegendRPG.毕竟基于lufylegend,如果名称中不加上lufylegend这几个字的话,有点说不通啊...最近发布了0.1.0版,但是不理想,连一惯都是鼓励和赞赏我的lufy老先生都是出于真心的表示不满意.想了解0.1.0版的朋友可以看看这里(其实最好别看