Just change the numbers in the if statements to change where the edges are! Circle Point Collision The only thing that changes is the particulars of how those steps are implemented.Īlso note that you can use this form of collision detection with any edge, not just the edges of the window. You could teleport the ball to the other side of the window so it wraps (like Pac-Man), or you could move to the next screen (like Zelda), or you could end the game (like Pong).Įvery other form of collision detection will follow those basic steps.

Bouncing the ball is just an example, but you can do anything you want. This might seem simplistic, but this is a basic form of collision detection: the state of an object (in this case, the ball’s position and speed) is stored in a set of variables, those variables are used to check whether the object collides with another (in this case, the edges of the screen), and if so, some action is taken (the speed variables are reversed to cause the ball to bounce). See the Pen by Happy Coding ( on CodePen.

Remember this program from the animation tutorial, which displays a ball bouncing around the screen: We’ll start with something simple and work our way up from there. If you can determine that two shapes touch, you can trigger some action- think of detecting when the user has moused over a button, or when a game character touches the floor or a badguy, or when your animation reaches a certain state.Ĭollision detection can be accomplished using code that ranges from simple if statements to complicated algorithms handling thousands of objects at once, and even libraries that simulate realistic physics. This tutorial introduces collision detection, which allows you to determine when two shapes touch. Collision Detection between Many ObjectsĪt this point you should be familiar with functions, animations, and if statements.Collision Detection with Moving Objects.Rectangle Rectangle Collision Detection.Collision Detection Collision Detection tutorial processing advanced collision-detection

Scratch bounce if touching edge