Ch. 2 Vector2d Class

We need to create a couple methods for later uses. All of this will still be inside our code.


var TankGame = (function() {
	// code
}

We will add a function called deg2rad that will pass the variable degrees. The point of this function is to return the degrees into radians.


function deg2rad(degrees) {
    return degrees * (Math.PI/180);
}

To understand what our vector2d class does, we have to understand what a vector is. A Vector2 has a 2D direction, like a xy point in a 2D space, or the position of a joystick stick, or the uv offset of a point on a 2D texture.

Our Map is a vector because it is a flat (2d) area where our tanks move.

Under this we want a class called Vector2d. We also need to add a constructor to the class so that wherever we call it, we can add values to their fields.


class Vector2d {
constructor(x, y) {
      if (typeof x == 'undefined' || typeof  y == 'undefined') {
        throw "Invalid arguments";
      }
      this.x = x;
      this.y = y;
}

// more code
}

We have an if statement inside the constructor that checks to make sure the x and y are not undefined. If either of these variables are undefined we set their respective fields to null.

Next we will add another method inside the vector2d class. The point of this method is to rotate the coordinates clockwise. Simply we will turn the radians into “-radians”. We will pass a variable that is radians


rotate(radians) {
      // Rotates coordinates counterclockwise
      //radians=-radians
      if (radians != 0) {
        var x = this.x;
        var y = this.y;
        this.x = x * Math.cos(radians) - y * Math.sin(radians);
        this.y = x * Math.sin(radians) + y * Math.cos(radians);
      }
      return this; 
    }

Our next method will add a new vector to the instance of the Vector2d class. The point of this is to have the ability to add new vectors.


add(vector) {
      if (vector instanceof Vector2d) {
        this.x += vector.x;
        this.y += vector.y;
      }
      else throw "Invalid argument";
      return this;
    }

We also need the ability to multiply values to our existing x and y values. This multiply method will first have to check that the value that is passed in the multiply argument is a number.


subtract(vector) {
      if (vector instanceof Vector2d) {
        this.x -= vector.x;
        this.y -= vector.y;
      }
      else throw "Invalid argument";
      return this;
    }

Another very important thing that we need is to calculate the dot product between the given vectors. We will pass an instance of the Vector2d class and check if it is an instance using “instanceof”. We throw Invalid argument because we know it's going to work, just for testing purposes.


get_dot_product(other) {
      if (other instanceof Vector2d) return this.x*other.x + this.y*other.y;
      else throw "Invalid argument";
    }

These methods are our own getters because we get a value of all the current fields being manipulated statically and we can get whatever we want. We can repeatedly use these methods which are very efficient. Get_dot_product is an example of our own “getter”. These are not actual getters.


get_unit_vector() {
      var c = this.get_magnitude();
      var unit_vec = new Vector2d(this.x/c, this.y/c);
      return unit_vec;
    }

    get_right_normal() {
      return new Vector2d(this.y, -this.x);
    }

    get_magnitude() {
      return Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2));
    }

    get_magnitude_squared() {
      return Math.pow(this.x, 2) + Math.pow(this.y, 2);
    }

    get_inverted() {
      return new Vector2d(-this.x, -this.y);
    }

These functions will help our program because we can constantly get values from these methods.

Our Next method will just return another instance of our Class Vector2d that contains the current values of x and y.


clone() {
      return new Vector2d(this.x, this.y);
    }

Our last method we will call “reflect” that we will pass a vector. Reflects this vector around given unit vector.


reflect(vector) {
      if (vector instanceof Vector2d) {
        var vec2 = vector.clone(); // Avoid modifying given vector
        vec2.multiply(vec2.get_dot_product(this));
        vec2.multiply(2);
        this.subtract(vec2);
        return this;
      }
      else throw "Invalid argument";
    }
  }; // this is the bracket closing the Vector2d function.

All of this should go inside our vector2d class. However with the closing flower bracket we have to put a semi colon after the bracket.

ALL OF CHAPTER TWO CODE https://pastebin.com/H7d0y3WH

Previous Chapter

1️⃣

Ch. 1 HTML Structure and JS Variables

Next Chapter

3️⃣

Ch. 3 GameObject Class