javascript pomocy problem position css html

Question

Witam. Chciałbym zrobić tak w kodzie, aby gdy pozycja elementu player będzie kolidowała z pozycją elementu target wyświetlał się alert(). Jednak nie wiem dlaczego nie działa. Problem prawdopodobnie leży w ostatnim if'ie na końcu kodu ale żeby był dobry wgląd na sytuację zamieszczam cały kod.

let player = document.getElementById('player');
let target = document.getElementById('target');
let pozycja = 50;
let szerokosc = window.innerWidth;
let wysokosc = window.innerHeight;
let randomWidth = Math.floor(Math.random() * szerokosc);
let randomHeight = Math.floor(Math.random() * wysokosc);

window.addEventListener('load', start);
window.addEventListener('keyup', move);

function start(){
player.style.width = 50 + 'px';
player.style.height = 50 + 'px';
player.style.position = 'absolute';
player.style.top = 100 + 'px'
player.style.left = 100 + 'px'; 

target.style.width = 20 + 'px';
target.style.height = 20 + 'px';
target.style.position = 'absolute';
target.style.top = randomHeight + 'px';
target.style.left = randomWidth + 'px';
}

function move(e){
    switch(e.key){
        case 'ArrowUp':
            player.style.top = parseInt(player.style.top) - pozycja + 'px';
            player.style.transitionDuration = '.5s';
        break;
        case 'ArrowDown':
            player.style.top = parseInt(player.style.top) + pozycja + 'px';
            player.style.transitionDuration = '.5s';
        break;
        case 'ArrowLeft':
            player.style.left = parseInt(player.style.left) - pozycja + 'px';
            player.style.transitionDuration = '.5s';
        break;
        case 'ArrowRight': 
            player.style.left = parseInt(player.style.left) + pozycja + 'px';
            player.style.transitionDuration = '.5s';
        break;
    }
    if(player.style.left == target.style.left){
        alert('...');
    }
}

 

Comments

konsola milczy

---

W takim razie, czy funkcja move w ogóle się wykonuje? Czy możesz podać demo gry, żeby można było przetestować kod?

---

https://jsfiddle.net/4br6xwcy/

---

Tam jest inny warunek w IF, w którym dodajesz do siebie wartości. W ciągu kilku rozgrywek (które determinują położenie małego kwadratu) nie zdarzyło się, żeby przesuwanie dużego kwadratu w pobliże mniejszego spełniło ten warunek. :)

---

W jaki inny sposób to rozwiązać?

Answer 1

W komentarzach napisałeś, że wartości sprawdzane w IF są takie same i mają ten sam typ, więc warunek w Twoim kodzie powinien być spełniony - chociaż mogło by być sprawdzenie player.style.left == target.style.right (bo teraz oczekujesz, że jeden obiekt przykryje drugi, a nie że ich przeciwległe krawędzie się zetkną).

Natomiast w podlinkowanym w komentarzu demie warunek jest inny i np. mi po kilku turach gry nie udało się doprowadzić do sytuacji, gdy ten warunek został spełniony z powodu różnic w umiejscowieniu obu kwadratów względem siebie, która nie jest prawidłowo sprawdzana przez warunek. Możliwe, że za którymś razem by się udało, ale logika sprawdzania kolizji powinna działać zawsze, a nie wtedy gdy losowe rozmieszczenie obiektów na to pozwoli - chyba, że taki efekt jest pożądany w grze. :)

Jeśli chodzi o algorytmy do obsługi logiki kolizji, to możesz je znaleźć w internecie, np.: https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection