Sprite/P5- count how many times an object hits another

Question

I'm trying to build pong where after the ball hits the paddle x amount of times, a Christmas animation will appear. I'm not sure how to register this though, as well as if I should use an if else to switch to the animation. Stackoverflow won't let me post my question because it says it is "mostly code" so this is me trying to take up more text space. Here is my code so far:

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");

The message saying your question is mostly code is there to indicate that you need to give more context on what you are doing: Why don't you have a counter to keep track of how many time the ball bounced on the paddle? Do you already have your animation code, what does it look like? When the animation starts do you want to remove the other sprites or keep the game playing? How did you try to show your animation and why didn't it work? Which behavior did you manage to implement and how is it different from what you want to get? These are a few of the details you could add which would be useful — statox, Dec 01 '20 at 14:39
Sorry this is my first coding class! I didn't know you could do a counter/now how you would. I don't yet have the animation code, I was going to put that in after I figured out how to make the switch work, so I was just practicing with a different colored background which is what is commented out at the bottom. When it starts, I would like the sprites to be removed, but then be able to click back to the game with no animation, so it can keep repeating. I just don't even know what kind of if-else statement to use to get it to switch so that's why it hasn't worked, I'm essentially just lost lol. — Sarah Barela, Dec 02 '20 at 18:32
Have a look at the answer I wrote. I think it should give you an idea of which direction to take to do what you want. — statox, Dec 03 '20 at 11:10

score 0 · Accepted Answer · answered Dec 03 '20 at 11:05

Based on your comment here is a way you could go:

You said you want to show the animation after the ball bounces on the paddle for a certain amount of time, to do that you can create a variable which will contain this count and be updated each time the ball touches a paddle.

So you can create for example let hitCount=0; outside of setup() and draw() this way you'll have a variable you can access from everywhere.

You already check when the ball touches a paddle with your conditions if (ball.bounce(paddleA)) { and if (ball.bounce(paddleB)) { so you can use these blocks of code to update 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);
}

And then you want to hide your sprites and run the animation. I think the simplest way to do that is to stop calling drawSprites() you can add the following to your draw() function:

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);
}

That requires that you create a const HITS_BEFORE_ANIMATION=10 next to where you declared hitCount. What you are doing here is to show the sprites if the ball bounced less than X times and otherwise show the animation (here a simple text).

Finally you want to show the game again when the animation is over. There are a lot of different ways to do it and that will depend mostly on how you code your animation. For the sake of this answer I will say that we want to show the animation for 50 frames and then go back to the game.

So let's declare let animationCount=0 which will hold the number of frames the animation has been shown so far and const ANIMATION_FRAMES=50 which will hold the number of frames to show the animation. We can then update the previous code like this:

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;
    }
}

This way when you're done with the animation hitCount is reset to zero which reenable drawSprites() and we also reset animationCount otherwise next time it should be shown if (animationCount === ANIMATION_FRAMES) would be immediately true and we would show it only for one frame.

I created a codepen with your code and what I added so that you can see it working. It is available here I think it should give you what you need to get started, you will probably need to do some adjustments once you code your animation but at least you'll have an idea of how to proceed.

Wow thank you so so much!! That makes a lot of sense and I understand it a lot more now. — Sarah Barela, Dec 06 '20 at 03:18
@SarahBarela If the answer solved your problem you can mark it as accepted with the green tick on the left so that other users know that you found a satisfying answer and that will give you some reputation points. And if it helped you, you can also give it an upvote with the up arrow on the left which will also give me some points. — statox, Dec 07 '20 at 09:05

Sprite/P5- count how many times an object hits another

1 Answers1