How to collide using OOP JavaScript?

Question

I am making a game(shooting game) using OOP javascript for my project. I already moved(player) and make the enemy disappear at the edge of the container. Now, I want to collide with the shooter(player) and enemy and display the message "Game Over". Here is my code of enemy.js and shooter.js . Also, my container.js .

container.js

class Container{
    constructor(){
        this.containerElement = document.getElementsByClassName("container")[0];
    }
    initialization(){
        this.shooterElement = document.getElementsByClassName("shooter")[0];
        let containerElement = document.getElementsByClassName("container")[0];
        this.backgroundElement = document.getElementsByClassName("background")[0];
        this.background = new Background(this.backgroundElement);
        this.shooter = new Shooter(this.shooterElement);
        document.addEventListener('keydown', (e)=>this.shooter.buttonGotPressed(e));
        let enemyElement = document.getElementsByClassName("enemy")[0];
        this.enemies = [];
        setInterval(function(){
            var top = Math.floor(Math.random() * 50) + 1;
            var left = Math.floor(Math.random() * 550) + 1;
            this.enemy = new Enemy({parentElement: containerElement, leftPosition: left, topPosition: top});
        },400)
        this.enemies.push(this.enemy); 
    }
}
let container = new Container();
container.initialization();

enemy.js

class Enemy{
     constructor({parentElement,leftPosition, topPosition }){
        let enemyElement = document.createElement("div");
        this.enemyElement = enemyElement;
        this.leftPosition = leftPosition;
        this.topPosition = topPosition;
        this.containerHeight = 600;
        this.y = 15;
        this.height = 40;
        this.width = 50;
        this.enemyElement.style.left = this.leftPosition + 'px';
        this.enemyElement.style.top= this.topPosition + 'px'; 
        this.enemyElement.style.height = this.height + 'px';
        this.enemyElement.style.width = this.width + 'px';
        this.enemyElement.style.position = "absolute";
        this.enemyElement.style.background="url(images/enemy3.png)";   
        console.log(enemyElement)
        parentElement.appendChild(this.enemyElement);
        this.containerCollision = this.containerCollision.bind(this);
        setInterval(this.containerCollision, 100);
    }
    containerCollision(){
        if(this.topPosition >= this.containerHeight - this.width ){
            this.enemyElement.style.display="none";
        }
        this.topPosition = this.topPosition + this.y;
        this.enemyElement.style.top = this.topPosition + 'px';    
    }
}

shooter.js (this is the player)

class Shooter {
  constructor(shooterElement){
        this.shooterElement = shooterElement;
        this.shooterleftPosition = 300;
        this.shootertopPosition = 555;
        this.containerWidth = 600;
        this.width = 30;
        this.height = 40;
        this.x = 5;
        this.y = 1;
        this.shooterElement.style.left = this.shooterleftPosition + 'px';
        this.shooterElement.style.top = this.shootertopPosition + 'px';
        this.buttonGotPressed = this.buttonGotPressed.bind(this);
    }
    buttonGotPressed(e){
        console.log(e);
        if(e.key == "ArrowLeft"){
            console.log(e.key);
            if(this.shooterleftPosition <= 0){
                this.shooterleftPosition = 0;
            }
            else
            {
            this.shooterleftPosition = this.shooterleftPosition - this.x;                
            }
            console.log(this.shooterleftPosition)
            this.shooterElement.style.left = this.shooterleftPosition +'px'; 
        }
        if(e.key == "ArrowRight"){
            this.shooterleftPosition = this.shooterleftPosition + this.x;
            this.shooterElement.style.left = this.shooterleftPosition +'px';
            if(this.shooterleftPosition >= this.containerWidth - this.width){
                this.shooterleftPosition = this.containerWidth - this.width;
                this.shooterElement.style.left = this.leftPosition + 'px';
            }
        }
    }
}
     Now, How do I detect and collide shooter(player) and enemy and display the message/alert "Game Over". If the enemy touches the shooter(player). Here is pic too.

How do i know enemy touched the player and display game over in this pic

What I tried to detect the collision of player and enemy

 collidingShooter(){
            if (this.enemies.push(this.enemy)>1) 
            {
(
                 ([this.enemies][this.enemy].top <= this.shootertopPosition + 50) &&
            ([this.enemies][this.enemy].top >= this.shootertopPosition) &&
             ([this.enemies][this.enemy].left >= this.shooterleftPosition) &&
            ([this.enemies][this.enemy].left <= this.shooterleftPosition+ 50) 

)
            console.log("hitttt");
            this.enemies.splice(this.enemy,1);
           // this.shooterElement.splice(1);
            }

         }

Answer 1

I believe that you messed something up here First of all you use array in the wrong way:

[this.enemies][this.enemy].top

What it does: Creates new array with one element (which is this.enemies array), now it converts this.enemy to a string = 'object Object' and tries to find a key in this new array, which propably returns undefined and now it tries to get top of undefined. What you probably wanted to do is:

this.enemies[this.enemies.indexOf(this.enemy)].top

But even though it has no oop sense. What I would do:

function checkCollision() {
  for (let i = 0; i < this.enemies.length; i++) {
    if (areColliding(this.shooter, this.enemies[i])) {
      console.log('hit')
    }
  }
}

function areColliding(o1, o2) {
  if (o1.top <= o2.top + o2.height &&
    o1.top >= o2.top &&
    o1.left <= o2.left + o2.width &&
    o1.left >= o2.left) {
    return true
  }
  return false
}

There are better collision algorithms than aabb and even if you want to do this in this way, your game can get very slow if you have thousands of enemies. There is algorithm to split game world in to smaller rectangles and check for collision inside them.