窗口AddEdeventListener键未触发

Question

我正在制作2048游戏，但是window.addeventListener（“ keydown”，handleinput，{asher as true}）;不开火。但是，如果我console.log（e.key），我会收到我按下按钮（arrowup，-down和os On）的消息，但是瓷砖不会移动。有人可以帮忙吗？

这是包含EventListener的index.js文件。

import Grid from "./grid.js";
import Tile from "./tile.js";

const gameBoard = document.getElementById('game-board');
const grid = new Grid(gameBoard);

grid.randomEmptyCell().tile = new Tile(gameBoard);
grid.randomEmptyCell().tile = new Tile(gameBoard);
setupInput();

function setupInput() {
  window.addEventListener("keydown", handleInput, { once: true });
}

async function handleInput(e) {
  console.log(e.key);
  switch (e.key) {
    case "ArrowUp":
      if(!canMoveUp()) {
        setupInput();
        return;
      }
      await moveUp()
      break
    case "ArrowDown":
      if(!canMoveDown()) {
        setupInput();
        return;
      }
      await moveDown()
      break
    case "ArrowLeft":
      if(!canMoveLeft()) {
        setupInput();
        return;
      }
      await moveLeft()
      break
    case "ArrowRight":
      if(!canMoveRight()) {
        setupInput();
        return;
      }
      await moveRight()
      break
    default:
      setupInput()
      return
  }

  grid.cells.forEach(cell => cell.merTiles());

  const newTile = new Tile(gameBoard);

  grid.randomEmptyCell().tile = newTile;

  if (!canMoveUp() && !canMoveDown() && !canMoveLeft() && !canMoveRight()) {
    newTile.waitForTransition(true).then(() => {
      alert("You lose!");
    });
  } return
  setupInput();
}

function moveUp() {
  return slideTiles(grid.cellsByColumn);
}

function moveDown() {
  return slideTiles(grid.cellsByColumn.map(column => [...column].reverse()));
}

function moveLeft() {
  return slideTiles(grid.cellsByRow);
}

function moveRight() {
  return slideTiles(grid.cellsByRow.map(row => [...row].reverse()));
}

function slideTiles(cells) {
  return Promise.all(
  cells.flatMap(group => {
    const promises = [];
    for (let i = 1; i < group.length; i++) {
      const cell = group[i];
      if (cell.tile == null) continue;
      let lastValidCell;
      for (let j = i - 1; j >= 0; j--) {
        const moveToCell = group[j];
        if (!moveToCell.canAccept(cell.tile)) break;
        lastValidCell = moveToCell;
      }
      if (lastValidCell != null) {
        promises.push(cell.tile.waitForTransition());
        if (lastValidCell.tile != null) {
          lastValidCell.mergeTile = cell.tile;
        } else {
          lastValidCell.tile = cell.tile;
        }
        cell.tile = null;
      }
    }
    return promises;
  }));
}

function canMoveUp() {
  return canMove(grid.cellsByColumn);
}

function canMoveDown() {
  return canMove(grid.cellsByColumn.map(column => [...column].reverse()));
}

function canMoveLeft() {
  return canMove(grid.cellsByRow);
}

function canMoveRight() {
  return canMove(grid.cellsByRow.map(row => [...row].reverse()));
}

function canMove(cells) {
  return cells.some(group => {
    return group.some((cell, index) => {
      if (index === 0) return false;
      if (cell.tile == null) return false;
      const moveToCell = group[index - 1];
      return moveToCell.canAccept(cell.tile);
    });
  });
}

Answer 1

请参阅MDN页面：
eventTarget.addevent.addeventListListEner（

）添加后，最多应一次调用听众。如果为true，则在调用时将自动删除侦听器。如果未指定，则默认为false。

如果您删除{一次：true}，则可以多次工作。

另外还有一件事，您使用console.log（e.key），但是在开关情况下使用e.keycode。在MDN上，密钥代码实际上是代码。事件

so, you should either change your switch case conditions to e.key to use the same values:

或将案例值从文本更改为键代码