写在前面的话

这不是教程,只是博主在娱乐过程中的一些小结记录。博主水平有限,没有什么高级的东西,只是将一些小的知识点结合一下,做这么一个养成类型的卡片页面游戏(=。=!有点绕)。做一个完整的游戏,涉及内容很多,所以一步一步来,这一篇,主要是讲《卡片魔兽》的基础战斗的实现。完整的战斗估计要用三篇博文来讲,所以,这是第一篇。

关于使用的语言,PHP+Javascript(jQuery)+HTML+CSS。没使用HTML5,因为我还在学HTML5,争取以后可以使用HTML5来进行制作。

关于游戏设计

游戏设计包含很多方面,这里主要是指内容设计,比如职业,技能,系统等。所以,其实本不在该篇内容之内,但是为了能很好的说明基础战斗,这里还是要说两句。

从名字就能看出来,是和魔兽世界有关的,所以,职业、技能等都使用魔兽世界的东西。关于技能,每个职业将会有5种技能,3种主动技能(如:攻击,补血),2种辅助技能(如:加BUFF,保护队友等)。

本篇主要讲基础战斗,所以只会涉及攻击和补血,其它的战斗情况将会在以后介绍

战斗界面预览

试玩-基础战斗

这里可以试玩

基础战斗的主要内容

从程序的角度讲,也就两方面,1、处理动画。2、处理数据。那么本篇的内容如下:

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

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

职业角色的属性

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

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

以上只是本篇博文要介绍的内容,当然一个角色还有很多的属性,如: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:能量类型。我们知道魔兽世界里的能量有三种:

  • 1、魔法。初始状态是满值,即等于能量上限
  • 2、怒气。初始状态是空值,即0
  • 3、能量。初始状态是满值,即等于能量上限

在这里,魔法和能量从类型上讲是一样的,只是颜色不同,所以用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:单位。一般情况下就两种,1、数值。2、是百分比。如果是百分比,系统会按伤害值的百分比进行计算,如果是数值,则不用

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

攻击和补血

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

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

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

一起来做webgame,《卡片魔兽》(一)基础战斗的更多相关文章

  1. Java做acm所需要的基础知识之排序问题

    Java做acm所需要的基础知识. 以前做acm的题都是用C/C++来写代码的,在学习完Java之后突然感觉Java中的方法比C/C++丰富很多,所以就整理一下平时做题需要用到的Java基础知识. 1 ...

  2. 【雕爷学编程】MicroPython动手做(07)——零基础学MaixPy之机器视觉

    机器视觉 machine vision机器视觉是人工智能正在快速发展的一个分支.机器视觉作为生产过程中关键技术之一,在机器或者生产线上,机器视觉可以检测产品质量以便将不合格的产品剔除,或者指导机器人完 ...

  3. 【雕爷学编程】MicroPython动手做(06)——零基础学MaixPy之单目摄像头

    配套 OV2640摄像头:200W像素通用24P摄像头具有200万像素(1632x1232像素),其体积小.工作电压低,提供单片UXGA摄像和影像处理器的所有功能.通过SCCB总线控制,可以输出整帧. ...

  4. 【雕爷学编程】MicroPython动手做(05)——零基础学MaixPy之LCD液晶屏

    配套 2.4寸LCD屏 ST7789驱动器芯片(24P 320X240) ST7789驱动器芯片2.4寸LCD屏(24P 320X240)主要参数 1. 模块名称:液晶显示模块2. 型号:KD024C ...

  5. 【雕爷学编程】MicroPython动手做(04)——零基础学MaixPy之尝试运行

    1.hello micropython #MicroPython动手做(04)——零基础学MaixPy之基本示例 #程序之一:hello micropython #MicroPython动手做(04) ...

  6. 【雕爷学编程】MicroPython动手做(08)——零基础学MaixPy之识别颜色

    早上用百度搜了一下“颜色识别”,多少有了一点大致的概念,还是老办法,动手做,多实验,往前走,还请各位老师多多指点. OpenCV(百度百科)是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运 ...

  7. 一起来做webgame,《Javascript蜘蛛纸牌》

    不得不说,做游戏是会上瘾的,这次带来的是win系统上的经典游戏<蜘蛛纸牌>,不能完美,但求一玩 移牌 0 次 Javascript game_蜘蛛纸牌 正在努力加载... // " ...

  8. Python做性能测试-1、Locust基础篇

    前言:说起性能测试,大家想到的基本上都是工具jmeter和loadrunner多少也对执行性能测试的方式有一点认识,这些工具基本都实现了请求-响应-结果统计分析这样完整的测试链路,用户方面只需组织这些 ...

  9. 【雕爷学编程】MicroPython动手做(03)——零基础学MaixPy之开机测试

    1.几个知识点(1)MicroPython 是 Python 3 语言的精简高效实现 ,包括Python标准库的一小部分,并针对嵌入式微控制器(单片机)和受限制的环境进行了优化,它是Python延伸出 ...

随机推荐

  1. javascript——三元操作符

    {{C?A:B}} C条件成立则为A,不存在取B 比如在跟后台交互时,有许多要设默认值 <script type=''text/javascript> var value = docume ...

  2. 【MySQL】使用Length和Cast函数计算TEXT类型字段的长度

    背景: 前段时间,业务需要,为了快速让解析的Excel入库,所以把不是很确定的字段全部设置成了TEXT. 今天需要进行表结构优化,把字段长度控制在合适的范围,并尽量不使用TEXT类型. -- 计算长度 ...

  3. SQL优化

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  4. NSString相关操作

    //创建一个字符串对象 NSString * str_1 = @"Hello"; //字面量方法 ; NSString * str_2 = [NSString stringWith ...

  5. HTTP协议GET和POST请求的区别

    浏览器中输入网址访问资源一般都是通过GET方式:在FORM提交中,可以通过Method指定提交方式为GET或者POST,默认为GET提交.Http协议定义了与服务器交互的不同方法,最基本的方法有4种, ...

  6. 【Java EE 学习 16 上】【dbcp数据库连接池】【c3p0数据库连接池】

    一.回顾之前使用的动态代理的方式实现的数据库连接池: 代码: package day16.utils; import java.io.IOException; import java.lang.ref ...

  7. wap

    1.wap下拉刷新丑陋版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  8. jquery跳出each循环

    答案是使用 return false;  切记哦,不是使用break;也不是直接使用return; jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不 ...

  9. label、input、table标签

    <label>标签 <form> <label for="male">Male</label> <input type=&qu ...

  10. Trie URAL 7192 Chip Factory (15长春J)

    题目传送门 题意:从n个数中选出不同的三个数a b c,使得(a+b)^c 最大 分析:先将所有数字按位插入到字典树上,然后删除两个数字,贪心询问与剩下的数字最大异或值. /************* ...