Collision Between Objects in Javascript
<p>I want to create collision between two different objects, but I have no idea how I could make it work, since I have multiple arrays, with multiple objects with different height and width. What is the best way to create collision? I'll put some of my code you can see a bit of my code.</p>

<p>I have this Class player:</p>

<pre><code>function Player() {
    this.speed = 10;
    this.height = 180;
    this.width = 150;
    this.pos_y = 425;
    this.pos_x = CENTER;
    this.player_image = new Image();
    this.player_image.src = 'img/car_middle.png';
}
</code></pre>

<p>And the class car:</p>

<pre><code>function Car(lane) {
    this.lane = lane;
    this.height = 108.75;
    this.width = 99;
    this.pos_x = CENTER;
    this.pos_y = -350;
    this.car_image = car_image[this.lane-1];
}
</code></pre>

<p>Car movement method:</p>

<pre><code>Car.prototype.move = function(){
    this.height += ZOOM_RATE;
    this.width += ZOOM_RATE;

        if (this.lane == 1) {
            this.pos_x -= SIDES_RATE;
        } else if (this.lane == 2) {
            this.pos_x -= MIDSIDE_RATE;
        } else if (this.lane == 3) {
            this.pos_x += MIDSIDE_RATE;
        } else if (this.lane == 4) {
            this.pos_x += SIDES_RATE;
        }

    this.pos_y += 3;
};
</code></pre>

<p>I move the player with the arrow keys, and the objects have a fixed diagonal movement, depending on the lane where the object is.</p>

<p><a href="https://i.stack.imgur.com/SBL1o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SBL1o.png" alt=""></a></p>