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
speed
valeNaN
porquemakeNewPosition()
no funciona correctamente. Voy a depurar el motivo por el que ocurre eso.