javascript - 如何在 javascript 中用键移动正方形？

Question

我是一名初学者程序员，在观看了一些 Coding Train 视频后第一次尝试编码，我只是尝试使用按键在屏幕上移动一个正方形。

我认为正确的方法是将它简化为 y = y + 20; 而不是 y += 20; 但它仍然不会'不工作。

如有任何帮助，我们将不胜感激。

var y = 200;
var x = 200;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  rect(x, y, 20, 20);
}

function keyPressed() {
  if (keyCode === UP_ARROW) {
    y = y + 10;
    console.log("help")
  } else {
      return false;
  }

}

<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.3.3/p5.min.js"></script>

Answer 1

您应该养成查看 developer tools 的习惯对于错误。您会看到出现错误:

Uncaught ReferenceError: keycode is not defined (sketch: line 14)

如咨询the P5.js reference你会看到它应该是 keyCode 而不是 keycode。

但即使你解决了这个问题，你也会遇到另一个问题。

你最好的 friend 是the P5.js reference这解释了:

The variable keyCode is used to detect special keys such as BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.

您可以找出 W 键的代码，但使用 key 变量可能更容易。

另请注意，因为您要检查 'W'，所以您必须按住 shift 键才能输入大写字母。您可以考虑改用 'w'。

无耻的 self 推销:here是一些关于 P5.js 的教程。