在很多动作游戏中,玩家操控的角色可以施放出比普通攻击更强力的蓄力技,一般操作为按住攻击键一段时间然后松开,具体效果像下面这张图:

要实现这个操作首先要记录下按键被按住的时间,初始是0:

this.sabreChargeTime = 0;

接下来是能够施放技能所需要的时间,超过这个时间后松开按键,即可施放出技能,否则无效:

this.MAX_SABRE_CHARGE_TIME = 150;

代码结构如下:

if (key[74]) {//攻击
this.updateSabreCharge(); //蓄力
} else {
this.releasePowerSlash(); //施放攻击
} function updateSabreCharge() {
this.sabreChargeTime++;
} function releasePowerSlash(callback) {
if(this.sabreChargeTime > this.MAX_SABRE_CHARGE_TIME) {
this.state = STATE.POWER_SLASH;
this.play(); callback && callback();
}
this.resetSabreCharge(); //重置计数器
} function resetSabreCharge() {
this.sabreChargeTime = 0;
}

可以在角色动作的各个阶段按住攻击键触发蓄力。

更新日志

  2017/04/09  更新角色跳跃

  2017/04/21  更新角色冲刺

  2017/05/01  更新角色状态机

  2017/05/16  更新角色攻击动画

  2017/05/22  更新角色移动攻击动画

  2017/05/24  更新角色跳跃攻击动画

  2017/06/04  更新地图绘制

  2017/06/22  更新摄像机、长距离冲刺

  2017/07/01  更新指令技

  2017/07/06  更新蓄力技

HTML5 2D平台游戏开发#9蓄力技的更多相关文章

  1. HTML5 2D平台游戏开发#8指令技

    一般在动作游戏中,玩家可以通过对输入设备输入一系列的指令让角色完成某个或多个特定的动作.以格斗游戏<拳皇>为例,键入↓↘→↘↓↙← + A or C可以触发IORI的必杀技八稚女: 通过一 ...

  2. HTML5 2D平台游戏开发#4状态机

    在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...

  3. HTML5 2D平台游戏开发#6地图绘制

    此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-base ...

  4. HTML5 2D平台游戏开发#11斜坡物理

    在游戏中会经常遇到斜坡地形,比如众所周知的魂斗罗,角色可以在坡上移动和跳跃: 斜坡在2D游戏中很常见,处理起来也较为棘手.最初我打算用分离轴定律来实现,在建立了一个物理模型之后: 发现上坡时没什么问题 ...

  5. HTML5 2D平台游戏开发#7Camera

    在庞大的游戏世界中,玩家不能一览地图全貌,而是只能看到其中一部分,并一步步探索,这时就要用到一种技术来显示局部的地图,游戏术语称为摄像机(Camera).下面两张图中的白色矩形框表示了Camera的作 ...

  6. HTML5 2D平台游戏开发#5攻击

    目前为止,角色除了基本的移动外还什么都不能做,于是我打算先实现角色的攻击动画.角色的普通攻击一共可以分为三个阶段: 一段斩 二段斩 三段斩 移动攻击 跳跃攻击 触发方式为角色站立时按下J(攻击)键,角 ...

  7. HTML5 2D平台游戏开发#10Wall Jump

    这个术语不知道怎么翻译比较贴切,但并不妨碍对字面意思的理解,大概就是飞檐走壁.比如: 这是游戏<忍者龙剑传>中的场景,玩家可以通过操纵角色在墙面上移动并跳跃. 首先需要实现角色抓墙这一动作 ...

  8. HTML5 2D平台游戏开发#2跳跃与二段跳

    在上一篇<Canvas制作时间与行为可控的sprite动画>中已经实现了角色的左右移动,本篇继续实现角色的一系列动作之一:跳跃.先来看看最终效果: 要实现跳跃,必须模拟垂直方向的速度和重力 ...

  9. HTML5 2D平台游戏开发#1

    在Web领域通常会用到一组sprite来展示动画,这类动画从开始到结束往往不会有用户参与,即用户很少会用控制器(例如鼠标.键盘.手柄.操作杆等输入设备)进行操作.但在游戏领域,sprite动画与控制器 ...

随机推荐

  1. java 概括

    作者:Dnvce链接:https://www.zhihu.com/question/61950442/answer/441166734来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  2. luogu P1446 [HNOI2008]Cards

    题目链接 luogu P1446 [HNOI2008]Cards 题解 题意就是求染色方案->等价类 洗牌方式构成成了一个置换群 然而,染色数限制不能用polay定理直接求解 考虑burnsid ...

  3. bzoj 5163: 第k大斜率

    5163: 第k大斜率 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 15  Solved: 4[Submit][Status][Discuss] D ...

  4. 六. 异常处理10.Java的内置异常

    在标准包java.lang中,Java定义了若干个异常类.前面的例子曾用到其中一些.这些异常一般是标准类RuntimeException的子类.因为java.lang实际上被所有的Java程序引入,多 ...

  5. PHP添加mcrypt扩展模块

    PHP添加mcrypt扩展模块 系统环境:CentOS6.3 APACHE:httpd-2.4.2 PHP:php-5.3.21 一.安装mcrypt 1.下载Libmcrypt,mhash,mcry ...

  6. ReactNative学习笔记1 Flexbox布局

    一.比例属性flex和布局方向属性flexDirection 例如三个视图的flex属性值分别为2.4.8,则它们的高度比例为2:4:8.,宽度不指定,默认为全屏的宽度. class ZLFReact ...

  7. perl一次读取多行文本的策略

    在处理文本时,经常遇到这种情况:就是我们须要把两行文本做一个比較,然后选择性输出. 而在while(<FILEHAND>){do something}程序块中默认仅仅能一次读取一行.笔者在 ...

  8. [ACM] POJ 1035 Spell checker (单词查找,删除替换添加不论什么一个字母)

    Spell checker Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18693   Accepted: 6844 De ...

  9. 利用excel去除txt文本中重复项

    2017-04-10 1.要去重的文件,点击右键,选择程序. 2.选择excel表格或者wps表格. 3.excel表格去重:选中单元格——数据——筛选——高级筛选——选择不重复记录——确定 wps表 ...

  10. ECSHOP后台开发模块步骤

    一.建数据库二.添加到后台导航栏并配置相关语言包三.权限配置四.添加增删查改五.增加其他功能(复制,搜索(暂时调不出来页面),排序,转移,AJAX) 以添加支付信息模块为例 第一步首先我们用phpmy ...