检测按键在 javascript 中不起作用

Question

我已经查找了解决方案，但没有一个可以帮助我。我正在编写一个小蛇游戏，但现在我必须检测用户按键。这是我写的代码，有人可以帮我吗？

`

        while(running) {


            document.addEventListener("keydown", (event) => { --> Here is the beginning of my           solition
                if(event.keyCode == 68) {
                    right = true
                    up = false
                    down = false
                    left = false
                }
                if(event.keyCode == 83) {
                right = false
                up = false
                down = true
                left = false
                }
                if(event.keyCode == 65) {
                    right = false
                    up = false
                    down = false
                    left = true
                }
                if(event.keyCode == 87) {
                    right = false
                    up = true
                    down = false
                    left = false
                }
            }) ---> Here is the end of my keypress detection, the rest is the code from the game. I am posting it too, maybe I have to change something there.


            if(endMap.includes(pushing) && running) {
                reset();
                running = false;
                document.getElementById("tabelle").innerHTML = "";
                begin();
            }
            if(right && running) {
                if(snakeLength < snakeLengthMax) {
                    list.push(pushing);
                    indOf = list.indexOf(pushing)
                    indOf --;
                    list.splice(list[indOf])
                } else {
                    list.push(pushing);
                    indOf = list.indexOf(pushing)
                    indOf --;
                    list.splice(list[indOf])
                    document.getElementById(pushing-snakeLength).innerHTML = ""
                    snakeLength --;
                }
                pushing ++;
            }
            if(left && running) {
                if(snakeLength < snakeLengthMax) {
                    list.push(pushing);
                    indOf = list.indexOf(pushing)
                    indOf --;
                    list.splice(list[indOf])
                } else {
                    list.push(pushing);
                    indOf = list.indexOf(pushing)
                    indOf --;
                    list.splice(list[indOf])
                    document.getElementById(pushing-snakeLength).innerHTML = ""
                    snakeLength --;

                }
                pushing --;
            }
            if(down && running) {
                if(snakeLength < snakeLengthMax) {
                    list.push(pushing);
                    indOf = list.indexOf(pushing)
                    indOf --;
                    list.splice(list[indOf])
                } else {
                    list.push(pushing);
                    indOf = list.indexOf(pushing)
                    indOf --;
                    list.splice(list[indOf])
                    document.getElementById(pushing-snakeLength).innerHTML = ""
                    snakeLength --;

                }
                pushing -= 21;
            }
            if(up && running) {
                if(snakeLength < snakeLengthMax) {
                    list.push(pushing);
                    indOf = list.indexOf(pushing)
                    indOf --;
                    list.splice(list[indOf])
                } else {
                    list.push(pushing);
                    indOf = list.indexOf(pushing)
                    indOf --;
                    list.splice(list[indOf])
                    document.getElementById(pushing-snakeLength).innerHTML = ""
                    snakeLength --;

                }
                pushing += 21;
            }
            document.getElementById(pushing).innerHTML = "█"
            snakeLength ++;
            await sleep(1000)


        }
        running = true;

`

我也尝试将其放在函数之外，但我不知道如何检测按键。 当按键被按下时，蛇应该走另一条路。

Answer 1

您可能必须在按下按键之前单击画布。 较新的浏览器通常不支持在不与网站交互的情况下监听按键。

如果还没有的话，您还应该在开始时定义变量。

let right = false;
let left = false;
let up = false;
let down = false;

您也可以尝试更改以下按键侦听器 因为 event.keyCode 已贬值。

document.addEventListener("keydown", (e) => {
    if (e.code === "KeyD") {
       right = true
       up = false
       down = false
       left = false
    }
  });

Answer 2

document.addEventListener("keydown", (event) => {
  console.log("event key code", event.code);
  switch (event.code) {
    case "ArrowUp":
      // add your logic
      break;
    case "ArrowRight":
      // add your logic
      break;
    case "ArrowDown":
      // add your logic
      break;
    case "ArrowLeft":
      // add your logic
      break;
  }
});

您只是更改每个方向键按下内的状态变量，但您应该编写一个逻辑来使蛇移动。例如，如果它向上移动，您应该将蛇的头带到下一个单元格，或者如果这是该单元格中的奖励，您还应该增加蛇的大小

Answer 3

在移动设备上真正有效的唯一的：

document.addEventListener('input', function (e)
{
    const pos = e.target.selectionStart;
    const keyPressed = e.target.value[pos-1];

    // Optional..
    console.log(keyPressed);
});

享受。