1

Me gustaría que me ayudaseis a detectar la colisión de la pelota con la plataforma en javascript, me está matando. Gracias.

document.addEventListener('keydown',function(evento) {
if (evento.keyCode==39) {
	if (plataforma.x<550) {
		plataforma.x+=10;
	}

}	
if (evento.keyCode==37) {
	if (plataforma.x>0) {
		plataforma.x-=10;
	}

}
});

var canvas, ctx;
function inicializar() {
	canvas=document.getElementById("canvas");
	ctx=canvas.getContext('2d');
}
var plataforma={x:250, y:280};
function dibujaPlataforma(){
	ctx.fillRect(plataforma.x,plataforma.y,150,20);
}

var ancho=700;
var alto=300;
function borrarCanvas(){
canvas.width=ancho;
canvas.height=alto;
}

var bola={x:20, y:50, xmax:700, ymax:300, xdir:'left', ydir:'down', ancho:10, velocidad:5};

function dibujaPelota(){
	ctx.fillStyle="#FF0000";
	ctx.beginPath();
	ctx.arc(bola.x,bola.y,bola.ancho,0,2*Math.PI);
	ctx.fill();
}

function pelotaRebotando() {
	if (bola.xdir=='right') {
		if (bola.x>(bola.xmax-bola.ancho-bola.velocidad)) {
			bola.xdir='left';
		}
	}else{
		if (bola.xdir=='left') {
			if (bola.x<(0+bola.ancho+bola.velocidad)) {
				bola.xdir='right';
			}
		}
	}
	if (bola.ydir=='down') {
		if (bola.y>(bola.ymax-bola.ancho-bola.velocidad)) {
			bola.ydir='up';
		}
	}else{
		if (bola.ydir=='up') {
			if (bola.y<(0+bola.ancho+bola.velocidad)) {
				bola.ydir='down';
			}
		}
		
	}
	//-------------------------------------------------------------------------------
	if (bola.xdir=='right') {
		bola.x+=bola.velocidad;
	}
	if (bola.xdir=='left') {
		bola.x-=bola.velocidad;
	}
	if (bola.ydir=='up') {
		bola.y-=bola.velocidad;
	}
	if (bola.ydir=='down') {
		bola.y+=bola.velocidad;
	}

}


//Bucle principal
setInterval(function () {
	borrarCanvas();
	dibujaPlataforma();
	dibujaPelota();
	pelotaRebotando();//Lógica Pelota
},50);
<!DOCTYPE html>
<html>
<head>
	<title>Pelota</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="main.js"></script>
</head>
<body onload="inicializar();">
<canvas id="canvas" width="700" height="300" style="border-style: solid;">
	<p>Tu navegador no es compatible con este programa, busca una versión más reciente</p>
</canvas>
</body>
</html>

2
  • 1
    Hola, creo que vas a tener que ser mas especifico sobre el problema. Es que no colisionan, o se detectan incorrectamente? o que ocurre?
    – gbianchi
    Commented el 23 ago. 2017 a las 16:48
  • Ya está solucionado chicos, gracias por vuestro interés, lo que quería era programar la colisión.
    – Roger
    Commented el 24 ago. 2017 a las 18:03

1 respuesta 1

3

Cuando la direccion de la pelota sea hacia abajo es donde tienes que checar la colicion viendo que la altura de la pelota (Y) sea la misma o mayor que la de la barra y la posicion del eje X de la pelota sea mayor igual a la de la barra y menor que el eje X de la barra mas su ancho

document.addEventListener('keydown',function(evento) {
if (evento.keyCode==39) {
	if (plataforma.x<550) {
		plataforma.x+=10;
	}

}	
if (evento.keyCode==37) {
	if (plataforma.x>0) {
		plataforma.x-=10;
	}

}
});

var canvas, ctx;
function inicializar() {
	canvas=document.getElementById("canvas");
	ctx=canvas.getContext('2d');
}
var plataforma={x:250, y:280};
function dibujaPlataforma(){
	ctx.fillRect(plataforma.x,plataforma.y,150,20);
}

var ancho=700;
var alto=300;
function borrarCanvas(){
canvas.width=ancho;
canvas.height=alto;
}

var bola={x:20, y:50, xmax:700, ymax:300, xdir:'left', ydir:'down', ancho:10, velocidad:5};

function dibujaPelota(){
	ctx.fillStyle="#FF0000";
	ctx.beginPath();
	ctx.arc(bola.x,bola.y,bola.ancho,0,2*Math.PI);
	ctx.fill();
}

function pelotaRebotando() {
	if (bola.xdir=='right') {
		if (bola.x>(bola.xmax-bola.ancho-bola.velocidad)) {
			bola.xdir='left';
		}
	}else{
		if (bola.xdir=='left') {
			if (bola.x<(0+bola.ancho+bola.velocidad)) {
				bola.xdir='right';
			}
		}
	}
	if (bola.ydir=='down') {
    //Solo para diferenciar que choco contra el borde
    if (bola.y>(bola.ymax-bola.ancho-bola.velocidad))
      console.log("perdiste");
    //---------
    
		if (bola.y>(bola.ymax-bola.ancho-bola.velocidad)  ||
         //En esta parte de la condicion checamos la colicion
        (
         //La pelota debe de estar a la misa altura o mayor a la barra
         bola.y >= plataforma.y &&
         //La pos X de la pelota debe de ser mayor o igual a la Pos X de la barra
         bola.x >= plataforma.x &&
         //Pero tambien la pos X de la pelota tiene que ser menor a la posicion X de la barra mas su ancho
         bola.x <= plataforma.x + 150
        ) 
    ) {
			bola.ydir='up';
		}
	}else{
		if (bola.ydir=='up') {
			if (bola.y<(0+bola.ancho+bola.velocidad)) {
				bola.ydir='down';
			}
		}
		
	}
	//-------------------------------------------------------------------------------
	if (bola.xdir=='right') {
		bola.x+=bola.velocidad;
	}
	if (bola.xdir=='left') {
		bola.x-=bola.velocidad;
	}
	if (bola.ydir=='up') {
		bola.y-=bola.velocidad;
	}
	if (bola.ydir=='down') {
		bola.y+=bola.velocidad;
	}

}


//Bucle principal
setInterval(function () {
	borrarCanvas();
	dibujaPlataforma();
	dibujaPelota();
	pelotaRebotando();//Lógica Pelota
},50);
<!DOCTYPE html>
<html>
<head>
	<title>Pelota</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="main.js"></script>
</head>
<body onload="inicializar();">
<canvas id="canvas" width="700" height="300" style="border-style: solid;">
	<p>Tu navegador no es compatible con este programa, busca una versión más reciente</p>
</canvas>
</body>
</html>

Te dejo un link donde explican un poco mas el algoritmo

1
  • Muchas gracias por tu aporte, aunque lo descubrí unos minutos antes de ver tu respuesta.
    – Roger
    Commented el 24 ago. 2017 a las 18:01

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