0

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>

0

2 respuestas 2

1

Tienes que pasar siempre la posicion en positivo como ya mencionaron y tambien puedes contemplar el maximo y minimo dinamicamente.

const juegoContainer = document.querySelector('#juego');
const juegoBtn = document.querySelector('#btn');

juegoBtn.addEventListener('click', () => {
	let maxX = juegoContainer.offsetWidth - juegoBtn.offsetWidth;
  let maxY = juegoContainer.offsetHeight - juegoBtn.offsetHeight;
	let posX = Math.floor(Math.random() * maxX);
  let posY = Math.floor(Math.random() * maxY);
  juegoBtn.style.top = `${posY}px`;
  juegoBtn.style.left = `${posX}px`;
})
#juego{
  background: red;
  margin: 30px auto;
  position: relative;
  width: calc(100% - 50px);
  height: 200px;
}

#btn{
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  cursor: pointer;
}
<div id="juego">
  <span id="btn"></span>
</div>

0

Pasa siempre un valor positivo.

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .caja{
            background-color:green;
            min-height: 505px;
            width: 100%;
        }

        .boton{
            height: 60px;
            border-radius: 30px;
            cursor: pointer;
            position:relative;
        }
    </style>
    <script src="programa.js"></script>
</head>
<body>
    <h1>Juego AIM1</h1>
    <div class="caja">
      <button id="botonaso" class="boton">Push me</button>
    </div>
</body>
</html>

Y evita siempre el onclick en el elemento html. El archivo programa.js contiene lo siguiente, de esa manera no se sale.

    window.onload = function() {
        document.getElementById("botonaso").addEventListener("click", mover);
    };

    function getCordenada(min, max){
        let cordenada = Math.floor(Math.random()* (max-min +1)+min);
        return cordenada;
    } 
    function mover(){
        let cordenada1 = getCordenada(0, 200);
        console.log("Valor coordenada 1: "+cordenada1);
        let cordenada2 = getCordenada(0, 200);
        console.log("Valor coordenada 2: "+cordenada2);
        document.getElementById("botonaso").style.left=cordenada1 + "px";
        document.getElementById("botonaso").style.top=cordenada2 + "px";
    }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.