1
resposta

Ajuda com colisão em Raquete

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>
1 resposta

Olá, Tudo bem?

Desculpe a demora em responder você!

O que ocorre é que o canvas utiliza um outro quadrante no sistema de coordenadas do que o p5.j. Então por isso o conflito.

Vou deixar aqui o link de um tópico de um aluno que funcionou muito bem para você comparar com seu projeto: Pong no sublime

Fico à disposição!

Um abraço e bons estudos!