一块儿来作webgame，《卡片魔兽》（一）基础战斗

时间 2019-11-21

标签一块儿来作 webgame 基础战斗繁體版

原文原文链接

写在前面的话

这不是教程，只是博主在娱乐过程当中的一些小结记录。博主水平有限，没有什么高级的东西，只是将一些小的知识点结合一下，作这么一个养成类型的卡片页面游戏（=。=！有点绕）。作一个完整的游戏，涉及内容不少，因此一步一步来，这一篇，主要是讲《卡片魔兽》的基础战斗的实现。完整的战斗估计要用三篇博文来说，因此，这是第一篇。前端

关于使用的语言，PHP+Javascript(jQuery)+HTML+CSS。没使用HTML5，由于我还在学HTML5，争取之后可使用HTML5来进行制做。数组

关于游戏设计

游戏设计包含不少方面，这里主要是指内容设计，好比职业，技能，系统等。因此，其实本不在该篇内容以内，可是为了能很好的说明基础战斗，这里仍是要说两句。动画

从名字就能看出来，是和魔兽世界有关的，因此，职业、技能等都使用魔兽世界的东西。关于技能，每一个职业将会有5种技能，3种主动技能（如：攻击，补血），2种辅助技能（如：加BUFF，保护队友等）。this

本篇主要讲基础战斗，因此只会涉及攻击和补血，其它的战斗状况将会在之后介绍spa

战斗界面预览

试玩-基础战斗

这里能够试玩设计

基础战斗的主要内容

从程序的角度讲，也就两方面，一、处理动画。二、处理数据。那么本篇的内容以下：code

普通攻击的伤害计算
爆机攻击的伤害计算
单体补血
群体补血
职业能量和技能消耗能量的判断
电脑随机选择玩家角色进行攻击
攻击动画（包括补血）
受到伤害动画
血条、能量条的消耗与增长计算
角色死亡

在讲这些内容前，还得先讲讲职业角色的内容，关系到战斗时数据的读取与处理对象

职业角色的属性

每个职业角色，都用一个数组来保存它的各类属性，拿战士为例，它会有如下几个属性blog

职业
种族
性别
等级
总血量
剩余血量
能量上限
已有能量
能量颜色(用于显示)
能量类型
爆机概率
攻击速度

以上只是本篇博文要介绍的内容，固然一个角色还有不少的属性，如：buff，debuff，角色状态（如：盗贼的潜行）排序

玩家角色属性数组：

$this->_players_status=array(
    '1'=>array(
        'profession'=>'priest',  //职业：牧师
        'race'=>'human',  //种族：人类
        'sex'=>'female',  //性别：女
        'lv'=>1,  //等级：1级
        'blood_total'=>400,  //总血量：400
        'blood_remain'=>400,  //剩余血量：400
        'energy_total'=>600,  //能量上限：600
        'energy'=>600,  //剩余能量：600
        'energy_type'=>'magic',  //能量类型：魔法
        'energy_color'=>'blue',  //能量颜色
        'crit'=>10,  //爆机概率：10%
        'speed'=>25  //攻击速度：25%
    ),
    '2'=>array(
        'profession'=>'warrior',
        'race'=>'dwarf',
        'sex'=>'female',
        'lv'=>1,
        'blood_total'=>500,
        'blood_remain'=>500,
        'energy_total'=>100,
        'energy'=>0,
        'energy_type'=>'rage',
        'energy_color'=>'red',
        'crit'=>10,
        'speed'=>10
    ),
);

这些属性里不少一看就懂的，也没什么特别。只是要讲讲几个和攻击效果有关的

energy_type：能量类型。咱们知道魔兽世界里的能量有三种：

一、魔法。初始状态是满值，即等于能量上限
二、怒气。初始状态是空值，即0
三、能量。初始状态是满值，即等于能量上限

在这里，魔法和能量从类型上讲是同样的，只是颜色不一样，因此用energy_color来作一下区分。程序根据它们的值来调用不一样的CSS样式，从而显示不一样的颜色

crit：爆机概率。是一个百分比。

speed：攻击速度。也是一个百分比，它是决定攻击前后顺序的一个值。好比敌我双方有10个角色，在玩家技能选择结束后，哪一个角色先攻击，就靠这个值来作排序，值越大的，越先攻击。

职业技能的属性

和角色属性同样，技能属性也用一个数组来保存，看看牧师和战士的技能先：

$this->_players_skills=array(
    '1'=>array(  //对应角色属性数组里的角色
        'kszl'=>array(  //技能简写（拼音）
            'id'=>0,    //技能ID
            'name'=>'快速治疗',  //技能名称
            'damage'=>120,  //技能基本伤害值（若是是治疗技能，它就是基本补血值）
            'use_energy'=>50,  //使用能量值
            'add_energy'=>0,  //增长能量值
            'cure'=>1,  //是不是治疗技能
            'unit'=>'1',  //伤害单位，数值或百分比
            'member'=>1,  //目标单位数，0为群体
            'explanation'=>'快速治疗一名友放目标，回复120点生命',  //技能介绍
        ),
        'zldy'=>array(
            'id'=>1,
            'name'=>'治疗祷言',
            'damage'=>80,
            'use_energy'=>100,
            'add_energy'=>0,
            'cure'=>1,
            'unit'=>'1',
            'member'=>0,
            'explanation'=>'为全部队友回复80点生命',
        ),
        'cj'=>array(
            'id'=>2,
            'name'=>'惩击',
            'damage'=>120,
            'use_energy'=>80,
            'add_energy'=>0,
            'explanation'=>'惩击一名敌人，形成120点神圣伤害',
        ),
        'tkyz'=>array(
            'id'=>3,
            'name'=>'痛苦压制',
            'damage'=>40,
            'use_energy'=>120,
            'add_energy'=>0,
            'explanation'=>'保护一名队友，使其受到的全部伤害减小40%',
        ),
        'zysd'=>array(
            'id'=>4,
            'name'=>'真言术韧',
            'damage'=>30,
            'use_energy'=>80,
            'add_energy'=>0,
            'explanation'=>'增长全部小队成员30%生命',
        ),

    ),
    '2'=>array(
        'zs'=>array(
            'id'=>0,
            'name'=>'致死打击',
            'damage'=>100,
            'use_energy'=>0,
            'add_energy'=>20,
            'explanation'=>'一次强有力的攻击，形成100点伤害，产生20点怒气值',
        ),
        'jrdj'=>array(
            'id'=>1,
            'name'=>'巨人打击',
            'damage'=>80,
            'use_energy'=>0,
            'add_energy'=>0,
            'explanation'=>'形成80点基础伤害，可使你接下来的攻击无视目标100%护甲，持续3个回合',
        ),
        'yy'=>array(
            'id'=>2,
            'name'=>'英勇',
            'damage'=>150,
            'use_energy'=>30,
            'add_energy'=>0,
            'explanation'=>'一次猛烈攻击，形成150点伤害，消耗30点怒气',
        ),
        'yh'=>array(
            'id'=>3,
            'name'=>'援护',
            'damage'=>0,
            'use_energy'=>0,
            'add_energy'=>0,
            'explanation'=>'高速跑向一名队友，你将代替目标承受下一次攻击',
        ),
        'jjnh'=>array(
            'id'=>4,
            'name'=>'集结呐喊',
            'damage'=>20,
            'use_energy'=>0,
            'add_energy'=>0,
            'cure'=>1,
            'unit'=>'%',
            'member'=>0,
            'explanation'=>'暂时使全队成员生命值提升20%，持续3个回合，3个回合后，这些生命值将被扣除',
        ),
    ),
);

第一个技能写了注释，这里仍是要讲一下几个特别一点东西

user_energy和add_energy：消耗能量和增长能量。这就是能量类型中魔法和怒气的区别，魔法，在普通攻击技能下只会消耗，而怒气则不一样，有的技能产生怒力，而不消耗怒气，有的消耗而不产生。因此有这两个属性值。

unit：单位。通常状况下就两种，一、数值。二、是百分比。若是是百分比，系统会按伤害值的百分比进行计算，若是是数值，则不用

有了职业角色属性和职业技能属性后，下面就来说讲战斗相关内容

攻击和补血

攻击和补血在程序看来，是没区别的，只是目标对象不同。攻击针对敌方目标，补血针对已方目标。攻击多数是减血量，而补血多数是增长血量。

在攻击的逻辑上，首先得判断目标是生存状况，若是已经死了，万万不能鞭尸。

这篇主要是角色职业、技能设定，下一篇就是前端战斗实现了