How do i code the paddle to input 1 point each time the ball touches it?

Hi guys, so I want to make a bouncing ball game (like the picture above) with a paddle at the bottom, once the ball hits the paddle, the ball bounces back and gets 1 score, if the paddle miss the ball, the score will go back to 0. How do i code the paddle to input 1 point each time the ball touches it? My code looks like this so far. Thanks

<html>

<head>
  <meta charset="UTF-8">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.6/p5.js"></script>
  <script>
    var w = 30; // Width of the shape
    var x, y; // Starting position of shape

    var xspeed = 5; // Speed of the shape
    var yspeed = 10; // Speed of the shape

    var xdirection = 1; // Left or Right
    var ydirection = 1; // Top to Bottom

    function setup() {
      createCanvas(600, 600);
      noStroke();
      frameRate(30);
      ellipseMode(RADIUS);
      // Set the starting position of the shape
      x = width / 2;
      y = height / 2;

    }

    function draw() {
      background(102);

      // Update the position of the shape
      x = x + (xspeed * xdirection);
      y = y + (yspeed * ydirection);

      // Test to see if the shape exceeds the boundaries of the screen
      // If it does, reverse its direction by multiplying by -1
      if (x > width - w || x < w) {
        xdirection *= -1;
      }
      if (y > height - w || y < w) {
        ydirection *= -1;
      }

      // Draw the shape
      ellipse(x, y, w, w);
      rect(mouseX, 500, 150, 50)
    }
  </script>
</head>

</html>

Answers

  • What exactly is your question? It's hard to answer general "how do I do this" type questions other than by pointing you to google. What about your code is confusing you?

    Also, instead of posting a screenshot of your code, post it here as an MCVE. Don't forget to properly format it using the code button.

    Shameless self-promotion: I wrote a tutorial on creating a Pong game in Processing available here.

  • edited October 2015

    Please, ask specific questions. Here are some examples (not in p5js, but may give you some hints).

    http://www.openprocessing.org/browse/?viewBy=tags&tag=Arkanoid

Sign In or Register to comment.