Estoy armando un tipo de juego de practica en el que cada vez que se cada click en un boton este se mueve a otra posicion dada por cordenadas random dentro de un rango, pero se me sale de la caja. Que propiedad deberia usar para que se mantenga dentro?
function getCordenada(min, max){
let cordenada = Math.floor(Math.random()* (max-min +1)+min);
return cordenada;
}
getCordenada(-400, 400);
function mover(){
let cordenada1 = getCordenada(-100, 100);
let cordenada2 = getCordenada(-100, 100);
document.getElementById("botonaso").style.left=cordenada1 + "px";
document.getElementById("botonaso").style.top=cordenada2 + "px";
}
.caja{
background-color:green;
min-height: 505px;
min-width: 505px;
}
.boton{
height: 60px;
border-radius: 30px;
cursor: pointer;
position:relative;
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Juego AIM</title>
</head>
<body>
<h1>Juego AIM1</h1>
<div class="caja">
<button id="botonaso" class="boton" onclick="mover()">Push me</button>
</div>
</body>
</html>