Estou tentando fazer o jogo pong usando um editor de texto, mas não estou conseguindo ajustar a colisão da bolinha com a raquete. A colisão com a raquete em si está ok, porém a colisão com a parede na parte acima da raquete não acontece(estou testando primeiramente a mudança de sentido no eixo X). Se alguém puder me ajudar a encontrar onde posso estar errando agradeço.
<canvas width="600" height="400"></canvas>;
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'black';
pincel.fillRect(0,0,600,400);
//variaveis bolinha.
var xBolinha = 300;
var yBolinha = 200;
var sentidoY = 1;
var sentidoX = 1;
var raio = 10;
//variaveis raquete.
var yRaquete = 150;
var xRaquete = 10;
var raqueteComprimento = 10;
var raqueteAltura = 190;
var taxaRaquete = 15;
//variaveis teclado.
var esquerda = 37;
var cima = 38;
var direita = 39;
var baixo = 40;
function desenhaCirculo(x,y,raio){
pincel.fillStyle = 'white';
pincel.beginPath();
pincel.arc(x,y,raio,0,2*Math.PI);
pincel.fill();
}
function desenhaCirculoCampo(x,y,raio){
pincel.fillStyle = 'black';
pincel.beginPath();
pincel.arc(x,y,raio,0,2*Math.PI);
pincel.fill();
}
function desenhaRaquete(x,y,comprimento,altura){
pincel.fillStyle = 'purple';
pincel.fillRect(x,y,comprimento,altura)
}
function limpaTela(){
pincel.clearRect(0,0,600,400);
}
function leDoTeclado(evento) {
if(evento.keyCode == cima) {
yRaquete = yRaquete - taxaRaquete;
} else if (evento.keyCode == baixo) {
yRaquete = yRaquete + taxaRaquete;
}
}
function verificaColisaoRaquete(){
if(xBolinha - raio < xRaquete + raqueteComprimento && yBolinha - raio < yRaquete + raqueteAltura && yBolinha + raio > yRaquete){
sentidoX *= -1;
}
}
function atualizaTela(){
limpaTela();
if(xBolinha + raio>600){
sentidoX = -1
} else if (xBolinha - raio<0){
sentidoX = 1;
}
pincel.fillStyle = 'black';
pincel.fillRect(0,0,600,400);
pincel.fillStyle = 'red';
pincel.fillRect(50,50,500,300);
desenhaCirculoCampo(300,200,50);
pincel.fillStyle = 'black';
pincel.fillRect(293,0,15,400)
desenhaCirculo(xBolinha,yBolinha,raio);
xBolinha = xBolinha + sentidoX;
if(yBolinha + raio>400){
sentidoY = -1
} else if (yBolinha - raio<0){
sentidoY = 1;
}
pincel.fillStyle = 'black';
pincel.fillRect(0,0,600,400);
pincel.fillStyle = 'red';
pincel.fillRect(50,50,500,300);
desenhaCirculoCampo(300,200,50);
pincel.fillStyle = 'black';
pincel.fillRect(293,0,15,400)
desenhaCirculo(xBolinha,yBolinha,raio);
yBolinha = yBolinha + sentidoY;
verificaColisaoRaquete();
desenhaRaquete(xRaquete,yRaquete,10,90);
}
document.onkeydown = leDoTeclado;
setInterval(atualizaTela,1);
</script>