<div id="player" class="circleBase "></div>
<div class="saida circleBase" id="saida1" title="saida 1"></div>
<div class="bouncer circleBase" id="bouncer1" title="bouncer 1"></div>
<div class="bouncer circleBase" id="bouncer2" title="bouncer 2"></div>
<div class="bouncer circleBase" id="bouncer3" title="bouncer 3"></div>
<div class="bouncer circleBase" id="bouncer4" title="bouncer 4"></div>
<div class="bouncer circleBase" id="bouncer5" title="bouncer 5"></div>
<div class="bouncer circleBase" id="bouncer6" title="bouncer 6"></div>
<div class="bouncer circleBase" id="bouncer7" title="bouncer 7"></div>
<div class="bouncer circleBase" id="bouncer8" title="bouncer 8"></div>
</div>
background: rgb(77, 75, 75);
}
#player {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
position: relative;
left: 0;
top: 0;
}
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}
#sistema {
width: 50px;
height: 50px;
position: relative;
background: red;
border: 3px solid #000;
left: 0;
top: 0;
}
#container{
position:absolute;
margin: 10px;
width:1325px;
height:610px;
border: 3px solid #000;
background-color: springgreen;
}
.bouncer{
position:absolute;
width: 50px;
height: 50px;
background: red;
border: 3px solid #000;
left: 0;
top: 0;
}
.saida{
position:absolute;
width: 50px;
height: 50px;
background: rgb(112, 203, 219);
border: 3px solid #000;
left: 0;
top: 0;
}
{
$('.bouncer').click( function(){
alert('clicaram no: ' + $(this).attr('title'));
});
});
$(function() {
var minSpeed = .05;
var maxSpeed = .40;
var varSpeed = .005;
function startBounce(element) {
var container = element.parent();
var width = container.innerWidth() - element.outerWidth();
var height = container.innerHeight() - element.outerHeight();
var vertSpeed = ((Math.random() * (maxSpeed - minSpeed)) + minSpeed);
var horzSpeed = ((Math.random() * (maxSpeed - minSpeed)) + minSpeed);
bounce(element, vertSpeed, height, 'top');
bounce(element, horzSpeed, width, 'left');
}
function bounce(element, speed, max, dir) {
speed += ((Math.random() * varSpeed) - (varSpeed / 2));
speed = speed < minSpeed ? minSpeed : (speed > maxSpeed ? maxSpeed : speed)
var time = max / speed;
var position = element.position();
if (position[dir] < 2) {
target = max;
} else {
target = 0;
}
var style = {
queue: false
};
style[dir] = target;
element.animate(style, {
duration: time,
queue: false,
easing: "linear",
complete: function() {
bounce(element, time, max, dir);
}
});
}
startBounce($('#bouncer1'));
startBounce($('#bouncer2'));
startBounce($('#bouncer3'));
startBounce($('#bouncer4'));
startBounce($('#bouncer5'));
startBounce($('#bouncer6'));
startBounce($('#bouncer7'));
startBounce($('#bouncer8'));
startBounce($('#saida1'));
});
let player = document.querySelector('#player');
let x = 0;
let y = 0;
let velocidade = 50;
window.onkeydown = () => {
let key = event.keyCode;
let velocity = 10;
let pixel = "px";
//Detecta qual tecla do direcional do teclado foi pressionada e calcula um deslocamento absoluto
if (key == 37) x -= velocidade;
if (key == 38) y -= velocidade;
if (key == 39) x += velocidade;
if (key == 40) y += velocidade;
//Reposiciona o personagem
player.style.left = x + "px";
player.style.top = y + "px";
}