使用 canvas 和 p5.js 移动正方形

Question

我正在尝试使用 p5.js 和 HTML5 的 canvas 元素移动正方形。

我尝试过以多种方式重新安排代码，有时当代码位于某些位置时，canvas 并没有首先创建。无论我尝试了多少次，我似乎都无法让它工作。

它使用变量 "direction" 的原因是因为我计划让它根据按下的箭头键移动。

我的代码如下所示：

var snakeX = 0;
var snakeY = 0;
var snakeX2 = 20;
var snakeY2 = 20;
var direction = "right";
var alive = true;
var length = 2;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight)
  frameRate(10);
}

function draw() {

  background(0);
  stroke(255);
  fill(255);
  rect(snakeX, snakeY, snakeX2, snakeY2);
}

if (direction == "up") {
  snakeY = snakeY + 10
  snakeY2 = snakeY - length
}

function move() {
  if (direction == "down") {

    snakeY = snakeY - 10
    snakeY2 = snakeY + length
  }
  
  if (direction == "right") {
    snakeX = snakeX + 10
    snakeX2 = snakeX - length
  }

  if (direction == "left") {

    snakeX = snakeX - 10
    snakeX2 = snakeX + length
  }
  
  loop()
}

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
</body>

我希望当我打开页面时方块会自动开始向右移动，但它仍然保持静止。如有任何帮助，我们将不胜感激！

Answer 1

如果我没有正确理解你的问题，可以通过执行以下操作解决动画问题：

在您的 draw() 函数中添加对 move() 的调用
可选择将 if(direction == 'up') { .. } 块添加到 move()

这里更新了您的代码段，以实际展示：

var snakeX = 0;
var snakeY = 0;
var snakeX2 = 20;
var snakeY2 = 20;
var direction = "right";
var alive = true;
var length = 2

function setup() {
  createCanvas(window.innerWidth, window.innerHeight)
  frameRate(10);
}

function draw() {

  background(0);
  stroke(255);
  fill(255);
  rect(snakeX, snakeY, snakeX2, snakeY2);
  
  /* Ensure move() is called for each draw() */
  move()
}


function move() {

  /* Move this inside the brackets of move() */
  if (direction == "up") {
    snakeY = snakeY + 10
    snakeY2 = snakeY - length
  }
  
  if (direction == "down") {

    snakeY = snakeY - 10
    snakeY2 = snakeY + length
  }
  
  if (direction == "right") {
    snakeX = snakeX + 10
    snakeX2 = snakeX - length
  }

  if (direction == "left") {

    snakeX = snakeX - 10
    snakeX2 = snakeX + length
  }
}

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
</body>

希望对您有所帮助:)

使用 canvas 和 p5.js 移动正方形

Move square using canvas and p5.js

javascript

html5-canvas

p5.js