0

Eu estou desenvolvendo um jogo no qual o usuário pressiona as teclas direcionais (esquerda, cima, direita, baixo) e o personagem se move sem sair da área onde ele está ou seja vai a ver uma "colisão", mas para isso eu preciso que o <div id="player"> fique dentro da <div id="zone"> sem sair para fora dela eu "consegui" fazer isso utilizando o método getBoundingClientRect():

JS / CSS / HTML

let zone = document.querySelector("#zone");
let player = document.querySelector("#player");
let axisX = 0;
let axisY = 0;

window.addEventListener("keydown", playerMovement);

function playerMovement() {
    let key = event.keyCode;

    if (key == 37) {
        axisX -= 10;
        player.style.left = `${axisX}px`;
    }

    else if (key == 38) {
        axisY -= 10;
        player.style.top = `${axisY}px`;
    }

    else if (key == 39) {
        axisX += 10;
        player.style.left = `${axisX}px`;
    }

    else if (key == 40) {
        axisY += 10;
        player.style.top = `${axisY}px`;
    }

    if (player.getBoundingClientRect().x <= zone.getBoundingClientRect().x) {
        axisX = 0;
        player.style.left = `${axisX}px`;
    }

    else if (player.getBoundingClientRect().y <= zone.getBoundingClientRect().y) {
        axisY = 0;
        player.style.top = `${axisY}px`;
    }
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#zone {
    width: 400px;
    height: 200px;
    border: 2px solid #505050;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#player {
    width: 100px;
    height: 100px;
    background: #505050;
    position: relative;
}
<div id="zone">
    <div id="player"></div>
</div>

Mas o problema é que só funciona se o player sair para fora da zone do lado esquerdo ou do lado superior, caso o player for movimentado para a direita ou para baixo, ele acaba saindo para fora da zone e é nessa parte que eu não sei como deixá-lo dentro da zone, caso ele vá para um desses lados.

1 Resposta 1

0

Tens de saber o tamanho de player e fazer as contas, ou seja ter em conta a largura e altura para poderes saber os limites que os eixos podem ter.

Repara que pode ser boa ideia usar box-sizing: content-box; para a border não contar para os cálculos.

Simplifiquei o teu código e juntei os conceitos de limitar os maximos e minimos permitidos.

let zone = document.querySelector("#zone");
let player = document.querySelector("#player");
let axisX = 0;
let axisY = 0;

window.addEventListener("keydown", playerMovement);

function playerMovement() {
  let key = event.keyCode;

  if (key == 37) {
    axisX -= 10;
  } else if (key == 38) {
    axisY -= 10;
  } else if (key == 39) {
    axisX += 10;
  } else if (key == 40) {
    axisY += 10;
  }



  const zoneDimentions = zone.getBoundingClientRect();
  const zoneWidth = zoneDimentions.width;
  const zoneHeight = zoneDimentions.height;

  const playerDimentions = player.getBoundingClientRect();
  const playerWidth = playerDimentions.width;
  const playerHeight = playerDimentions.height;


  axisX = Math.max(0, axisX);
  axisX = Math.min(axisX, zoneWidth - playerWidth);
  axisY = Math.max(0, axisY);
  axisY = Math.min(axisY, zoneHeight - playerHeight);

  player.style.left = `${axisX}px`;
  player.style.top = `${axisY}px`;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#zone {
  width: 400px;
  height: 200px;
  border: 2px solid #505050;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: content-box;
}

#player {
  width: 100px;
  height: 100px;
  background: #505050;
  position: relative;
}
<div id="zone">
  <div id="player"></div>
</div>

1
  • 1
    Vlw! @Sergio era isso msm!
    – marquinho
    18/03/2020 às 15:05

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .