JavaScript 中未定义按键

Question

我正在创建一个移动对象，玩家。

我有一个 InputHandler 和一个 Player 类，还有游戏循环。

但是，主要问题是在 InputHandler 中，我设置和获取所有键，然后在 Player 类中使用它们。但是，当我按下例如W，什么都没有发生。甚至没有控制台日志，但它应该。

我不确定为什么它不起作用。

这里是 GitHub：https://github.com/AurelianSpodarec/Ship_Game_Proto_V1/blob/master/src/js/gameObjects/player/Player.js

这是应该没问题的最后一行，更新，如果按下 W 时的 if 语句，然后控制台将其注销，但它没有。

JS代码：

import InputManager from "../../core/InputManager";

export default class Player {
  constructor(inputManager) {
    this.height = 40,
      this.width = 40,
      this.size = 15,

      this.inputManager = new InputManager(this.player);

    this.maxSpeed = 7;
    this.speed = 0;

    this.position = {
      x: 44,
      y: 44
    }
  }

  moveUp() {
    console.log(this.inputManager.keys.w);
    console.log("uppppppppppppppppppppp the player! Hop Hop!");
    this.position.y -= 5;
  }

  moveRight() {
    this.position.x += 5;
  }

  moveDown() {
    this.position.y += 5;
  }

  moveLeft() {
    this.position.x -= 5;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.size, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'green';
    ctx.fill();
    ctx.stroke();
  }

  update(deltaTime) {
    if (this.inputManager.isKeyDown(this.inputManager.keys.w)) {
      console.log("d");
      this.moveUp();
    }
  }
}

import * as keys from '../config/Keys';

export default class InputManager {
  constructor(player) {
    this.keys = keys;
    this.pressedKeys = {};

    for (var k in keys) {
      this.pressedKeys[keys[k]] = false;
    }

    document.addEventListener("keydown", event => {
      event.preventDefault();
      this.pressedKeys[event.keyCode] = true;
    });

    document.addEventListener("keyup", event => {
      this.pressedKeys[event.keyCode] = false;
    });

  }

  keyDown(e) {
    this.pressedKeys[e.keyCode] = true;
  }

  keyUp(e) {
    this.pressedKeys[e.keyCode] = false;
  }

  isKeyDown(key) {
    return this.pressedKeys[key];
  }
}

import Player from "./gameObjects/player/Player";
import InputManager from "./core/InputManager";

export default class Game {
  constructor(gameWidth, gameHeight) {
    this.gameWidth = gameWidth;
    this.gameHeight = gameHeight;
    this.player = new Player(this);
    new InputManager(this);
  }

  draw(ctx) {
    this.player.draw(ctx);
  }

  update(delta) {
    this.player.update(delta);
  }

  start() {

  }
}

import Game from './Game';

let canvas = document.getElementById("game-screen");
let ctx = canvas.getContext("2d");


const GAME_WIDTH = 800;
const GAME_HEIGHT = 600;

let game = new Game(GAME_WIDTH, GAME_HEIGHT);

let lastTime = 0;

function gameLoop(timestamp) {
  let deltaTime = timestamp - lastTime;
  lastTime = timestamp;

  ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

  game.update(deltaTime);
  game.draw(ctx);

  requestAnimationFrame(gameLoop);
}

requestAnimationFrame(gameLoop);

Answer 1

更改import * as keys 以导入密钥。

简单的错误:)