无法在处理中移动形状答案

【问题标题】：Unable to move a shape in processing无法在处理中移动形状
【发布时间】：2018-06-19 23:59:18
【问题描述】：

我正在尝试创建一个可以在地图上左右移动的可移动实体。我有一个设置实体初始位置的地图，但是一旦按下“a”或“d”键，角色只会稍微移动，然后在释放键后重置到其初始位置。我有一个布尔变量“playerIsSpawned”来确保角色的位置只在该位置设置一次，但这似乎没有解决任何问题。这是什么原因造成的，我该如何解决？

var start_map = [
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0],
  [0, 9, 0, 0, 0, 0, 0, 0],
  [1, 1, 1, 1, 1, 1, 1, 1]
];
var playerX;
var playerY;

function drawPlayer() {
  fill(0);
  rect(playerX, playerY, 50, 50);
}

function drawMap(map) {
  // The x and y do not represent the x and y axis
  // Keep in mind a 2d array is an array of an array
  noStroke();
  var playerIsSpawned = false;

  for (var x = 0; x < map.length; x++) {
    for (var y = 0; y < map.length; y++) {
      // Background
      if (map[y][x] == 0) {
        fill(184, 236, 255);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
      // Ground
      else if (map[y][x] == 1) {
        fill(51, 153, 51);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
      // Player
      else if (map[y][x] == 9) {
        if (playerIsSpawned == false) {
          playerX = (10 + 50*x);
          playerY = (10 + 50*y);
          playerIsSpawned = true;
        }
        fill(184, 236, 255);
        rect((10 + 50*x), (10 + 50*y), 50, 50);
      }
    }
  }
  drawPlayer();
  function keyPressed() {
    if (key == "d") {
      playerX += 5;
    }
    else if (key == "a") {
      playerX -= 5;
    }
  }
  keyPressed();
}

function setup() {
  background(0);
  createCanvas(800, 800);
}

function draw() {
  drawMap(start_map);
}

【问题讨论】：

这绝对不是Processing代码，因为处理代码使用Java语法。您使用的是 Processing.js，还是 P5.js？
@Mike'Pomax'Kamermans 这是 p5.js——它是 Processing 系列的一部分。我添加了p5.js 标记，但认为保留processing 标记也是合适的，因为p5.js 基本上是处理的JavaScript 端口。
作为 Processing.js 的主要开发人员：真的，真的不是。 Processing.js 是一个直接的语法和 API 兼容的端口，P5.js 是“如果我们必须再次进行处理，但我们使用 JS 作为基础”。它完全不同（即使它是真的很酷）=）
@Mike'Pomax'Kamermans 感谢您的工作。我倾向于认为 Processing.js 在很多方面比处理到 JavaScript 的端口更好：它是一个神奇的库，允许（大多数）处理草图在浏览器中运行而不是JVM。另一方面，当您尝试将关键功能（draw()、rect() 等）更直接地移植到 JavaScript 时，您会得到 p5.js。这两个项目都令人印象深刻，并且都在处理世界中发挥了作用。

标签： processing p5.js

【解决方案1】：

您在drawMap 中声明了playerIsSpawned。每次通过那里都会重置为false。

另外，考虑在顶层定义keyPressed()（与draw 和setup 相同，并在draw 循环中去掉对keyPressed() 的调用。

【讨论】：