Sprite/P5-计算一个物体撞击另一个物体的次数

Question

我正在尝试构建乒乓球，在球击中球拍 x 次后，会出现圣诞节动画。我不确定如何注册它，以及是否应该使用 if else 切换到动画。 Stackoverflow 不会让我发布我的问题，因为它说它“主要是代码”所以这是我试图占用更多的文本空间。到目前为止，这是我的代码：

function setup() {
  createCanvas(windowWidth, windowHeight);
  //frameRate(6);

  paddleA = createSprite(30, height / 2, 10, 100);
  paddleA.immovable = true;

  paddleB = createSprite(width - 28, height / 2, 10, 100);
  paddleB.immovable = true;

  wallTop = createSprite(width / 2, -30 / 2, width, 30);
  wallTop.immovable = true;

  wallBottom = createSprite(width / 2, height + 30 / 2, width, 30);
  wallBottom.immovable = true;

  ball = createSprite(width / 2, height / 2, 10, 10);
  ball.maxSpeed = MAX_SPEED;

  paddleA.shapeColor = paddleB.shapeColor = ball.shapeColor = color(
    255,
    0,
    255
  );

  ball.setSpeed(MAX_SPEED, -180);
}

function draw() {
  background(0);

  paddleA.position.y = constrain(
    mouseY,
    paddleA.height / 2,
    height - paddleA.height / 2
  );
  paddleB.position.y = constrain(
    mouseY,
    paddleA.height / 2,
    height - paddleA.height / 2
  );

  ball.bounce(wallTop);
  ball.bounce(wallBottom);

  var swing;
  if (ball.bounce(paddleA)) {
    swing = (ball.position.y - paddleA.position.y) / 3;
    ball.setSpeed(MAX_SPEED, ball.getDirection() + swing);
  }

  if (ball.bounce(paddleB)) {
    swing = (ball.position.y - paddleB.position.y) / 3;
    ball.setSpeed(MAX_SPEED, ball.getDirection() - swing);
  }

  if (ball.position.x < 0) {
    ball.position.x = width / 2;
    ball.position.y = height / 2;
    ball.setSpeed(MAX_SPEED, 0);
  }

  if (ball.position.x > width) {
    ball.position.x = width / 2;
    ball.position.y = height / 2;
    ball.setSpeed(MAX_SPEED, 180);
  }
  
  drawSprites();

  //switch to Xmas animation
  //if (ball.bounce(paddleA)) {
    //background("brown");

Answer 1

根据您的评论，您可以采取以下方式：

您说过要在球在桨上弹跳一定时间后显示动画，为此您可以创建一个包含此计数的变量，并在每次球接触桨时更新。

因此，您可以在setup() 和draw() 之外创建例如let hitCount=0;，这样您就可以从任何地方访问一个变量。

您已经根据if (ball.bounce(paddleA)) { 和if (ball.bounce(paddleB)) { 的条件检查了球何时接触球拍，因此您可以使用这些代码块更新hitCount：

if (ball.bounce(paddleA)) {
    hitCount++;
    swing = (ball.position.y - paddleA.position.y) / 3;
    ball.setSpeed(MAX_SPEED, ball.getDirection() + swing);
}

if (ball.bounce(paddleB)) {
    hitCount++;
    swing = (ball.position.y - paddleB.position.y) / 3;
    ball.setSpeed(MAX_SPEED, ball.getDirection() - swing);
}

然后你想隐藏你的精灵并运行动画。我认为最简单的方法是停止调用 drawSprites() 您可以将以下内容添加到您的 draw() 函数中：

if (hitCount < HITS_BEFORE_ANIMATION) {
    // Show the game if we didn't reach the number of hits
    drawSprites();        
} else {
    // Show the animation
    text('Merry christmas', width/2, height/2);
}

这要求您在声明 hitCount 的位置旁边创建一个 const HITS_BEFORE_ANIMATION=10。您在这里所做的是在球反弹少于 X 次时显示精灵，否则显示动画（这里是简单的文本）。

最后你想在动画结束后再次展示游戏。有很多不同的方法可以做到这一点，这主要取决于你如何编码你的动画。为了这个答案，我会说我们想要显示 50 帧的动画，然后再回到游戏中。

所以让我们声明let animationCount=0 将保存动画到目前为止已显示的帧数，const ANIMATION_FRAMES=50 将保存显示动画的帧数。然后我们可以像这样更新之前的代码：

if (hitCount < HITS_BEFORE_ANIMATION) {
    // Show the game if we didn't reach the number of hits
    drawSprites();        
} else {
    // Show the animation
    text('Merry christmas', width/2, height/2);
    animationCount++;
    
    // Stop showing the animation and go back to the game after some time
    if (animationCount === ANIMATION_FRAMES) {
        hitCount=0; // Return to game
        animationCount = 0;
    }
}

这样，当您完成动画时，hitCount 将重置为零，这将重新启用 drawSprites()，并且我们还会重置 animationCount，否则下次应该显示 if (animationCount === ANIMATION_FRAMES) 将立即为真，我们将显示它只适用于一帧。

我使用您的代码和我添加的内容创建了一个 codepen，以便您可以看到它正在工作。它是可用的here 我认为它应该为您提供入门所需的内容，一旦您对动画进行编码，您可能需要进行一些调整，但至少您会知道如何继续。