Pelota y pala que rebotan
Publicado por Alejandro (14 intervenciones) el 08/09/2019 11:42:53
Habia un ejemplo de una bola rebotando dentro de un div, no recuerdo donde estaba la pagina, lo que intento conseguir es lo mismo, pero añadiendo una pala que se mueve con las teclas Z y X, una barra en la derecha para que rebote y que si llega al suelo del div salga un alert que detenga el "juego".
El style de los objetos. Barra es la que se mueve, esta en la parte de abajo del div, barra2 es una barra que no se mueve y ocupa toda la pared derecha del div.
Estas son las variables de la bola, del ejemplo que encontre en esta pagina.
Las variables para la barra.
Las funciones de la bola para que se mueva.
La funcion para mover la barra.
Y los elementos en el div
</script>
</head>
<body>
<div id="pantalla">
<img src="ball.gif" id="ball" alt="ball"/>
<img src="bar.gif" id="barra" alt="barra"/>
<img src="bar2.gif" id="barra2" alt="barra2"/>
</div>
</body>
</html>
¿Como podria conseguir la colision entre objetos? He leido que una forma de hacerlos es con position absolute en el style y calculando que la barra y la pelota tengan la misma posicion.
Intente esta funcion, por ahora no funciona.
function colbarra(ball,barra){
x=false; //Flag de solape horizontal
y=false; //Flag de solape vertical
if (ball.x1>barra.x1 && ball.x1<barra.x2 || ball.x2>barra.x1 && ball.x2<barra.x2) h=true;
if (ball.y1>barra.y1 && ball.y1<barra.y2 || ball.y2>barra.y1 && ball.y2<barra.y2) v=true;
return (x&&y); //Devolver la unión de flags. Solo será true si ambos es true
}
El style de los objetos. Barra es la que se mueve, esta en la parte de abajo del div, barra2 es una barra que no se mueve y ocupa toda la pared derecha del div.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style type="text/css">
#ball{
position:absolute;display:block;width:50px;height:"50px"
}#barra {
position:absolute;top:550px;left:50px;width: 100px;height:"25px"
}#barra2 {
position:absolute;left:890px;}#pantalla{
width:900px;height:600px;background-color:#000099;
}</style>.
Estas son las variables de la bola, del ejemplo que encontre en esta pagina.
1
2
3
4
5
6
7
<script type="text/javascript">
var y=0;var x=0;var controlY=1;var controlX=1;var velocidad=3;var intervalo=setInterval("mover()",6);
Las variables para la barra.
1
2
3
4
var derecha = false;var izquierda = false;document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
Las funciones de la bola para que se mueva.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function mover(){
if(controlY==1){
y+=velocidad;
}else{
y-=velocidad;
}if(y<=0){
controlY=1;y=0;}else if(y>=document.getElementById("pantalla").offsetHeight-50){
controlY=0;y=document.getElementById("pantalla").offsetHeight-50;
}if(controlX==1){
x+=velocidad;
}else{
x-=velocidad;
}if(x<=0){
controlX=1;x=0;}else if(x>=document.getElementById("pantalla").offsetWidth-50){
controlX=0;x=document.getElementById("pantalla").offsetWidth-50;
}document.getElementById("ball").style.left=String(x)+"px";
document.getElementById("ball").style.top=String(y)+"px";
;}La funcion para mover la barra.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function keyDownHandler(e) {
if(e.keyCode == 90) {
derecha = true; }else if(e.keyCode == 88) {
izquierda = true; }}function keyUpHandler(e) {
if(e.keyCode == 90) {
derecha = false; }else if(e.keyCode == 88) {
izquierda = false; }}window.onload=function(){document.onkeydown=desplazar};
function desplazar(objeto){
var tecla = objeto.which;
var situacionX = document.getElementById("barra").offsetLeft;
switch (tecla){
case 90 : barra.style.left = situacionX-50+"px" ; break;
case 88 : barra.style.left = situacionX+50+"px" ;break;
;};}Y los elementos en el div
</script>
</head>
<body>
<div id="pantalla">
<img src="ball.gif" id="ball" alt="ball"/>
<img src="bar.gif" id="barra" alt="barra"/>
<img src="bar2.gif" id="barra2" alt="barra2"/>
</div>
</body>
</html>
¿Como podria conseguir la colision entre objetos? He leido que una forma de hacerlos es con position absolute en el style y calculando que la barra y la pelota tengan la misma posicion.
Intente esta funcion, por ahora no funciona.
function colbarra(ball,barra){
x=false; //Flag de solape horizontal
y=false; //Flag de solape vertical
if (ball.x1>barra.x1 && ball.x1<barra.x2 || ball.x2>barra.x1 && ball.x2<barra.x2) h=true;
if (ball.y1>barra.y1 && ball.y1<barra.y2 || ball.y2>barra.y1 && ball.y2<barra.y2) v=true;
return (x&&y); //Devolver la unión de flags. Solo será true si ambos es true
}
Valora esta pregunta
0