Javascript 使用vanilla JS通过CSS动画对2个div进行简单碰撞检测

我正在尝试使用HTML、CSS和JS构建一个超级简单的超级马里奥风格的游戏

我没有使用

只是在简单的div中构建整个内容，并通过CSS动画获得背景和角色的移动

我遇到的问题是角色和怪物之间的碰撞检测。基本上，我想发生的是，如果角色接触到怪物，游戏结束，你通过跳跃来躲避怪物

我尝试了不同的JS片段来检测div碰撞，但问题是代码返回div的静态X和Y位置，而不是CSS动画中每个关键帧的位置

通过深入挖掘，我找到了一种方法，通过在我的怪物和角色div中添加事件侦听器，代码可以跟踪每个关键帧的X和Y：

    shadow1.addEventListener('animationiteration', function (event) {
       shadowDiv = this.getBoundingClientRect();
       console.log(shadowDiv);
    });

    cont.addEventListener('animationiteration', function (event) {
      charDiv = this.getBoundingClientRect();
      console.log(charDiv);
});

当动画运行到怪物和角色的控制台时，上面返回所有的X和Y位置，但我遇到的问题是，它仅在事件侦听器的范围内返回关键帧。我已经尝试了各种方法来让相同的事情在全局范围内发生，但是每次我这么做，它都会返回一个未定义的值，从那里我基本上被卡住了。不知道如何前进

任何帮助都将不胜感激

以下是相关代码：

HTML

JS

 <div id="char-container"></div>

 <div id="shadow-container-1"> </div>

 <div id="btn"> Jump! </div>

@keyframes rtol {
  0% { left: 800px; opacity: 1;}
  80% { opacity: 1;}
  85%{ opacity: 0.75;}
  90% { left: -220px; opacity: 0;}
  100% { left: -220px; opacity: 0;}
}

#shadow-container-1{
 width: 100px;
 height: 160px;
 position: absolute;
 display: block;
 bottom: 450px;
 left: 800px;
 opacity: 1;
 animation-name: rtol;
 animation-iteration-count: infinite;
 animation-direction: normal;
 animation-timing-function: linear;
 animation-fill-mode: backwards;

@keyframes jump {
    from { bottom: -50px;  left: 0px; }
    to { bottom: 400px; left: 150px; }
}


#char-container{
 width: 150px;
 height: 200px;
 position: relative;
 bottom: -50px;
}

let btn = document.getElementById('btn');

let cont = document.getElementById('char-container');


btn.addEventListener('click', function(e){

   if(e.target = btn){
       cont.style.webkitAnimationPlayState = 'running';
       cont.style.webkitAnimation = 'jump 1.25s ease 2';
       cont.style.webkitAnimationDirection = 'alternate';
   }

});

cont.addEventListener("webkitAnimationEnd", function(e){

  cont.style.webkitAnimation = '';
});


let shadow1 = document.getElementById('shadow-container-1');

shadow1.style.webkitAnimationDuration = Math.floor(Math.random() * 15) + 3   + 's';

shadow1.addEventListener('animationiteration', function (event) {
      shadowDiv = this.getBoundingClientRect();
      console.log(shadowDiv);
});


cont.addEventListener('animationiteration', function (event) {
      charDiv = this.getBoundingClientRect();
      console.log(charDiv);
});