In many games, you would want to add something we like to call shooting -- that is, making projectiles go in a certain direction. It is actually very easy to accomplish this!! @BobTheTomatoPie hai
First, we create an HTML repl with some minimum boilerplate. You can grab the fork here here. Long ridiculous name included!
Creating a player
First, we must add a player. This is actually really easy to do. In
script.js, we represent the player as:
Note: The comments should not be added in the program, they are just to tell you where you should place the code!
Creating the projectile class
The second thing we must do is to add projectiles (or bullets). The easiest way to represent this is with a class, so that is what we will do.
projectile.js file, add:
Note: It's always good to be organized!
our projectile class will take in the x position, the y position, and an angle which it will go at. We will next implement drawing the projectile.
While we are at it, let's also add an array that will contain our projectiles:
Alright. Now that we have a class that abstracts a bullet, lets add the ability to shoot. In
Now, the only argument we still need is the angle. How do we calculate the angle? Well, we know what our two points are,
(width / 2, height / 2) and
(mouseX, mouseY). Calculating angles sounds pretty trigonometric to me, so we introduce the
In trigonometry, we have three functions. They take in an angle, and return a ratio. Given a triangle like this:
I didn't have an image editor :(
The trig functions evaluate to:
Note: When calculating angles, which is an ambient context, the Hypotenuse is 1.
Now, because we have the side lengths of
Adjacent (remember those points?), we just need to use an inverse function to get back our angle! We use
atan2 because those are the sides we have. Now, if you are mathematically inclined,
atan2 actually isn't a function,
atan is. The only thing is,
atan has been used so much for things like our case that programmers decided to ease things up for us, by making the
atan2() function. Here is what it takes in as the arguments:
So in our case, we have:
All together now:
When you click on the screen, nothing happens! Why? We forgot to draw the projectiles! Let's draw them:
Next, we draw the projectiles. In
Note: This code is guaranteed to run after the page has loaded, and thus the p5.js variables are guaranteed to be defined.
Remember to always check if the page has loaded!
Fun fact: it still doesn't work!
The reason is that we still haven't actually added any code to move the projectiles.
Remember that triangle? Now that we have the angle, we want to calculate how much up and how much right we want to go. This sounds like a job for
Note: If you read previous notes you would understand why this works.
Awesome! The only problem is that it is slightly slow, so let's speed it up.
Trying it out
When we click on the canvas to a certain spot, it works perfectly!
You can check out the working repl here.
- Now that you know how to calculate the angle of the player and the cursor, add a gun!
- Add the ability to move the player.
- I recommend making player a class as well.
If you liked this tutorial check out my game to see a reala world example (or any other shooter game for that case lol)!
This just sounds wrong..
HEY! I'm learning that rn lol!
A way to remember this:
SOH CAH TOA
Sinus: Opposite / Hypothenuse
Cosinus: Adjacent / Hypothenuse
Tangente: Opposite / Adjacent
Or in french:
which when you pronounce it makes "Casse-toi" meaning "Go away" (in a kinda vulgar way) xDDDD