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

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

通过一系列输入最终让角色完成某个动作，就是指令技。其原理是通过将玩家的键入与指令技列表中的键位进行比对，如果一致，就匹配成功。以下是JavaScript的简单实现：

class Instruct {constructor(callback) {this.instructs = {};    this.MAX_INTERVAL = 250;    //超时时间this.interval = 0;    //上一次输入的时间this.pressedKeys = [];    //记录输入this.callback = callback;window.addEventListener('keydown',this.onKeyDown.bind(this));}//注册指令
    registerinstruct(instructName,instructKeys) {if(this.instructs[instructName]) return false;this.instructs[instructName] = instructKeys;return true;}onKeyDown(e) {let now = +new Date;if(now - this.interval > this.MAX_INTERVAL) this.pressedKeys = [];this.interval = now;//记录指令this.pressedKeys.push(e.keyCode);//检查指令this.checkForinstruct();}checkForinstruct() {let instructFound = '';for(let instructName in this.instructs) {if(this.instructs.hasOwnProperty(instructName)) {//通过比对已记录的指令与设置好的指令来确认是否符合条件if (this.pressedKeys.join(' ').indexOf(this.instructs[instructName].join(' ')) > -1) {instructFound = instructName;break;}}}if(instructFound !== '') {this.pressedKeys = [];this.callback && this.callback.call(this,instructFound);}}removeinstruct(instructName) {if(this.instructs[instructName]) {this.instructs[instructName] = undefined;return true;}return false;}
}

使用方法：

var instruct = new Instruct((matching) => {console.log(matching);
});instruct.registerinstruct('demo',[83,68,83,65,74]);  // ↓ → ↓ ← J

下面是一个实际操作的例子，输入S D S A J(正转半圈、反转半圈+J)来触发：

实现了指令技以后，就能将这个方法用到游戏中，游戏使用U键可以让角色冲刺，另外如果输入→+→也能达到同样的效果。下图即是使用指令达到的效果：

更新日志

　　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 更新指令技

demo

转载于:https://www.cnblogs.com/undefined000/p/detecting-key-and-special-moves-with-javascript.html

HTML5 2D平台游戏开发#8指令技相关推荐

HTML5 2D平台游戏开发#4状态机
在实现了<HTML5 2D平台游戏开发--角色动作篇之冲刺>之后,我发现随着角色动作的增加,代码中的逻辑判断越来越多,铺天盖地的if() else()语句实在让我捉襟见肘: 这还仅仅是角色 ...
HTML5 2D平台游戏开发#7Camera
在庞大的游戏世界中,玩家不能一览地图全貌,而是只能看到其中一部分,并一步步探索,这时就要用到一种技术来显示局部的地图,游戏术语称为摄像机(Camera).下面两张图中的白色矩形框表示了Camera的作 ...
Unity 创建2D平台游戏开发学习教程
了解如何使用C#在Unity中创建您的第一款2D平台游戏你会学到什么使用Unity创建2D奥运会使用可脚本化的对象和单一模式使用良好的编程实践创造武器和射弹使用可脚本化的对象和委托模式创建 ...
开发html5 2d 赛车游戏以及打包发布为手机APP 第一话工欲善其事
按照昔日做给上头拿去找汽车商卖钱的一个赛车游戏APP的经验来说明这个例子(不过当然只说有关游戏的部分) 思路:一幅赛道画面,赛道上面有一辆主角车,可以由玩家用手指拖拽去控制赛车的移动设置计时器,画面 ...
移动开发之我见-移动平台游戏开发技术的前世今生
随着智能手机平台的兴起,移动平台应用开发变成现在热门的话题,而在应用开发中,游戏的开发占有举足轻重的位置,而移动平台的开发技术,尤其是游戏的开发技术在近几年的变化非常大,从最早门槛低的J2me技术开始 ...
html5 2d,3d游戏引擎
html5 2d,3d游戏引擎 http://biz.turbulenz.com/developers posted on 2014-10-12 21:58 雨亭阅读(...) 评论(...) 编辑 ...
使用Flash Builder 4.5进行多平台游戏开发
转自:使用Flash Builder 4.5进行多平台游戏开发目录设置新项目配置移动平台优化技巧和诀窍提交应用程序延伸阅读需求预备知识要求拥有使用Flash Builder开发项目的 ...
2d手机游戏开发_我的手机游戏如何在2周内获得365K应用商店下载（以及为什么我退出独立游戏开发公司…...
2d手机游戏开发 by William Kwan 关冠伟我的手机游戏如何在2周内获得365K应用商店下载(以及为什么以后我退出独立游戏开发者) (How My Mobile Game Got 365 ...
移动平台游戏开发介绍
2.移动平台游戏开发介绍转载于:https://www.cnblogs.com/zwj-199306231519/p/9148888.html
2D动作游戏开发与实现(翻译) .
本文为 cping1982 主持翻译,如有转载,请严格按照如下方式显示标明译文作者及出处,以示尊重! 译者:cping1982 原文:http://blog.csdn.net/cping1982/ar ...

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

更新日志

HTML5 2D平台游戏开发#8指令技相关推荐

最新文章

热门文章