我试图开发一个JavaScript游戏引擎,我遇到了这个问题:

当我按空格键时,角色会跳跃。 当我按下→角色向右移动。

问题是,当我按右键,然后按空格键时,角色会跳跃,然后停止移动。

我使用keydown函数来按下键。如何检查是否同时按下了多个键?


当前回答

对于任何使用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内的作用域变量被重置,我们不希望这样。

其他回答

使keydown甚至调用多个函数,每个函数检查特定的键并适当地响应。

document.keydown = function (key) {

    checkKey("x");
    checkKey("y");
};

只是让某些东西更稳定:

var keys = [];
$(document).keydown(function (e) { 
    if(e.which == 32 || e.which == 70){
    keys.push(e.which);
    if(keys.length == 2 && keys.indexOf(32) != -1 && keys.indexOf(70) != -1){
        
        
        
        alert("it WORKS !!"); //MAKE SOMETHING HERE---------------->
        
        
        
        keys.length = 0;
    }else if((keys.indexOf(32) == -1 && keys.indexOf(70) != -1) || (keys.indexOf(32) != -1 && keys.indexOf(70) == -1) && (keys.indexOf(32) > 1 || keys.indexOf(70) > 1)){
    }else{
        keys.length = 0;
    }
}else{
    keys.length = 0;
}
});

我使用case, if和bool。我有一个项目,这对我很有效


window.addEventListener("keydown", onKeyDown, false);
window.addEventListener("keyup", onKeyUp, false);

function onKeyDown(event) {
  var keyCode = event.keyCode;
  switch (keyCode) {
    case 68: //D
      keyd = true;
      break;
    case 32: //spaaaaaaaaaaaaaaace
      keyspace = true;
      break;
    case 65: //A
      keya = true;
      break;
    case 37:
      keya = true;
      break;
    case 38:
      keyspace = true;
      break;
    case 39:
      keyd = true;
      break;
  }
}

function onKeyUp(event) {
  var keyCode = event.keyCode;

  switch (keyCode) {
    case 68: //dddddd
      keyd = false;
      break;
    case 32: //spaaaaaaaaaaaaaaaaaaaaaace
      keyspace = false;
      break;
    case 65: //aaaaa
      keya = false;
      break;
    case 37:
      keya = false;
      break;
    case 38:
      keyspace = false;
      break;
    case 39:
      keyd = false;
      break;
  }
}

我使用这种方式(必须检查按下Shift + Ctrl的地方):

// create some object to save all pressed keys
var keys = {
    shift: false,
    ctrl: false
};

$(document.body).keydown(function(event) {
// save status of the button 'pressed' == 'true'
    if (event.keyCode == 16) {
        keys["shift"] = true;
    } else if (event.keyCode == 17) {
        keys["ctrl"] = true;
    }
    if (keys["shift"] && keys["ctrl"]) {
        $("#convert").trigger("click"); // or do anything else
    }
});

$(document.body).keyup(function(event) {
    // reset status of the button 'released' == 'false'
    if (event.keyCode == 16) {
        keys["shift"] = false;
    } else if (event.keyCode == 17) {
        keys["ctrl"] = false;
    }
});

这不是一个通用的方法,但在某些情况下是有用的。这是有用的组合,如CTRL + something或Shift + something或CTRL + Shift + something,等。

示例:当您想使用CTRL + P打印页面时,第一个按下的键总是CTRL + P, CTRL + S, CTRL + U和其他组合也是如此。

document.addEventListener (keydown,函数(e) { //SHIFT +某个值 如果(e.shiftKey) { 开关(e.code) { 例“钥匙”: console.log('Shift + S'); 打破; } } //CTRL + SHIFT +一些 如果(e。&& e.shiftKey){ 开关(e.code) { 例“钥匙”: console.log('CTRL + Shift + S'); 打破; } } });