Как столкнуться, используя ООП JavaScript?

Question

Я создаю игру (стрелялку), используя ООП javascript для моего проекта. Я уже перешел (игрок) и заставил врага исчезнуть на краю контейнера. Теперь я хочу столкнуться со стрелком (игроком) и противником и отобразить сообщение «Игра окончена». Вот мой код enemy.js и shooter.js. Также мой 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 (это игрок)

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.

Как узнать, что враг коснулся игрока и показать игру на этой картинке

Что я пытался обнаружить столкновение игрока и врага

 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

Я верю, что вы что-то напутали здесь Прежде всего вы неправильно используете массив:

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

Что это делает: Создает новый массив с одним элементом (который является массивом this.enemies), теперь он преобразует this.enemy в string = 'object Object' и пытается найти ключ в этом новом массиве, который, вероятно, возвращает неопределенное значение, и теперь он пытается получить вершина неопределенного. Что вы, вероятно, хотели сделать, это:

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

Но даже если это не имеет никакого смысла. Что бы я сделал:

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
}

Существуют лучшие алгоритмы столкновений, чем aabb, и даже если вы захотите сделать это таким образом, ваша игра может стать очень медленной, если у вас тысячи врагов. Есть алгоритм, позволяющий разбить игровой мир на более мелкие прямоугольники и проверить, нет ли в них столкновений.