如何使用OOP JavaScript进行冲突？

我正在为我的项目制作一个使用OOP javascript的游戏（射击游戏）。我已经移动（玩家）并使敌人消失在容器边缘。现在，我想和射手（玩家）和敌人碰撞，并显示“游戏结束”的信息。这是我的

敌军.js

和

shooter.js

代码。还有，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();

敌方

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.shooterElement=shooterElement；
此.shooterleftpposition=300；
这个.shootertopPosition=555；
此.containerWidth=600；
这个宽度=30；
这个高度=40；
这个.x=5；
这个y=1；
this.shooterElement.style.left=this.shooterleftpposition+'px'；
this.shooterElement.style.top=this.shooterreption+'px'；
this.buttonGotPressed=this.buttonGotPressed.bind（this）；
}
按钮按下（e）{
控制台日志（e）；
如果（e.key==“箭头左”）{
控制台日志（e.key）；
if（this.shooterleftPosition=this.containerWidth-this.width）{
this.shooterleftPosition=this.containerWidth-this.width；
this.shooterElement.style.left=this.leftPosition+'px'；
}
}
}
}
现在，我如何检测和碰撞射手（玩家）和敌人，并显示消息/警报“游戏结束”。如果敌人碰到射手（玩家）。这也是照片。

我试图检测玩家和敌人的碰撞

 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);
            }

         }

collidingShooter（）{
如果（此.敌人.推（此.敌人）>1）
{
(
（[this.friends][this.friends].top=this.shooter）&&
（[this.friends][this.friends].left>=this.shooterleftpposition）&&
（[这个.敌人][这个.敌人].左我相信你把这里搞砸了
首先，您以错误的方式使用数组：

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

它的作用是：
使用一个元素创建新数组（即this.friends数组），现在它将this.friends转换为字符串='object object'，并尝试在新数组中查找一个键，该键可能返回undefined，现在它尝试获取undefined的顶部。
您可能想做的是：

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
}

函数checkCollision（）{
for（设i=0；i

有比aabb更好的碰撞算法，即使你想这样做，如果你有成千上万的敌人，你的游戏可能会变得非常慢。有一种算法可以将游戏世界分割成更小的矩形，并检查其中的碰撞。
嗨，Vatsat，你能添加你迄今为止尝试过的吗？好的，那你的问题是什么？我添加了到目前为止，我已经尝试过。：）我的问题是玩家和敌人没有碰撞。正如你在图片和代码中看到的那样……玩家（射手）和敌人没有碰撞检测。你尝试过，但它给了你一个错误，或者它不起作用？也许你应该花一些时间想想是什么错了。
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
}