javascript - 嘿!我如何解决我的代码显然没有从浏览器的 KeyboardEvent 正确获取 .key 属性?

标签 javascript canvas input keyboard-events

KeyboardEvent 的“预定义”值 = .key 取决于您在键盘上按下的键,但即使我的控制台显示我单击了某个键,我也无法“定义”键值....

我尝试使用谷歌搜索解决方案并自行定义关键值,但没有任何效果 我现在有点无能

  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 获取键属性

最佳答案

删除 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>

关于javascript - 嘿!我如何解决我的代码显然没有从浏览器的 KeyboardEvent 正确获取 .key 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53873027/

相关文章:

javascript - 使用 JavaScript 将 Canvas 添加到页面

python - 从逗号分隔的行创建字典,包含嵌套值

javascript - 单选框不调用 Javascript 函数

java - spring mvc - 检查您所在页面并更改菜单项样式的最简单方法

javascript - Node.js、coffeescript 和编译的 js 文件

javascript - Google 表格脚本 - 无法读取属性 1.0?

javascript - Canvas 标签的打印内容问题(Chrome、Opera)

javascript - 使 JS 代码不可读/重到 "hack"

Java - 吃 bean 人 - GUI - 绘图问题,以及给有抱负的程序员的一般提示

java - 在 Java 中获取输入的不同方法