We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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.
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