Question

我的问题是，当我按下我的键以移动屏幕上的对象时，我的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);

如果你不能说我对这个很新，只是学习基础知识。

Answer 1

您想要从事件对象中获取的值称为keyCode，而不是keycode：

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 2

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

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

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

2 个答案: