I have looked at some other people’s code and I am absolutely confused by it. I’m currently stuck at trying to get the ball to ricochet off of the walls and players.
to bounce off a player, you need to tell the ball what direction to go when the ball needs to move. for example, when it hits the left player, ball.direction = “right” will tell the code to move right. when you move the ball, you can make an if statement for whether ball.direction is “left” or “right”, then make the ball move left accordingly. if you want to have a few vertical walls, you can add that too. making a wall collide in all 4 directions will be harder, but I’m sure someone else can help you if you need that help.
of course, there are other things to implement, like horizontal/vertical speed and collision with the top and bottom walls. but this is the basics of bouncing off the paddles.
i would keep track of the ball’s x and y velocity. so when the ball hits a wall you make the ball bounce by negating its x/y velocity, depending on which side of the player/wall the ball hit.
How would i get the velocity though? And by negating do you mean making it negative or?
velocity is how much an object’s position changes
and yes by negate, i mean make it negative.
Then wouldnt be speed and velocity be the same?
Also wouldnt that just make it go back and forth in a straight line?
you have to be able to make the ball also go up and down. hitting the top wall makes it go down, and vice versa. when the ball hits the paddle, the up-down speed should depend on how far from the middle of the paddle the ball is (that’s how most pong games work).
you store two directions of velocity: left-right velocity and up-down velocity
and speed and velocity aren’t actually the same, velocity has a direction while speed doesn’t.
Alright thanks for the help ill keep working. Much appreciated and nice to know the community here is friendly!
Something that I learned from @awc95014’s ball project: When it comes to having a ball bounce, setting the ball’s speed to the difference between its position and the object that it hits is the best way to make it bounce in the opposite direction. If the object hits it on the left, the x distance from the object to the ball should be positive, and setting the ball’s speed to a positive will make the ball bounce in the opposite direction. Same for left, up, and down.
It’s a simple way to make a good bounce
thats kinda got me confused now sorry
i think he means something like this:
var dx = (this.x - hit.x);
velX = Math.sign(dx) * ballSpeed;
(Math.sign returns -1 if a number is less than 0, 1 is a number is greater than 0, or else it returns 0)
Ok i understand that ill get working on it and again thanks to all that have helped!!
Alright, that does work but I’m curious if I’m correct in thinking I need to do something different for the horizontal walls. I was thinking tan cos or sine. Because right now if it hits a wall it directly bounces back which makes sense. I did try negating when the ball hits the wall but it currently doesn’t work
how did negating not work? can you show me the code?
//handling hits
if (this.hitTest(p1)) {
//this.bounce = 'right';
this.recentHit = 'p1';
this.lastPToHit = 'p1';
this.dx = (this.x - p1.x);
this.dy = (this.y - p1.y);
this.volX = Math.sign(this.dx) * this.speed;
this.volY = Math.sign(this.dy) * this.speed;
}else if (this.hitTest(p2)){
//this.bounce = 'left';
this.recentHit = 'p2';
this.lastPToHit = 'p2';
this.dx = (this.x - p2.x);
this.dy = (this.y - p2.y);
this.volX = Math.sign(this.dx) * this.speed;
this.volY = Math.sign(this.dy) * this.speed;
}else if (this.hitTest(WallTop)){
//this.bounce = 'down';
this.recentHit = 'wallTop';
this.dx = (this.x - WallTop.x);
this.dy = (this.y - WallTop.y);
this.volX = Math.sign(this.dx) * this.speed;
this.volY = Math.sign(this.dy) * this.speed;
}else if (this.hitTest(WallBot)){
this.recentHit = 'wallBot';
this.dx = (this.x - WallBot.x);
this.dy = (this.y - WallBot.y);
this.volX = Math.sign(this.dx) * this.speed;
this.volY = Math.sign(this.dy) * this.speed;
}
//handling move
if(this.recentHit === 'none'){
this.volX++;
this.x += this.volX;
console.log('volX has been added to')
}else if(this.recentHit === 'p1' || this.recentHit === 'p2'){
this.x += this.volX;
this.y += this.volY;
console.log('recent hit is a player')
}else if(this.recentHit === 'wallTop'){
console.log('recent hit is top wall')
if(this.lastPToHit === 'p2'){
this.x += this.volX;
this.y -= this.volY;
}else if(this.lastPToHit === 'p1'){
this.x += this.volX;
this.y += this.volY;
}
}else if(this.recentHit === 'wallBot'){
console.log('recent hit is botwall')
if(this.lastPToHit === 'p2'){
this.x -= this.volX;
this.y -= this.volY;
}else if(this.lastPToHit === 'p1'){
this.x += this.volX;
this.y -= this.volY;
}
}
So this is my code for the ball, negating did not work for the horizontal walls. it did a weird diagonal thing off the screen
1 Like
you’re only supposed to change either the X or the Y depending on if the wall is horizontal or vertical, and not both. For horizontal, only the x velocity changes. for vertical, only the y velocity changes. So you don’t need to determine which side of the wall the ball hit using Math.sign as a result of this, because it will always return the same value no matter what (unless the player somehow breaks the game). Just make your ball always bounce to the left if it hit the right wall, make your ball always bounce to the right if it hit the left wall, e.t.c.
this is also true for when you touch the players, which I assume are rectangular. if the players were circles then the code would be fine but they aren’t. you should only affect either the X or Y component of the velocity depending on which side of the player was touched. horizontal = X, vertical = Y Umm… nevermind, this would allow the ball to bounce based off of where it hit the paddle, which you want.
Also, it is impossible for the ball to be able to bounce behind the paddle when it touches the left/right side of a paddle, so you don’t need to detect whether the ball hit the left side or right side of the paddle, only detect if it hit the front. So you don’t need Math.sign, just use -1 or 1 depending on which side the player is on. -1 if right, 1 if left.
wouldn’t y still need sign though? Because y needs to know if the paddle was hit on top or bottom. and right now the game works btw just gotta add scoring and stuff