1

Estoy haciendo un juego simple con Javascript y HTML, y utilicé un JSFiddle, que es específicamente el que se encuentra en http://jsfiddle.net/j2PAb/

Y lo modifiqué un poco para que hiciera lo que requería, agregándole tres <div> más, bueno, el código es éste:

HTML, CSS y Javascript

$(document).ready(function () {
  var altura = $(window).height();
  var anchura = $(window).width();
  document.getElementById('container').setAttribute("style", "height:" + altura + "px; width:" + anchura + "px;");
  $('#iniciar').click(function () {
    document.getElementById('iniciar').remove();
    Iniciar();
  });     
});

function Iniciar() {
  animateDiv($('.r'));
  animateDiv($('.b'));
  animateDiv($('.g'));
  animateDiv($('.pi'));
  animateDiv($('.pu'));
  animateDiv($('.y'));

  Nuevo('r');
  Nuevo('b');
  Nuevo('g');
  Nuevo('pi');
  Nuevo('pu');
  Nuevo('y');
}

function Nuevo(name) {
  document.getElementById(''+name).remove();

  var nuevo = document.createElement('div');
  nuevo.id = '' + name;
  nuevo.className = '' + name;
  document.getElementById('container').append(nuevo);

  animateDiv($('.' + name));

  $('#' + name).click(function () {
    var audio = new Audio('img/pop.mp3');
    audio.play();
    Nuevo('' + name);
  });
}

function makeNewPosition($container) {
  // Get viewport dimensions (remove the dimension of the div)
  var h = $container.height() - 50;
  var w = $container.width() - 50;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];
}

function animateDiv($target) {
  var newq = makeNewPosition($target.parent());
  var oldq = $target.offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

  $target.animate({
    top: newq[0],
    left: newq[1]
  }, speed, function () {
    animateDiv($target);
  });
};

function calcSpeed(prev, next) {
  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);

  var greatest = x > y ? x : y;

  var speedModifier = 0.1;

  var speed = Math.ceil(greatest / speedModifier);

  return speed;
}
body {
  background-color: black;
}
#r, #b, #g, #pi, #pu, #y {
  border: 1px red solid;
}
div.r {
  width: 10%;
  height:20%;
  background-image: url(img/Red.png);
  background-size:75%;
  background-repeat:no-repeat;
  position:fixed;
}
div.b {
  width: 10%;
  height:20%;
  background-image: url(img/Blue.png);
  background-size:75%;
  background-repeat:no-repeat;
  position:fixed;
}
div.g {
  width: 10%;
  height:20%;
  background-image: url(img/Green.png);
  background-size:75%;
  background-repeat:no-repeat;
  position:fixed;
}
div.pi {
  width: 10%;
  height:20%;
  background-image: url(img/Pink.png);
  background-size:75%;
  background-repeat:no-repeat;
  position:fixed;
}
div.pu {
  width: 10%;
  height:20%;
  background-image: url(img/Purple.png);
  background-size:75%;
  background-repeat:no-repeat;
  position:fixed;
}
div.y {
  width: 10%;
  height:20%;
  background-image: url(img/Yellow.png);
  background-size:75%;
  background-repeat:no-repeat;
  position:fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script><!--<script src="Scripts/Juego.js"></script>-->
<div id="container">
  <div id="r" class='r'></div>
  <div id="b" class='b'></div>
  <div id="g" class='g'></div>
  <div id="pi" class='pi'></div>
  <div id="pu" class='pu'></div>
  <div id="y" class='y'></div>
  <div id="boton" style="text-align:right; height:auto; top:50%; position:relative; transform:translate(0,-50%); margin-right:10px;">
    <input id="iniciar" class="btn btn-success btn-lg center-block" type="button" value="Iniciar" />
  </div>
</div>

ADVERTENCIA: La ejecución de este script puede bloquear su navegador.

Bueno, al tocar un globo (las <div> son globos), me tira el error en consola de "Maximum call stack size exceeded" en la acción de animateDiv(), ¿alguna sugerencia para agilizar el código?

Muchas gracias :D

2
  • El problema que tienes es que speed vale NaN porque makeNewPosition() no funciona correctamente. Voy a depurar el motivo por el que ocurre eso. Commented el 12 may. 2017 a las 6:33
  • Ya tengo localizado el error :) ahora redacto la respuesta. Commented el 12 may. 2017 a las 6:38

1 respuesta 1

1

El problema que sufrías es debido a que speed valía NaN porque makeNewPosition() no calculaba correctamente el tamaño de un elemento padre que no existía.

Durante la ejecución de tu función Inicio() animas los elementos originales y luego llamas a Nuevo() para borrarlos con ChildNode.remove() y crearlos de nuevo y volver a animar los nuevos.

El problema radica en suponer que al eliminar un elemento éste desaparece. Sólo eliminas su relación con el padre, pero seguirá existiendo y ejecutando sus eventos mientras exista alguna referencia a él, por lo que cualquier referencia a un padre (para calcular la siguiente posición, por ejemplo) termina fallando.

He modificado tu código para que funcione agregando una función que actualiza el tamaño del contenedor y las variables que almacenan su tamaño cada vez que la ventana se redimensiona (en tu código original si maximizabas la ventana los globos seguían moviéndose únicamente por la zona inicial).

Además, he corregido el problema agregando una comprobación en la animación para pararla en caso de perder el padre.

var altura;
var anchura;
function actualizar_tamaño() {
  altura = $(window).height();
  anchura = $(window).width();
  document.getElementById('container').setAttribute("style", "height:" + altura + "px; width:" + anchura + "px;");
}
$(document).ready(function () {
  $( window ).resize(actualizar_tamaño);
  actualizar_tamaño();
  $('#iniciar').click(function () {
    document.getElementById('iniciar').remove();
    Iniciar();
  });     
});

function Iniciar() {
  animateDiv($('.r'));
  animateDiv($('.b'));
  animateDiv($('.g'));
  animateDiv($('.pi'));
  animateDiv($('.pu'));
  animateDiv($('.y'));

  Nuevo('r');
  Nuevo('b');
  Nuevo('g');
  Nuevo('pi');
  Nuevo('pu');
  Nuevo('y');
}

function Nuevo(name) {
  document.getElementById(''+name).remove();

  var nuevo = document.createElement('div');
  nuevo.id = '' + name;
  nuevo.className = '' + name;
  document.getElementById('container').append(nuevo);

  animateDiv($('.' + name));

  $('#' + name).click(function () {
    var audio = new Audio('img/pop.mp3');
    audio.play();
    Nuevo('' + name);
  });
}

function makeNewPosition() {
  // Get viewport dimensions (remove the dimension of the div)
  var h = altura - 80;
  var w = anchura - 60;

  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);

  return [nh, nw];
}

function animateDiv($target) {
  for (var i = 0; i < $target.length; i++) {
    if($target[i].isConnected == false) {
      //console.log("Fin de animación de " + $target[i].id);
      return;
    }
  }
  var newq = makeNewPosition();
  var oldq = $target.offset();
  var speed = calcSpeed([oldq.top, oldq.left], newq);

  $target.animate({
    top: newq[0],
    left: newq[1]
  }, speed, function () {
    animateDiv($target);
  });
};

function calcSpeed(prev, next) {
  var x = Math.abs(prev[1] - next[1]);
  var y = Math.abs(prev[0] - next[0]);

  var greatest = x > y ? x : y;

  var speedModifier = 0.1;

  var speed = Math.ceil(greatest / speedModifier);

  return speed;
}
body {
  background-color: black;
}
#r, #b, #g, #pi, #pu, #y {
  width: 60px;
  height: 80px;
  position: fixed;
  background-size: 100%;
  background-repeat: no-repeat;
  background-image: url(http://www.fancyicons.com/download/?id=2983&t=png&s=256);
}
div.r {
}
div.b {
  filter: hue-rotate(180deg);
}
div.g {
  filter: hue-rotate(210deg);
}
div.pi {
  filter: hue-rotate(300deg);
}
div.pu {
  filter: hue-rotate(250deg);
}
div.y {
  filter: hue-rotate(30deg);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script><!--<script src="Scripts/Juego.js"></script>-->
<div id="container">
  <div id="r" class='r'></div>
  <div id="b" class='b'></div>
  <div id="g" class='g'></div>
  <div id="pi" class='pi'></div>
  <div id="pu" class='pu'></div>
  <div id="y" class='y'></div>
  <div id="boton" style="text-align:right; height:auto; top:50%; position:relative; transform:translate(0,-50%); margin-right:10px;">
    <input id="iniciar" class="btn btn-success btn-lg center-block" type="button" value="Iniciar" />
  </div>
</div>

5
  • ¡Muchas gracias Oscar! Me sirvió mucho tu respuesta, yo pensaba que el problema residía en la llamada recursiva, jaja de nuevo, muchas gracias :D
    – OPMUANRK
    Commented el 12 may. 2017 a las 7:10
  • Lo he arreglado y explicado tu error, pero he metido la pata y probando que era eso he vuelto a colgar el navegador y perder la redacción de mi explicación x( voy a volver a redactarla :`( Commented el 12 may. 2017 a las 7:16
  • 1
    Ya está, he modificado el código de animateDiv() para dejar de animar elementos que pierdan el padre. Te agradecería un voto positivo por el tiempo invertido :) Commented el 12 may. 2017 a las 7:41
  • Muchas gracias de nuevo, Oscar, pero no puedo votar aún, jajaja, pero te marqué como respuesta correcta ;D
    – OPMUANRK
    Commented el 12 may. 2017 a las 18:24
  • 1
    De nada, ¡un placer! Al marcar mi respuesta llegaste a 15, creo que ya puedes :) enhorabuena! Commented el 12 may. 2017 a las 18:32

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.