为什么我的关键命令不起作用

Why my key commands are not working

本文关键字：命令 不起作用 我的 为什么      更新时间：2023-09-26

我的问题是，当我按下键在屏幕上移动对象时，我的javascript看不到。这是我的java脚本代码：

var canvas = document.getElementById("maincanvas");
var context = canvas.getContext("2d");
var keys = [];
var width = 500,
  height = 400,
  speed = 3;
var player = {
  x: 10,
  y: 10,
  width: 20,
  height: 20
};
window.addEventListener("keydown", function (e) {
  keys[e.keycode] = true;
}, false);
window.addEventListener("keyup", function (e) {
  delete keys[e.keycode];
}, false);
/*
up - 38
down - 40
left - 37
right - 39
*/
function game() {
  update();
  render();
}
function update() {
  if (keys[38]) player.y -= speed;
  if (keys[40]) player.y += speed;
  if (keys[37]) player.x -= speed;
  if (keys[39]) player.x += speed;
}
function render() {
  context.clearRect(0, 0, 100, 100)
  context.fillRect(player.x, player.y, player.width, player.height);
}
setInterval(function () {
  game();
}, 1000 / 30);

如果你不能告诉我，我对这个很陌生，只是在学习基础知识。

要从事件对象中取出的值称为keyCode，而不是keycode:

var canvas = document.getElementById("maincanvas");
var context = canvas.getContext("2d");
var keys = [];
var width = 500,
  height = 400,
  speed = 3;
var player = {
  x: 10,
  y: 10,
  width: 20,
  height: 20
};
window.addEventListener("keydown", function(e) {
  keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e) {
  delete keys[e.keyCode];
}, false);
/*
up - 38
down - 40
left - 37
right - 39
*/
function game() {
  update();
  render();
}
function update() {
  if (keys[38]) player.y -= speed;
  if (keys[40]) player.y += speed;
  if (keys[37]) player.x -= speed;
  if (keys[39]) player.x += speed;
}
function render() {
  context.clearRect(0, 0, 100, 100)
  context.fillRect(player.x, player.y, player.width, player.height);
}
setInterval(function() {
  game();
}, 1000 / 30);
<canvas id="maincanvas"></canvas>

您可能遇到的另一个问题是keys是一个数组，您将其视为一个对象。keys[38]正在寻找索引38处的关键字而不是具有值38的关键字。设置keys = {};

编辑没关系，我知道你只是把索引设置为38。我想说这是一种有点奇怪的方法，考虑使用对象而不是数组。

相关文章：