javascript - 按键和鼠标事件

Question

我正在使用 Three.js 构建一个演示(即使我希望输入在任何库上都以相同的方式工作)

我尝试研究用户输入/事件的主题，并且有很多使用 jQuery 或其他库或附加到 Web 元素的答案。

我刚刚学习，所以我想坚持使用 Vanilla JS。

我只是在寻找一种方法，如果按下键盘按钮，例如按下 W 则 console.log("Key: 'W' was Pressed");.

鼠标输入/事件鼠标位置相同:

console.log(mouseX + ", " + mouseY);

问题是找到普通 JS 的基本样本。只是寻找一个简单的解决方案，我稍后可以在此基础上进行构建，例如:

1. 如果按下按键或鼠标按钮，则返回 true
2. 获取鼠标x和y的位置
3. 稍后添加事件队列以与帧速率/循环同步

我读到事件/输入可能具有挑战性，只是寻找正确方向的插入力。

附注我不介意使用一个轻量级库来简化这一过程，可能支持触摸屏/移动设备甚至 Controller 输入。

主要用于游戏目的。

Answer 1

我喜欢使用我自己修改的 THREEx.KeyboardState 版本进行键盘输入。它并不太复杂 - 它只是订阅文档对象上的 keyup 和 keydown 事件并缓冲每帧的所有事件。我的游戏每帧调用 update 方法来循环缓冲区。

document.addEventListener("keydown", this._onKeyDown, false);
document.addEventListener("keyup", this._onKeyUp, false);

我在 Chrome 中为鼠标和游戏 handle 编写了类似的代码。它们都相当干净和简单。希望这能为您提供一些可以借鉴的好例子。

The source can be viewed在 Javascript 或 Typescript 的 Github 上。