Javascript - Столкновение со стороной игры (снизу вверх) - PullRequest
Новая
       40

Javascript - Столкновение со стороной игры (снизу вверх)

0 голосов
/ 24 мая 2018

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

Вот весь мой код, так что нет путаницы:

Редактировать: Мой код теперь полностью исправлен.Включает столкновения со всех сторон. 

var player = document.getElementById("player");
var powerup = document.getElementById("powerup");
var object = document.getElementsByClassName("object");
var player = document.getElementById("player");
for (i = 0; i < object.length; i++) {
object[i].style.top = Math.floor(Math.random() * 250/* window.innerHeight */) + 15 + "px";
object[i].style.left = Math.floor(Math.random() * 250/* window.innerWidth */) + 15 + "px";
}
setInterval(collisionDetection,1);
function collisionDetection() {
for (i = 0; i < object.length; i++) { 
// Player Right to Object Left
if (player.offsetLeft + player.offsetWidth <= object[i].offsetLeft + 1 &&
    player.offsetLeft + player.offsetWidth >= object[i].offsetLeft &&
    player.offsetTop < object[i].offsetTop + object[i].offsetHeight &&
    player.offsetHeight + player.offsetTop > object[i].offsetTop) {
player.style.left = object[i].offsetLeft - player.offsetWidth + "px";   
}
// Player Left to Object Right
if (player.offsetLeft >= object[i].offsetLeft + object[i].offsetWidth - 1 &&
    player.offsetLeft <= object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetTop < object[i].offsetTop + object[i].offsetHeight &&
    player.offsetHeight + player.offsetTop > object[i].offsetTop) {
player.style.left = object[i].offsetLeft + object[i].offsetWidth + "px";   
}
// Player Bottom to Object Top
if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetLeft + player.offsetWidth > object[i].offsetLeft &&
    player.offsetTop + player.offsetHeight >= object[i].offsetTop &&
    player.offsetTop + player.offsetHeight <= object[i].offsetTop + 1) {
player.style.top = object[i].offsetTop - player.offsetHeight + "px";   
}
// Player Top to Object Bottom
if (player.offsetLeft < object[i].offsetLeft + object[i].offsetWidth &&
    player.offsetLeft + player.offsetWidth > object[i].offsetLeft &&
    player.offsetTop <= object[i].offsetTop + object[i].offsetHeight &&
    player.offsetTop >= object[i].offsetTop + object[i].offsetHeight - 1) {
player.style.top = object[i].offsetTop + object[i].offsetHeight + "px";   
}
}
}
function move(event) {
var key = event.keyCode;
if (key == 40) {
player.style.top = player.offsetTop + 1 + "px";
}
if (key == 39) {
player.style.left = player.offsetLeft + 1 + "px";
}
if (key == 38) {
player.style.top = player.offsetTop - 1 + "px";
}
if (key == 37) {
player.style.left = player.offsetLeft - 1 + "px";
}
}
html, body {
height: 100%;
width: 100%;
margin: 0;
}
#player {
background: #000;
position: fixed;
height: 10px;
width: 10px;
left: 0px;
top: 0px;
}
#powerup {
background: blue;
position: fixed;
height: 10px;
width: 10px;
}
<body onkeydown="move(event)">
  <div id="player"></div>
  <div class="object" id="powerup"></div>
  <div class="object" id="powerup"></div>
</body>

1 Ответ

0 голосов
/ 24 мая 2018

При левом и правом столкновениях вы вычисляете новую позицию с помощью player.offsetWidth.Однако в верхнем столкновении вы используете player.Height , который не существует , вместо использования player.offsetHeight

Сравните 

player.style.left = object[i].offsetLeft - player.offsetWidth + "px";

с 

player.style.top = object[i].offsetTop - player.Height + "px";
...