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.