HTML5 2D平台游戏开发#3冲刺
断断续续地把Demo又写了一阵,终于把角色的冲刺动作完成了。冲刺的作用是使角色能够快速移动,闪避攻击或障碍。其完成效果如下:

首先,仍需要一些变量来表示角色的冲刺状态:
//标识角色是否处于冲刺中
var dashing = false; //允许冲刺的时间限制,超过则停止冲刺
var dashLifeTime = 100; //用于防止冲刺键的连发
var keyPressCounter2 = 0;
在角色处于地面的情况下,按下U键可以让角色进行冲刺,松开时角色停止冲刺,若持续按住则角色冲刺动作持续至dashLifeTime耗尽。
另外冲刺中的移动速度变成普通的双倍,同时也可以改变冲刺的方向。
//U键冲刺
if (key[85]) {
if (keyPressCounter2++===1 && onGround) {
dashing = true;
} if (dashLifeTime > 0 && dashing) {
//根据冲刺时间的阶段来更新角色状态
if (dashLifeTime >= 80) playerState = 'readyToDash';
else if (dashLifeTime < 80 && dashLifeTime > 20) playerState = 'dash';
else playerState = 'endDash'; //每次消耗5个单位的冲刺时间
dashLifeTime -= 5;
//两倍移动速度
vx = moveSpeed * 2 * direction;
} else if (dashLifeTime <= 0) {//到达时间限制冲刺结束,更新标记与角色状态
dashing = false;
dashLifeTime = 100;
playerState = 'idle';
vx = 0;
}
}
//松开U键
else {
keyPressCounter2 = 0;
dashing = false;
dashLifeTime = 100;
}
以上便是控制角色冲刺的主要代码,不过这还不是难点。如果在操作中同时按下了多个按键,是它们都起作用还是其中一个按键起作用,这是一个要考虑的问题,也就是状态机。为方便起见,以下代码只粗略地列出了几种可能的情况(在冲刺键被按下的条件下):
if (key[85]) {
//省略部分代码
//按下跳跃原地起跳
if (key[32] || key[75]) {
vx = 0;
}
//若按下跳跃键的同时还按下了方向键
if ((key[32] || key[75]) && (key[65] || key[68])) {
playerState = 'move';
if (vy <= 0 && !onGround) {
playerState = 'isUp';
} else if (vy > 0 && !onGround) {
playerState = 'isDown';
}
vx = moveSpeed * direction;
}
if (key[65] || key[68]) {
if (onGround && !dashing) {
vx = moveSpeed * direction;
playerState = 'move';
} else if (dashing) {
vx = moveSpeed * 2 * direction;
}
}
if ((key[65] || key[68]) && !onGround && jumping) {
if (lastKey !== 85 && lastKey !== 65 && lastKey !== 68) {
if (dashing) vx = moveSpeed * 2 * direction;
else vx = moveSpeed * direction;
}
}
}
最终效果已更新至 《Canvas制作时间与行为可控的sprite动画》。
HTML5 2D平台游戏开发#3冲刺的更多相关文章
- HTML5 2D平台游戏开发#4状态机
在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...
- HTML5 2D平台游戏开发#6地图绘制
此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-base ...
- HTML5 2D平台游戏开发#11斜坡物理
在游戏中会经常遇到斜坡地形,比如众所周知的魂斗罗,角色可以在坡上移动和跳跃: 斜坡在2D游戏中很常见,处理起来也较为棘手.最初我打算用分离轴定律来实现,在建立了一个物理模型之后: 发现上坡时没什么问题 ...
- HTML5 2D平台游戏开发#8指令技
一般在动作游戏中,玩家可以通过对输入设备输入一系列的指令让角色完成某个或多个特定的动作.以格斗游戏<拳皇>为例,键入↓↘→↘↓↙← + A or C可以触发IORI的必杀技八稚女: 通过一 ...
- HTML5 2D平台游戏开发#7Camera
在庞大的游戏世界中,玩家不能一览地图全貌,而是只能看到其中一部分,并一步步探索,这时就要用到一种技术来显示局部的地图,游戏术语称为摄像机(Camera).下面两张图中的白色矩形框表示了Camera的作 ...
- HTML5 2D平台游戏开发#5攻击
目前为止,角色除了基本的移动外还什么都不能做,于是我打算先实现角色的攻击动画.角色的普通攻击一共可以分为三个阶段: 一段斩 二段斩 三段斩 移动攻击 跳跃攻击 触发方式为角色站立时按下J(攻击)键,角 ...
- HTML5 2D平台游戏开发#9蓄力技
在很多动作游戏中,玩家操控的角色可以施放出比普通攻击更强力的蓄力技,一般操作为按住攻击键一段时间然后松开,具体效果像下面这张图: 要实现这个操作首先要记录下按键被按住的时间,初始是0: this.sa ...
- HTML5 2D平台游戏开发#1
在Web领域通常会用到一组sprite来展示动画,这类动画从开始到结束往往不会有用户参与,即用户很少会用控制器(例如鼠标.键盘.手柄.操作杆等输入设备)进行操作.但在游戏领域,sprite动画与控制器 ...
- HTML5 2D平台游戏开发#10Wall Jump
这个术语不知道怎么翻译比较贴切,但并不妨碍对字面意思的理解,大概就是飞檐走壁.比如: 这是游戏<忍者龙剑传>中的场景,玩家可以通过操纵角色在墙面上移动并跳跃. 首先需要实现角色抓墙这一动作 ...
随机推荐
- 洛谷[P3622] 动物园
状压DP 发现本题中,每个小朋友是否高兴仅取决于其后五个动物的情况,我们可以用状压DP解决本题 首先已处理 num[i][s] 表示对于位置 i ,状态为 s 时有多少在 s 的同学满意 转移方程很好 ...
- Extension Methods "点"函数方法 扩展方法
原文发布时间为:2011-03-25 -- 来源于本人的百度文章 [由搬家工具导入] http://msdn.microsoft.com/en-us/library/bb383977.aspx 条件: ...
- 嵌入式 Linux线程锁详解pthread_mutexattr_t【转】
转自:http://blog.sina.com.cn/s/blog_8795b0970101il6g.html 在Posix Thread中定义有一套专门用于线程同步的mutex函数. . 创建和销毁 ...
- hdu 2654(欧拉函数)
Become A Hero Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- HDU 1998 奇数阶魔方【模拟填数/注意边界和细节】
奇数阶魔方 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- 源码分析——迁移学习Inception V3网络重训练实现图片分类
1. 前言 近些年来,随着以卷积神经网络(CNN)为代表的深度学习在图像识别领域的突破,越来越多的图像识别算法不断涌现.在去年,我们初步成功尝试了图像识别在测试领域的应用:将网站样式错乱问题.无线领域 ...
- CSS定位与布局:普通流
CSS定位与布局属于CSS的基础,也是CSS布局影响很大的一部分,具体主要包括三种定位与布局机制( Positioning schemes):普通流,浮动,绝对定位. 其实除了这三种之外,还有一些定位 ...
- luogu P1314 聪明的质监员
题目描述 小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...
- java中的堆、栈和常量池简介
一.它们各自存放的数据类型: 堆:存放所有new出来的对象. 栈:存放基本类型的变量数据和对象的应用,对象(new出来的对象)本身并不存在栈中,而是存放在堆中或者常量池中(字符串常量对象存放在常量池中 ...
- Iosapp升级版本步骤
1.打开地址https://itunesconnect.apple.com/WebObjects/iTunesConnect.woa,登录进入 2.选择ManageYour App,选中你要升级的那个 ...