【Phaser】Phaser监听键盘WASD按下事件

应开发一个简单的H5小游戏需要，使用了H5游戏框架Phaser，如果手写各种效果代码，怕是要写到头秃，因此必须借用网上开源的引擎了。

Phaser GitHub地址：https://github.com/photonstorm/phaser

Phaser 国内粉丝文档、论坛小站：https://www.phaser-china.com/

根据官方Demo案例接星星（collectStar）改编代码

源代码在：https://github.com/channingbreeze/games

个人需求：

1.需要两个精灵进行对战

2.两个精灵分别使用WASD 和 ↑←↓→进行控制

遇到问题：

1.因为刚刚接触Phaser，Demo中使用的

game.input.keyboard.createCursorKeys()

仅能获取到 up/left/down/right 的按键事件

2.因为代码问题，需要监听按下事件和取消按下事件，否则精灵不是一帧一帧的动，而是会滑行

解决方式：

1.方向键的监听方式没有改动，仍然使用

            //创建按键方向 ↑←↓→cursors=game.input.keyboard.createCursorKeys();

而WASD则使用

            //创建WASD按键A = game.input.keyboard.addKey(Phaser.Keyboard.A);D = game.input.keyboard.addKey(Phaser.Keyboard.D);

2.将player1和player2的监听判断分开，都进行如果没按下的控制

详细script代码为（部分已省略）

    <script>var game = new Phaser.Game(800,600,Phaser.CANVAS,'parent',{preload:preload,//资源预加载create:create,//创建场景update:update//逻辑实现});function preload() {console.log('资源加载');。。。}var player1;//用户一var player2;//用户二var cursors;//输入var A;//键盘Avar D;//键盘Dfunction create() {console.log('创建场景')。。。//创建按键方向 ↑←↓→cursors=game.input.keyboard.createCursorKeys();//创建WASD按键A = game.input.keyboard.addKey(Phaser.Keyboard.A);D = game.input.keyboard.addKey(Phaser.Keyboard.D);}function update() {console.log('游戏循环');。。。//player1使用上下左右if (cursors.left.isDown) {player1.body.velocity.x=-150;player1.animations.play('left');} else if (cursors.right.isDown) {player1.body.velocity.x=150;player1.animations.play('right');} else {player1.bame=4;//精灵图第4帧player1.body.velocity.x=0;//加上这个判断则每按一次运动一次否则直接滑翔}//player2操作：ADif (A.isDown) {player2.body.velocity.x=-150;player2.animations.play('left');} else if (D.isDown) {player2.body.velocity.x=150;player2.animations.play('right');} else {player2.body.velocity.x=0;//加上这个判断每没按一次运动一次否则直接滑翔player2.frame=4;//精灵图第4帧}}</script>

【Phaser】Phaser监听键盘WASD按下事件相关推荐

vue监听键盘Esc事件
mounted() {//监听键盘Esc按键事件let self = this;this.$nextTick(function() {document.addEventListener('keydow ...
多处使用window监听键盘，只有一处生效
多处使用window监听键盘,只有一处生效: mounted() {window.onkeydown = (e) => {this.handleKeyDown(e)} } 使用的地方改为: mo ...
java 监听鼠标点击_java 事件监听 - 鼠标
java 事件监听 - 鼠标 //事件监听 //鼠标事件监听 //鼠标事件监听有两个实现接口 //1.MouseListener 普通的鼠标操作 //2.MouseMotionListener 鼠标的 ...
13、Java Swing事件监听：事件处理模型和事件监听器
事件表示程序和用户之间的交互,例如在文本框中输入,在列表框或组合框中选择,选中复选框和单选框,单击按钮等.事件处理表示程序对事件的响应,对用户的交互或者说对事件的处理是事件处理程序完成的. 当事件发生 ...
监听JScrollPane按PageUp,PageDown事件
package com.cyl; import java.awt.BorderLayout; import java.awt.Color; import java.awt.Dimension; imp ...
综合设计一个OPPE主页--页面的插件引用（animate.css）--d动画的使用--滚轮或鼠标到该位置时，才有动画的切换---所以我们需要用jquery监听鼠标滚轮的滚动事件
Animate.css | A cross-browser library of CSS animations. 里面有许多css的效果首先使用 animate.css文件 link rel=&qu ...
javascript解析印象笔记导出enex文件（javascript解析xml，javascript监听手机端手指滑动事件）
今晚又是在单位值班,最近看小说在印象笔记记了几百条零散的笔记,在印象笔记app上看要一条一条点开,今天把笔记导出来尝试着用js解析它,把一条条笔记转化为一张张小卡片,像刷抖音那样滑动着看,于是就用js ...
vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求
vue监听浏览器刷新和关闭事件,并在页面关闭/刷新前发送请求 1.需求背景: 2.需求分析: 3.实现方式: 4.实现方式解析: 1)浏览器页面事件基础 2)在mounted监听beforeunloa ...
vue监听移动设备的返回事件
在公共方法文件common.js中实现一个存储当前历史记录的方法 common.js // 存储当前历史记录点,实现控制手机物理返回键的按钮事件 var pushHistory = function ...

【Phaser】Phaser监听键盘WASD按下事件

【Phaser】Phaser监听键盘WASD按下事件相关推荐

最新文章

热门文章