一般在动作游戏中,玩家可以通过对输入设备输入一系列的指令让角色完成某个或多个特定的动作.以格斗游戏<拳皇>为例,键入↓↘→↘↓↙← + A or C可以触发IORI的必杀技八稚女: 通过一系列输入最终让角色完成某个动作,就是指令技.其原理是通过将玩家的键入与指令技列表中的键位进行比对,如果一致,就匹配成功.以下是JavaScript的简单实现: class Instruct { constructor(callback) { this.instructs = {}; this.MAX_INTE…

在很多动作游戏中,玩家操控的角色可以施放出比普通攻击更强力的蓄力技,一般操作为按住攻击键一段时间然后松开,具体效果像下面这张图: 要实现这个操作首先要记录下按键被按住的时间,初始是0: this.sabreChargeTime = 0; 接下来是能够施放技能所需要的时间,超过这个时间后松开按键,即可施放出技能,否则无效: this.MAX_SABRE_CHARGE_TIME = 150; 代码结构如下: if (key[74]) {//攻击 this.updateSabreCharge(); /…

在实现了<HTML5 2D平台游戏开发——角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色只有数个动作的情况下,如果后期角色动作越来越多,那么这种编码方式不仅容易出错,而且还难以维护,我意识到自己正在朝一个错误的方向前进.在做了一番调研后,发现有限状态机(Finite-state machine,简称FSM)是解决这类问题的方案之一.不过在使用状态机之前,首先要明确都有些什么状态,状态之间是如何切…

此前已经完成了一部分角色的动作,现在还缺少可以交互的地图让游戏看起来能玩.不过在开始之前应当考虑清楚使用什么类型的地图,就2D平台游戏来说,一般有两种类型的地图,Tile-based和Art-based,即基于瓦片风格和美术风格两种.Tile-based的典型代表是<Super Mario>(超级马里奥),Art-based记不太清楚了,能够回想起来的是去年出的一款叫做<Owlboy>(猫头鹰男孩)的游戏.      Super Mario  Owlboy 由于Art-based的…

在游戏中会经常遇到斜坡地形,比如众所周知的魂斗罗,角色可以在坡上移动和跳跃: 斜坡在2D游戏中很常见,处理起来也较为棘手.最初我打算用分离轴定律来实现,在建立了一个物理模型之后: 发现上坡时没什么问题,但下坡时有比较明显的弹跳,这并不是预期的结果,因为我想让物体“粘”在坡上.产生这个问题的根本原因是物体的运动分为两个阶段, 首先是水平方向的移动,最后是垂直方向的移动: 如果X轴和Y轴的速度没有一定的方式关联起来,就会产生跳跃问题.根据力的平行四边形法则,物体的运行轨迹应该像这样(以向右下坡为例)…

在庞大的游戏世界中,玩家不能一览地图全貌,而是只能看到其中一部分,并一步步探索,这时就要用到一种技术来显示局部的地图,游戏术语称为摄像机(Camera).下面两张图中的白色矩形框表示了Camera的作用,玩家控制的角色总是在该矩形内. 可以想像成一个200X100宽高的相框固定在坐标(0,0)处,然后移动下面的蓝纸,蓝纸的不同位置就会显示在相框中. 同时,也只需绘制出现在相框中的地图即可,这样可以提升一部分程序的性能.为实现Camera功能,需要添加一些辅助方法. 改造一下原来的AABB函数:…

目前为止,角色除了基本的移动外还什么都不能做,于是我打算先实现角色的攻击动画.角色的普通攻击一共可以分为三个阶段: 一段斩 二段斩 三段斩 移动攻击 跳跃攻击 触发方式为角色站立时按下J(攻击)键,角色开始攻击,在此期间连续快速敲打J键,可继续触发后续攻击.最终效果如下: (AD移动,K跳跃,J攻击,U冲刺)     // { let loadBatch = { count: 0, total: assetList.length, cb: callback }; for (let i = 0;…

这个术语不知道怎么翻译比较贴切,但并不妨碍对字面意思的理解,大概就是飞檐走壁.比如: 这是游戏<忍者龙剑传>中的场景,玩家可以通过操纵角色在墙面上移动并跳跃. 首先需要实现角色抓墙这一动作,整理一下思路: 角色在平地时不能爬上墙面 在跳跃时并且处于下降状态才能爬上墙面 当角色有机会爬上墙面时,需要按下墙面所在方向才能抓住墙 在抓墙过程中,还可以操作角色执行一系列动作: 松开所有按键,角色从墙上跌落 按下与墙面所在方向相反的按键,角色离开墙面 相反方向键与跳跃键同时按下,角色跳离墙面 以左边的墙…

在上一篇<Canvas制作时间与行为可控的sprite动画>中已经实现了角色的左右移动,本篇继续实现角色的一系列动作之一:跳跃.先来看看最终效果: 要实现跳跃,必须模拟垂直方向的速度和重力加速度,由于Canvas中坐标系与平时见到的平面坐标系不同,向下为正,向上为负,故定义两个变量: var vy = -12; //垂直方向的速度,负代表向上 var gravity = 0.5; //重力加速度 另外,还需要一些变量来标记角色的状态: var onGround = true, //标识角色是否…

在Web领域通常会用到一组sprite来展示动画,这类动画从开始到结束往往不会有用户参与,即用户很少会用控制器(例如鼠标.键盘.手柄.操作杆等输入设备)进行操作.但在游戏领域,sprite动画与控制器的操作是密不可分的.最近在写一个小游戏,涉及到很多知识点,于是打算把这些内容通过一些Demo总结出来备忘. 这是第一阶段的运行效果,用键盘A.D来控制人物左右移动,空格/K控制人物跳跃,U键冲刺:   // = this.frame.duration) { this.index++; this.el…