Блог

Я создал игру для Интернета на ванильном 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 amp;amp;
  rect1[0].x   rect1[0].width > rect2[0].x amp;amp;
  rect1[0].y < rect2[0].y   rect2[0].height amp;amp;
  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> 

У вас есть несколько проблем..

1. getElementsByClassName возвращает an HTMLCollection , а не один элемент. Вам нужно либо выполнить итерацию по ним, если у вас их несколько. Или, если есть только один из каждого класса, просто используйте querySelector .
2. Если вы хотите использовать элемент x , y , вам нужно получить его DOMRect использование getBoundingClientRect .

Попробуйте это вместо:

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

Я нашел решение своего вопроса. Чтобы код работал, он должен быть помещен в функции 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 amp;amp; (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 amp;amp; (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     
    };
 

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