两个div vanillaJS之间的碰撞没有检测到

Question

我用 vanilla js 为网络创建了一个游戏。我希望控制台检测两个 <img> 标签之间的冲突。我正在使用 DOM 来检索项目。使用箭头，我可以移动其中一张图像。

问题：当他们互相接触时，控制台没有检测到任何东西。上面写着：没有碰撞。我需要碰撞才能进入下一页/场景。

console.log('collisions');
// collision entre la limite et le personnage


let rect1 = document.getElementsByClassName('perso')
let rect2 = document.getElementsByClassName('obstacle');
console.log(rect1[0]);
console.log(rect2[0]);

if (rect1[0].x < rect2[0].x + rect2[0].width &&
  rect1[0].x + rect1[0].width > rect2[0].x &&
  rect1[0].y < rect2[0].y + rect2[0].height &&
  rect1[0].height + rect1[0].y > rect2[0].y) {
  console.log("collision");
  // window.location.href = 'htmlpage1.html';//passe à la page/scene suivante
} else {
  console.log("no collision");
}

#move {
  height: 300px;
  width: 300px;
  position: relative;
  z-index: 1;
}


/* limite de la page permet de passer à la scene suivante */

#limite {
  width: 150px;
  height: 250px;
  position: fixed;
  z-index: 2;
  margin: 30px 1100px;
  opacity: 50%;
}

<main>

  <div class="cadre">
    <img id="premierplan" src="../img/foreground.png" alt="premierplan">
    <img id="move" class="perso" src="../img/ne_bouge_pas_.gif" alt="image personnage">
    <img id="limite" class="obstacle" src="../img/carrebleu.png" class="cube" alt="frontiere">
  </div>

</main>

Answer 1

你有一些问题..

1. getElementsByClassName 返回 HTMLCollection，而不是单个元素。如果您有多个，则需要遍历这些。或者，如果每个类只有一个，只需使用 querySelector。
2. 如果要使用元素的x、y，则需要使用getBoundingClientRect 获取它的DOMRect。

试试这个：

let rect1 = document.querySelector('.perso').getBoundingClientRect();
let rect2 = document.querySelector('.obstacle').getBoundingClientRect();

Answer 2

我找到了我的问题的解决方案。为了使代码工作，它必须放在 keydown 和 keyup 函数中，否则它只会工作一次。这很复杂，但我到了那里。所以我的角色可以从一个 HTML5 场景/页面移动到另一个。我的 Javascript 代码：

const RIGHT_KEY = 39;
const LEFT_KEY = 37;
const S_KEY = 83;


document.onkeydown = function(e) { 
    if (e.keyCode == LEFT_KEY) {//si la flêche gauche est pressée
    move.style.left = (move.offsetLeft + -10) + 'px';//aller à gauche
    let gauche = document.getElementsByClassName("perso");//changer l'animation par walk_vers_gauche
        // console.log(gauche);
        gauche[0].src="../img/walk_vers_gauche.gif";
     }
     else if (e.keyCode == RIGHT_KEY) {//si la fleche droites est pressée
        move.style.left = (move.offsetLeft + 10) + 'px';//si la fleche droites est pressée
        let droit = document.getElementsByClassName("perso");//changer l'animation par walk.png
        // console.log(droit);
        droit[0].src="../img/walk.gif";  
    } 
    
    else if(e.keyCode == S_KEY){ //si la touche S est préssée 
        let jump = document.getElementsByClassName("perso");//changer l'animation par saute
        console.log(jump); 
        jump[0].src = "../img/saute.gif";        
    }
    else{
        let stable = document.getElementsByClassName("perso");//sinon jouer animation "ne bouge pas"
        stable[0].src = "../img/ne_bouge_pas_.gif";
    }
    // Collision personnage 
    //si la console affiche "collision" passer à la scène suivante    
    function isCollide(a, b) {
        var a = document.querySelector('.perso').getBoundingClientRect();
        var b = document.querySelector('.premierplan').getBoundingClientRect();
        // console.log(a);
        // console.log(b);
        if(
            ((a.y + a.height) < (b.y)) ||
            (a.y > (b.y + b.height)) ||
            ((a.x + a.width) < b.x) ||
            (a.x > (b.x + b.width))=== false && (e.keyCode == RIGHT_KEY)
        ){
            console.log("pas de collision");
        }
       
        else{
            console.log(" collision");
        };
        
    }
    isCollide()
};
    // console.log(e.keyCode);}

    //keycode

    document.onkeyup = function(e){//fonction quand la touche est relachée jouer l'animation 'ne_bouge_pas.gif"
        if(e.keyCode == LEFT_KEY){
            let stable = document.getElementsByClassName("perso");
            stable[0].src = "../img/ne_bouge_pas_.gif";
        }
        if(e.keyCode == RIGHT_KEY){
            let stable = document.getElementsByClassName("perso");
            stable[0].src = "../img/ne_bouge_pas_.gif";  }
            
            //collisions personnage page 1
            function isCollide(a, b) {
                var a = document.querySelector('.perso').getBoundingClientRect();
                var b = document.querySelector('.premierplan').getBoundingClientRect();
                // console.log(a);
                // console.log(b);
                if(
                    ((a.y + a.height) < (b.y)) ||
                    (a.y > (b.y + b.height)) ||
                    ((a.x + a.width) < b.x) ||
                    (a.x > (b.x + b.width)) === true && (e.keyCode == RIGHT_KEY)
                ){
                    console.log(" no collision");
                }
               
                else{
                    console.log("collision");//s'il est écrit  " collision"
                    window.location.href = '../html/page2.html';//passe à la page/scène suivante
                };
                
            }
            isCollide()//appel de la fonction     
    };

感谢您的帮助。我希望我的回答对代码似乎不起作用的其他开发人员有用。祝大家好日子