如何使用 p5.js /p5.play 让所有精灵移动到不同的吸引点

Question

我正在创建一个游戏，精灵从 canvas 的顶部掉落并摧毁 canvas 底部的塔。我正在尝试在所有不同的塔上使用 attractionPoint，以便精灵向塔移动。我目前已经使用 attactionPoint 让一个精灵移动到塔上，但其余精灵继续沿直线移动。有什么方法可以设置多个吸引点，让精灵向所有塔移动？

查看下面的代码：


function createAsteroids() {
  // code to spawn asteroids at random locations

  for (let i = 0; i < numAsteroids; i++) {
    asteroid = createSprite(random(0, 1000), random(-50, -350), 40, 40);
    asteroid.maxSpeed = random(1, 3);
    rock.add(asteroid);
    asteroidArray.push(asteroid);
  }
}

function drawAsteroid() {
  // draws asteroids moving down and checking collision
  rock.overlap(turret, explode);
  for (let i = 0; i < asteroidArray.length; i++) {
    if (asteroidArray[i].position.y > height) {
      asteroidArray[i].position.y = 0;
      asteroidArray[i].position.x = random(0, 800);
    }
    asteroidArray[i].addSpeed(3, 90);
    asteroid.attractionPoint(1, 100, 740);
    asteroid.attractionPoint(1, 400, 740);
    asteroid.attractionPoint(1, 700, 740);
  }
}

function explode(sprite, obstical) {
  //code for explosion and collision
  sprite.remove();
  obstical.remove();
}

Answer 1

你非常接近，但有几件事不太正确。在 drawAsteroid 中，您仅在最后创建的小行星上设置 attractionPoint，并执行 3 次并在 draw 方法中调用它 - 我假设 - 这样它就会在每一帧更新。我们真的只需要 drawAsteroid 函数来实现它的重生逻辑，所以让我们将此方法重命名为 updateAsteroid 而不是 drawAsteroid 因为我们要在 draw 方法中调用 drawSprites(rock); （岩石是您为小行星创建的组）。

当我们设置 attractionPoint 时，我们只想这样做一次，那就是我们创建小行星的时候：

function createAsteroids() {
  // code to spawn asteroids at random locations
  for (let i = 0; i < numAsteroids; i++) {
    let asteroid = createSprite(random(0, width), random(-50, -350), 40, 40);
    asteroid.maxSpeed = random(1, 3);
    rock.add(asteroid);
    
    let tower = floor(random(3))  // i know there's only 3 asteroids, you could do something better here
    
    asteroid.attractionPoint(asteroid.maxSpeed, towers[tower].position.x, towers[tower].position.y);
  }
}

所以我们只是随机瞄准了该组中的一座塔。

我已经设置了一个小示例，可以为您指明正确的方向。

// Find my blog at https://codeheir.com/
// I do a lot of p5.js stuff that might interest you!

let numAsteroids = 10;
let towers;
let rock;

function setup() {
  createCanvas(400, 400);
  rock = Group();
  towers = Group();
  createTowers();
  createAsteroids();
}

function draw() {
  background(220);
  
  drawSprites(rock);
  drawSprites(towers);
  updateAsteroids();

}

function createAsteroids() {
  // code to spawn asteroids at random locations
  for (let i = 0; i < numAsteroids; i++) {
let asteroid = createSprite(random(0, width), random(-50, -350), 40, 40);
asteroid.maxSpeed = random(1, 3);
rock.add(asteroid);

let tower = floor(random(3))

asteroid.attractionPoint(asteroid.maxSpeed, towers[tower].position.x, towers[tower].position.y);
  }
}


function updateAsteroids() {
  // draws asteroids moving down and checking collision
  //rock.overlap(turret, explode);
  for (let i = 0; i < rock.length; i++) {
if (rock[i].position.y > height) {
  rock[i].position.y = 0;
  rock[i].position.x = random(0, width);
}
  }
}

function createTowers() {
  towers.push(createSprite(40, height - 30, 40, 90));
  towers.push(createSprite(width/2, height - 30, 40, 90));
  towers.push(createSprite(width-40, height - 30, 40, 90));
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
        <script src="https://cdn.jsdelivr.net/gh/molleindustria/p5.play/lib/p5.play.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

我还创建了一个 p5.js sketch 来为您指明正确的方向。

如何使用 p5.js /p5.play 让所有精灵移动到不同的吸引点

how can i make all sprites move to different attraction points using p5.js /p5.play

p5.js

p5.play