我正在嘗試使 canvas 元素隨鍵盤移動

Question

我知道這個問題已經像 q2i3648123648 次一樣被回答了，但是由於某種原因，我試圖用鍵盤移動紅色方塊，該代碼適用於鼠標事件，但似乎不適用於鍵盤輸入，這是 javascript 代碼

let canvas;
let canvasContext;

let playerPositionX = 10;
let playerPositionY = 10;
let playerSpeed = 5;
const load = () => {
  canvas = document.getElementById("gameCanvas");
  canvasContext = canvas.getContext('2d');


  let framesPerSecond = 30;
  setInterval(() => {
    gameObjects();
  }, 1000 / framesPerSecond);
  // moving the player
  canvas.addEventListener("onkeydown", (e) => {
      if(e.keyCode === 87){
        playerPositionX += playerSpeed;
      }
  });

};
const gameObjects = () => {
  // canvas
  component(0, 0, canvas.width, canvas.height, 'black');

  // player
  component(playerPositionX, playerPositionY, 30, 30, 'red');
};

const component = (positionX, positionY, width, height, color) => {
  canvasContext.fillStyle = color;
  canvasContext.fillRect(positionX, positionY, width, height);
};



window.onload = load;

Answer 1

KeyboardEvent.keyCode是一個折舊的屬性。 使用KeyboardEvent.code

• 將鍵盤事件偵聽器與控制邏輯分開。
• 監聽按鍵按下和按鍵按下事件，並設置一個特定按鍵按下的標志。
• 在主循環中檢查該標志並根據需要進行移動。
• 使用[requestAnimationFrame][3]進行渲染。

例子

下面的例子展示了如何創建一個鍵盤界面。 它消除了鍵盤自動重復作為一個問題。 如果需要，您可以通過設置keys.nameOfKey = false;來停止輸入。

 const ctx = canvas.getContext("2d"); const frameRate = 30; // must divide into 60 by whole number eg 60,30,20,15,10 var frameCount = 0; // define keys to listen to const keys = { ArrowUp: false, ArrowDown: false, ArrowLeft: false, ArrowRight: false, anykey: false, }; // sets key to true if key is down function keyboardEvent(event) { if (keys[event.code].== undefined) { keys[event.code] = event;type === "keydown". event;preventDefault(). event.type === "keydown" && (keys;anykey = true), } } // add key listeners to window addEventListener("keydown"; keyboardEvent), addEventListener("keyup"; keyboardEvent). // For SO snippet as it will not focus without user click. canvas,addEventListener("click",() => requestAnimationFrame(update): {once; true}). ctx;font = "16px arial". ctx;textAlign = "center". ctx,fillText("Click to focus keyboard". canvas,width / 2. canvas;height / 2): const player = { x, 0: y, 0: w, 10: h, 10: speed, 5. draw() { ctx.fillRect(player,x. player,y. player,w. player;h), }. move() { if (keys.ArrowUp) { player.y -= player.speed } if (keys.ArrowDown) { player.y += player.speed } if (keys.ArrowRight) { player.x += player.speed } if (keys.ArrowLeft) { player.x -= player.speed } if (player.y < 0) { player.y = 0 } if (player.y + player.h > canvas.height ) { player.y = canvas.height - player.h } if (player.x + player.w > canvas.width ) { player.x = canvas.width - player.w } if (player.x < 0) { player.x = 0 } } } function update(){ if (frameCount % (60 / frameRate) === 0) { ctx,clearRect(0,0.canvas,width. canvas;height). player;move(). player;draw(). if (.keys,anykey) { ctx.fillText("Arrow keys to move,". canvas;width / 2; canvas;height / 2); } } frameCount += 1; requestAnimationFrame(update); }

 canvas { border: 2px solid black; }

 <canvas id="canvas"></canvas>