嘿！我如何解决我的代码显然没有从浏览器的键盘事件中正确获取 .key 属性？

Question

KeyboardEvent 的 "predefined" 值 = .key 取决于您在键盘上按下的键，但即使我的控制台显示我单击了某个键，我也无法 "define" 键值....

我尝试使用谷歌搜索解决方案并自行定义键值，但没有任何效果我现在有点不知所措

  let canvas= document.querySelector('canvas');
    canvas.width=800;canvas.height=600;const ctx=canvas.getContext('2d');
//bg
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
//player
ctx.fillStyle='white';
let player_x=30;
let player_y=60;
ctx.fillRect(player_x,player_y,40,400);
//controls
function Input(event){ 
    let ifPressed=event.key;
    console.log(ifPressed);
          if(ifPressed==="w"){
             player_y-=5;
    } else if(ifPressed==="s"){
          player_y+=5;
   }

  }

document.addEventListener('keydown',Input);
Input();

我已经尝试过这种方式，但控制台总是显示“.key”未定义，而它应该从浏览器中的 KeyboardEvent 获取密钥属性

Answer 1

删除最后一行的 Input(); 并在正文中创建 <canvas></canvas> 元素 html。我将这两个修复程序添加到您的代码中并且它有效（运行片段，向下滚动，单击 canvas 并开始输入）：

let canvas= document.querySelector('canvas');
    canvas.width=800;canvas.height=600;const ctx=canvas.getContext('2d');
//bg
ctx.fillStyle='black';
ctx.fillRect(0,0,canvas.width,canvas.height);
//player
ctx.fillStyle='white';
let player_x=30;
let player_y=60;
ctx.fillRect(player_x,player_y,40,400);
//controls
function Input(event){ 
    let ifPressed=event.key;
    console.log(ifPressed);
          if(ifPressed==="w"){
             player_y-=5;
    } else if(ifPressed==="s"){
          player_y+=5;
   }

  }


document.addEventListener('keydown',Input);

<canvas></canvas>

Answer 2

您需要在每次按键时重新绘制播放器。我把所有的绘图都放在一个函数中 draw()

let canvas = document.querySelector("canvas");
canvas.width = 800;
canvas.height = 600;
const ctx = canvas.getContext("2d");
let player_x = 30;
let player_y = 60;
draw();
function Input(event) {
  let ifPressed = event.key;
  console.log(ifPressed);
  if (ifPressed === "w") {
    player_y -= 5;
    draw();
  } else if (ifPressed === "s") {
    player_y += 5;
    draw();
  }
  
}

document.addEventListener("keydown", Input);

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.fillRect(player_x, player_y, 40, 400);
}

<canvas></canvas>

嘿！我如何解决我的代码显然没有从浏览器的键盘事件中正确获取 .key 属性？

Hey! How can i solve my code which apparently isnt properly taking .key property from KeyboardEvent from browser?

javascript

canvas

input

keyboard-events