1
resposta

Criando Pong no sublime

Eu tô tentando criar o pong pelo sublime ao invés de usar o p5.js e agora tenho que criar a colisão com a raquete, alguma sugestão? Eis o código:

<canvas width="600" height="400"></canvas>

<script type="text/javascript">
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'black';
    pincel.fillRect(0,0,600,400);

    function desenhaCirculo(x, y) {
        pincel.fillStyle = 'white';
        pincel.beginPath();
        pincel.arc(x, y, 10, 0, 2 * Math.PI);
        pincel.fill();
    }

    function desenhaRaquete(yr){ //!!!!
        pincel.fillStyle = 'white';
        pincel.fillRect(10, yr, 11, 60);
    }

    function limpaTela(){
        pincel.clearRect(0,0,600,400);
        pincel.fillStyle = 'black';
        pincel.fillRect(0,0,600,400);
    }

    function exibeNoConsole(){
        console.log('chamada');
    }

    var x = 300;
    var y = 200;
    var cx = false;
    var cy = false;

    //var ctlx = 11;
    //var ctrly = yr;

    function atualizaTela(i, j){
        limpaTela();
        desenhaCirculo(x, y);
        /*
        if(x == ctlx && y == ctrly){
            cx = true;
            cy = true;
        } */
        x == 600 ? (cx = true) : cx;
        x == 5 ? (cx = false) : cx;
        cx == false ? x++ : x--;
        y == 400 ? (cy = true) : cy;
        y == 5 ? ( cy = false) : cy;
        cy == false ? y++ : y--;

        console.log('x = ' + x + ' y = ' + y);

        desenhaRaquete(yr);

    }

    var yr = 200;
    var taxa = 20; // velocidade da raquete

    function leDoTeclado(evento) {

        switch(evento.key){
            case 'ArrowUp':
                yr = yr - taxa;
                //y2 = y2 - taxa;
                limpaTela();
                atualizaTela(yr);
                break;
            case 'ArrowDown':
                yr = yr + taxa;
                //y2 = y2 + taxa;
                limpaTela();
                atualizaTela(yr);
                break;
        }
    }
    setInterval(atualizaTela, 5); //velocidade da bolinha

       document.onkeydown = leDoTeclado;

</script>
1 resposta

Oi, Leonam! Tudo certo?

Muito legal o desenvolvimento do seu projeto via sublime, sugiro apenas que você nomeie as variáveis de uma forma mais legível, pois isso é considerado como uma boa prática de programação.

Sobre a biblioteca, você pode fazer da mesma forma que o instrutor: consumindo a biblioteca externa ! :D Se você optar por consumir a biblioteca externa, basta mudar o local da chamada no seu sublime.

Ainda há a opção de inverter a lógica de posicionamento da função de colisão com a raquete para que ela reconheça o outro lado da tela do canva.

Fico à disposição em caso de dúvidas.

Um abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software