Im Vboucing Off the Wall Again
Bounciness off the walls
- « Previous
- Next »
This is the 3rd step out of 10 of the Gamedev Sheet tutorial. You tin can observe the source code equally it should expect after completing this lesson at Gamedev-Canvass-workshop/lesson3.html.
It is nice to see our ball moving, but it quickly disappears from the screen, limiting the fun nosotros can accept with it! To overcome that nosotros will implement some very uncomplicated collision detection (which will exist explained later on in more detail) to make the ball bounce off the four edges of the Canvass.
Uncomplicated standoff detection
To find the standoff we will check whether the ball is touching (colliding with) the wall, and if so, nosotros will change the management of its movement accordingly.
To make the calculations easier let's define a variable called ballRadius that will hold the radius of the drawn circle and be used for calculations. Add this to your code, somewhere below the existing variable declarations:
Now update the line that draws the brawl inside the drawBall() part to this:
ctx. arc (10, y, ballRadius, 0 , Math. PI * 2 ) ; Billowy off the summit and bottom
There are iv walls to bounciness the ball off — let'due south focus on the top i starting time. Nosotros need to check, on every frame, whether the ball is touching the top edge of the Canvas — if yes, we'll reverse the ball motion and then information technology will first to move in the contrary direction and stay within the visible boundaries. Remembering that the coordinate system starts from the summit left, we can come upwards with something like this:
if (y + dy < 0 ) { dy = -dy; } If the y value of the ball position is lower than cipher, change the direction of the movement on the y axis by setting it equal to itself, reversed. If the ball was moving upwards with a speed of two pixels per frame, now information technology volition be moving "up" with a speed of -two pixels, which actually equals to moving down at a speed of 2 pixels per frame.
The code above would bargain with the brawl bouncing off the meridian edge, so now let's think about the lesser edge:
if (y + dy > canvass.top) { dy = -dy; } If the ball's y position is greater than the height of the Sail (call up that nosotros count the y values from the peak left, so the top border starts at 0 and the bottom edge is at 320 pixels, the Canvass' peak), then bounce it off the bottom edge by reversing the y centrality movement as before.
Nosotros could merge those two statements into one to save on code verbosity:
if (y + dy > canvas.height || y + dy < 0 ) { dy = -dy; } If either of the ii statements is true, reverse the movement of the ball.
Billowy off the left and right
We have the summit and bottom edge covered, and so let's retrieve well-nigh the left and right ones. It is very similar actually, all you take to practise is to repeat the statements for 10 instead of y:
if (x + dx > canvass.width || 10 + dx < 0 ) { dx = -dx; } if (y + dy > canvas.height || y + dy < 0 ) { dy = -dy; } At this signal you should insert the to a higher place code block into the describe() function, just before the endmost curly brace.
The ball keeps disappearing into the wall!
Test your code at this bespeak, and y'all volition be impressed — now we have a brawl that bounced off all four edges of the sail! Nosotros have some other problem yet — when the ball hits each wall it sinks into it slightly earlier changing management:
This is because we're calculating the collision point of the wall and the center of the ball, while we should be doing information technology for its circumference. The ball should bounce right later if touches the wall, not when it's already halfway in the wall, and so allow's arrange our statements a bit to include that. Update the last code you lot added to this:
if (x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if (y + dy > canvas.tiptop-ballRadius || y + dy < ballRadius) { dy = -dy; } When the altitude betwixt the center of the ball and the border of the wall is exactly the same as the radius of the brawl, information technology will change the move management. Subtracting the radius from one edge'southward width and adding it onto the other gives us the impression of the proper collision detection — the ball bounces off the walls as it should do.
Compare your code
Lets again check the finished code for this office confronting what y'all've got, and have a play:
Note: Try changing the color of the brawl to a random color every time it hits the wall.
Next steps
Source: https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls
0 Response to "Im Vboucing Off the Wall Again"
Post a Comment