【开源】使用Angular9和TypeScript开发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