使用画布和p5.js移动正方形

我正在尝试使用p5.js和html5的帆布元素移动正方形。

我尝试以多种方式重新安排代码，有时在代码位于某些地方时，画布并不是首先创建的。无论我尝试过多少次，我似乎都无法使它起作用。

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

我的代码看起来像这样：

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>

我希望该广场在打开页面时会自动向右移动，但是它仍然是固定的。任何帮助将不胜感激！

如果我正确理解您的问题，则可以通过以下内容解决动画问题：

在您的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>

希望有帮助：）

相关内容

最新更新

热门标签：