Shooting Tutorial

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

Setup

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:

// function draw() {
//   background(255);
  fill(0);
  ellipse(width / 2, height / 2, 50, 50);
// }

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.

In the projectile.js file, add:

class Projectile {
  constructor(x, y, ang) {
    this.x = x;
    this.y = y;
    this.ang = ang;
  }

  draw() {
  }
}

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.

  // draw() {
    fill(0);
    ellipse(this.x, this.y, 5, 5);
  // }

While we are at it, let's also add an array that will contain our projectiles:

// class Projectile {
//   ...
// }

let projectiles = [];

Shooting projectiles

Alright. Now that we have a class that abstracts a bullet, lets add the ability to shoot. In script.js, add:

// function draw() {
//  ...
// }

function mouseClicked() {
  projectiles.push(new Projectile(width / 2, height / 2, ));
}

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 atan2()!

In trigonometry, we have three functions. They take in an angle, and return a ratio. Given a triangle like this:

                /|
               / |
              /  |
             /   |
Hypotenuse  /    |
           /     | Opposite
          /      |
         /       |
        / Angle  |
       /_________|
         Adjacent

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 Opposite and 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:

atan2(opposite, adjacent);

So in our case, we have:

atan2(mouseY - height / 2, mouseX - width / 2);

All together now:

// function mouseClicked() {
  projectiles.push(new Projectile(width / 2, height / 2, atan2(mouseY - height / 2, mouseX - width / 2)));
// }

Drawing Projectiles

When you click on the screen, nothing happens! Why? We forgot to draw the projectiles! Let's draw them:

  // fill(0);
  // ellipse(width / 2, height / 2, 50, 50);
  // 
  projectiles.forEach(projectile => {
    projectile.draw();
  });

Next, we draw the projectiles. In projectile.js:

  // draw() {
    fill(255, 0, 0);
    ellipse(this.x, this.y, 5, 5);
  // }

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!

Moving Projectiles

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 sin() and cos().

  //   fill(255, 0, 0);
  //   ellipse(this.x, this.y, 5, 5);

    this.x += cos(this.ang);
    this.y += sin(this.ang);

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.

    this.x += 5 * cos(this.ang);
    this.y += 5 * sin(this.ang);

Trying it out

When we click on the canvas to a certain spot, it works perfectly!

You can check out the working repl here.

Challenges

• 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.

Closing

I hoped you enjoyed this tutorial and you learned a lot! You can learn more about the library used, p5.js, and you can learn more math on Khan Academy.

If you liked this tutorial check out my game to see a reala world example (or any other shooter game for that case lol)!