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 - Uglify-JS 错误 : Unexpected character '' when concatenating then minifying select2

javascript - 从 json 生成序列

javascript - 即使我在 html 中调用 cdn,我是否需要安装plotly?

javascript - 如何在 Samsung Note 2 上使用 toDataURL 创建 JPG 数据字符串

Java 输入和文件读取器

javascript - 简单的 javascript 谷歌分析事件错误,未发送到 ga

javascript - 如何在点击时进行面向对象的 Canvas 元素比较?

c# - Canvas toDataURL() 关于 chrome 安全问题

javascript - 我可以限制添加到数组中的项目数量吗?

java - 如何在java netbeans中使用jtextarea进行多行输入?