-3

我正在尝试构建乒乓球，在球击中球拍 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");
4

1 回答 1

0

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

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

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

您已经根据您的条件检查了球何时接触球拍，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);
}

这要求你const HITS_BEFORE_ANIMATION=10在你声明的地方创建一个 next hitCount。您在这里所做的是在球反弹少于 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)它会立即为真，我们只会显示一帧。

我用你的代码和我添加的代码创建了一个代码笔，这样你就可以看到它工作了。它可以在这里找到我认为它应该为您提供入门所需的内容，一旦您对动画进行编码，您可能需要进行一些调整，但至少您会知道如何进行。

于 2020-12-03T11:05:44.800 回答