Distance between two objects - JavaScript Tutorial

- (Voiceover) In our final Collision example, we are going to detect the distance between two objects in our game. This is useful if we have a monster and a player and we want the monster to become activated when the player is closer to the monster. While this is technically not a Collision example we can still use this to detect whether one object is close enough to be within the boundaries of another. To get started, let's go into our examples files folder and open up the Ch02 folder. From here, let's open up 02_03 and then the Start folder. Inside, you'll find the distance-example.js file. Open this up in your text editor of choice, select all the code and copy it. Now let's switch over to CodePen and create a new pen. We'll name this Distance Example and we'll double click on the JS tab to expand it and paste in our code. Once you see the preview, drag the center bar over to the right to give yourself some more room to code. In this example we have a green box which represents our player and a blue box which represents our enemy. The player will simply follow the mouse and we want to detect the distance of our player from our enemy. On lines 91 and 92 we have two variables that represent the X distance and the Y distance which we'll fill in. And on line 95, we have a method which calculates the distance between two targets. To get started, let's go ahead and add in a new line of code. We're going to calculate that the x distance equals the target A, x value minus the target B, x value. As you fill in the code you'll see a dotted line is now drawn representing the distance between the center point of the enemy to the center point of the player. This is only drawn along the x values since we're only calculating the xd value. If we want to calculate the yd value, simply write yd equals target A.y minus target B.y and go back to the preview. As you can see, we're now calculating the y distance from the center point of our enemy. This may look familiar to you. In order for us to find the distance between the center of our monster to the center of our player we're going to need to use Pythagorean theorem. In order to calculate this, let's replace the zero value that we're returning with xd multiplied by xd. And we'll also add yd multiplied by yd. And in order to finish this, we're going to need to find the square root of this value. So let's wrap this in a Math.sqrt method and the value we return will be the distance between both of our objects. There are all kinds of uses for this type of example. One thing to note though is that square root is a very expensive operation. While it may be tempting to use this type of equation in order to detect distance in our game. If you have lots of objects that are trying to find the distance from the player, this may be a little taxing and slow down the performance of your game. One thing to keep in mind is that you should only try to perform this with objects inside of the screen. It's easier to detect whether an object is outside of the distance of the render area before trying to calculate something expensive like this.