我试图开发一个JavaScript游戏引擎，我遇到了这个问题:
当我按空格键时，角色会跳跃。 当我按下→角色向右移动。
问题是，当我按右键，然后按空格键时，角色会跳跃，然后停止移动。
我使用keydown函数来按下键。如何检查是否同时按下了多个键?
当前回答
这是布雷登斯答案的一个实现。
Var键= {} handleKeyPress(evt) { let {keyCode, type} = evt ||事件;//处理IE let isKeyDown = (type == 'keydown'); keys[keyCode] = isKeyDown; // test: enter键被按下，shift键没有被按下 if(isKeyDown && keys[13] && !keys[16]){ Console.log('用户按下enter没有shift') ｝ }; 窗口。addEventListener(“弹起”,handleKeyPress); 窗口。addEventListener(“keydown”,handleKeyPress);
其他回答
使keydown甚至调用多个函数，每个函数检查特定的键并适当地响应。
document.keydown = function (key) {
checkKey("x");
checkKey("y");
};
我喜欢使用这个片段，它对于编写游戏输入脚本非常有用
var keyMap = [];
window.addEventListener('keydown', (e)=>{
if(!keyMap.includes(e.keyCode)){
keyMap.push(e.keyCode);
}
})
window.addEventListener('keyup', (e)=>{
if(keyMap.includes(e.keyCode)){
keyMap.splice(keyMap.indexOf(e.keyCode), 1);
}
})
function key(x){
return (keyMap.includes(x));
}
function checkGameKeys(){
if(key(32)){
// Space Key
}
if(key(37)){
// Left Arrow Key
}
if(key(39)){
// Right Arrow Key
}
if(key(38)){
// Up Arrow Key
}
if(key(40)){
// Down Arrow Key
}
if(key(65)){
// A Key
}
if(key(68)){
// D Key
}
if(key(87)){
// W Key
}
if(key(83)){
// S Key
}
}
这是布雷登斯答案的一个实现。
Var键= {} handleKeyPress(evt) { let {keyCode, type} = evt ||事件;//处理IE let isKeyDown = (type == 'keydown'); keys[keyCode] = isKeyDown; // test: enter键被按下，shift键没有被按下 if(isKeyDown && keys[13] && !keys[16]){ Console.log('用户按下enter没有shift') ｝ }; 窗口。addEventListener(“弹起”,handleKeyPress); 窗口。addEventListener(“keydown”,handleKeyPress);
我会试着在按键时添加一个按键事件处理程序。例句:
window.onkeydown = function() {
// evaluate key and call respective handler
window.onkeypress = function() {
// evaluate key and call respective handler
}
}
window.onkeyup = function() {
window.onkeypress = void(0) ;
}
这只是为了说明一个模式;这里我就不详细介绍了(尤其是浏览器特定的level2+事件注册)。
请回复这是否有帮助。
对于任何使用React的人，这里是我的解决方案:
import { useEffect, useState } from "react";
import Backdrop from '@mui/material/Backdrop';
export const Example = () => {
const [backdropOpen, setBackdropOpen] = useState(false);
useEffect(() => {
// Keys that need to be pressed at the same time in order for
// the 'backdropOpen' variable to be 'true'
const keysArr = ['ControlLeft', 'ShiftLeft', 'AltLeft'];
const keysMap = {};
let backdropOpenLocal = false;
const keydownEvent = 'keydown';
const keyupEvent = 'keyup';
const checkKeys = () => {
const keysArePressed = keysArr.every((value) => keysMap[value] === keydownEvent);
if (keysArePressed !== backdropOpenLocal) {
backdropOpenLocal = keysArePressed;
setBackdropOpen(keysArePressed);
}
}
const handleKeyDown = (event) => {
const keyCode = event.code;
if (keysArr.includes(keyCode) && keysMap[keyCode] !== keydownEvent) {
keysMap[keyCode] = keydownEvent;
}
checkKeys();
}
const handleKeyUp = (event) => {
const keyCode = event.code;
if (keysArr.includes(keyCode) && keysMap[keyCode] !== keyupEvent) {
keysMap[keyCode] = keyupEvent;
}
checkKeys();
}
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
return () => {
document.removeEventListener('keydown', handleKeyDown);
document.removeEventListener('keyup', handleKeyUp);
}
}, []);
return (
<React.Fragmemnt>
<div>
<Backdrop
open={backdropOpen}
>
<span>
It worked!
</span>
</Backdrop>
</div>
</React.Fragmemnt>
);
}
请记住，我们需要在useEffect函数中使用backdropOpenLocal而不是backdropOpen，因为我们只想更新局部作用域变量并保持作用域的状态。
如果我们更新Example组件的状态并尝试访问backdropOpen，我们将得到与之前相同的值，除非我们在useEffect的依赖数组中传递backdropOpen;这将导致useEffect内的作用域变量被重置，我们不希望这样。
