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>