Javascript Canvas e JavaScript e Operadores de Comparação e Aritmético

Mateus Sidiney · 19 de novembro de 2020

Olá, estou cursando um curso de programação back-end, e não consegui contatar o suporte e decidi fazer a pergunta aqui no fórum, então eu não entendi porque nessa parte ele não aceita o número (no caso o resultado do cálculo). se eu colocar o resultado em vez do cálculo a bolinha desce para baixo, alguém sabe por que isso acontece? obrigado.

<html>
  <body>
    <canvas id="folha" width="600" height="500"></canvas>

    <script>
      var posicaoJogador1 = posicaoJogador2 = 40;
      var posicaoBolaX = posicaoBolaY = 10;
      var velocidadePosicaoBolaX = velocidadePosicaoBolaY = 5;
      var pontucaoJogador1 = pontucaoJogador2 = 0;

      window.onload = function(){
        setInterval(executar, 1000 / 30);

      }
      function executar() {
         var folhaDesenho = document.getElementById("folha");
         var areaDesenho = folhaDesenho.getContext("2d");

         var larguraCampo = 600;
         var alturaCampo = 500;
         var espessuraRede = 5;
         var diametroBola = 10;
         var espessuraRaquete = 11;
         var alturaRaquete = 100;
         var efeitoRaquete = 0.3;

        areaDesenho.fillStyle = "#286047"; // cor verde

        areaDesenho.fillRect(0, 0, larguraCampo, alturaCampo);

        areaDesenho.fillStyle = "#ffffff"; // cor branca

        areaDesenho.fillRect(297.5, 0, espessuraRede, alturaCampo);

        // Desenha a bola
        
        // Aqui ele desenha a bola e coloca na sua posição inicial
        areaDesenho.fillRect(posicaoBolaX - diametroBola / 2, posicaoBolaY - diametroBola / 2, diametroBola, diametroBola);

        areaDesenho.fillRect(0, posicaoJogador1, espessuraRaquete, alturaRaquete);

        areaDesenho.fillRect(larguraCampo - espessuraRaquete, posicaoJogador2, espessuraRaquete, alturaRaquete);
        
        posicaoBolaX = posicaoBolaX + velocidadePosicaoBolaX;
        posicaoBolaY = posicaoBolaY + velocidadePosicaoBolaY;

        // verifica lateral superior
        if(posicaoBolaY < 0 && velocidadePosicaoBolaY < 0){
            velocidadePosicaoBolaY = -velocidadePosicaoBolaY;
        }
        // verifica lateral inferior
        if(posicaoBolaX > alturaCampo && velocidadePosicaoBolaY > 0){
            velocidadePosicaoBolaY = -velocidadePosicaoBolaY;
        }
        // verifica se o Jogador 2 fez um ponto
        if(posicaoBolaX < 0){
            if(posicaoBolaY > posicaoJogador1 && posicaoBolaY < posicaoJogador1 + alturaRaquete){
                // Rebater a bola
                velocidadePosicaoBolaX = -velocidadePosicaoBolaX;
                var diferencaY = posicaoBolaY - (posicaoJogador1 + alturaRaquete / 2);
                velocidadePosicaoBolaY = diferencaY * efeitoRaquete;
            }else{
                pontucaoJogador2 = pontuacaoJogador2 + 1;

            }
        }

            // verifica se o jogador 1 fez ponto
            if(posicaoBolaX > larguraCampo){
                if(posicaoBolaY > posicaoJogador2 && posicaoBolaY < posicaoJogador2 + alturaRaquete){
                    // rebater a bola
                    velocidadePosicaoBolaX = -velocidadePosicaoBolaX
                    var diferencaY = posicaoBolaY - (posicaoJogador2 + alturaRaquete / 2);
                    velocidadePosicaoBolaY = diferencaY * efeitoRaquete;
                }else{
                    // pontos do jogador 1
                    pontucaoJogador1 = pontucaoJogador1 + 1;
                    // colocar a bola no centro
                }
            }
      }
    </script>
    <body>

GabrielSennaMs · 21 de novembro de 2020

@Mateus Sidiney Bom amigo eu não entendi a sua duvida, teria como esclarecer melhor a sua duvida?

Eu encontrei um problema no nome da variável


pontucaoJogador2 = pontuacaoJogador2 + 1; // pontuacaoJogador2 é invalido
pontucaoJogador2 = pontucaoJogador2 + 1; //

Uma vez eu fiz um jogo de pong usando javascript 'puro', esse projeto pode te ajudar.

https://codepen.io/morto/pen/rEqaZP?editors=1010

Mateus Sidiney · 21 de novembro de 2020

então gabriel obrigado por me responder, mas o que eu não entendo é porque tem que colocar cálculo sendo que posso colocar o valor do cálculo no caso (x) é 5 o cálculo completo com ordem de precedência, porém se eu colocar 5 em vez do cálculo em (x) a bolinha vai para baixo e não para diagonal. sobre o código muito obrigado por compartilhar mas estou no começo aprendendo javascript e tem coisas que ainda não entendo mais vou entender. é que no começo desse curso tem q ser tudo iniciante mesmo, o cálculo que eu falo é a posição (x) e (y) eu n entendo porque não funciona de colocar o resultado em vez da conta

areaDesenho.fillRect(posicaoBolaX - diametroBola / 2, posicaoBolaY - diametroBola / 2, diametroBola, diametroBola);

GabrielSennaMs · 22 de novembro de 2020

@Mateus Sidiney Bom amigo nesse caso o valor do cálculo feito para determinar a posição no eixo x e y da bola não vai ser sempre 5.

15 horas atrás, Mateus Sidiney disse:

o valor do cálculo no caso (x) é 5

O valor do raio da bola é 5 e não a posição atual dela no mapa, se você travar um eixo em 5 ela só vai se mover para um eixo.

O que você pode fazer e reduzir o cálculo colocando arbitrariamente o valor do raio da bola.

areaDesenho.fillRect(posicaoBolaX - 5, posicaoBolaY - 5, diametroBola, diametroBola);

Uma dica legal é você usar CSS para ajustar o canvas na tela, exemplo:

Spoiler


<!DOCTYPE html>
<html lang="pt_BR">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pong</title>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
                background: #272727;
                color: #eee;
                display: flex;
            }

            canvas {
                width: 100%;
                height: 100%;
                max-width: 640px;
                height: 420px;
                margin: auto;
                background: #000;
                box-shadow: 0px 0px 5px #000;
            }
        </style>
    </head>

    <body>
        <canvas id="folha" width="600" height="500"></canvas>
        <script>
            var posicaoJogador1 = posicaoJogador2 = 40;
            var posicaoBolaX = posicaoBolaY = 10;
            var velocidadePosicaoBolaX = velocidadePosicaoBolaY = 1;
            var pontucaoJogador1 = pontucaoJogador2 = 0;

            function executar()
            {
                let 
                    folhaDesenho = document.getElementById("folha"),
                    areaDesenho = folhaDesenho.getContext("2d"),
                    larguraCampo = 600,
                    alturaCampo = 500,
                    vespessuraRede = 5,
                    diametroBola = 10,
                    espessuraRaquete = 11,
                    alturaRaquete = 100,
                    vefeitoRaquete = 0.3;

                areaDesenho.fillStyle = "#286047"; // cor verde
                areaDesenho.fillRect(0, 0, larguraCampo, alturaCampo);
                areaDesenho.fillStyle = "#ffffff"; // cor branca
                areaDesenho.fillRect(297.5, 0, espessuraRaquete, alturaCampo);

                // Desenha a bola

                // Aqui ele desenha a bola e coloca na sua posição inicial
                areaDesenho.fillRect(posicaoBolaX - 5, posicaoBolaY - 5, diametroBola, diametroBola);
                areaDesenho.fillRect(0, posicaoJogador1, espessuraRaquete, alturaRaquete);
                areaDesenho.fillRect(larguraCampo - espessuraRaquete, posicaoJogador2, espessuraRaquete, alturaRaquete);

                posicaoBolaX = posicaoBolaX + velocidadePosicaoBolaX;
                posicaoBolaY = posicaoBolaY + velocidadePosicaoBolaY;

                // verifica lateral superior
                if (posicaoBolaY < 0 && velocidadePosicaoBolaY < 0)
                {
                    velocidadePosicaoBolaY = -velocidadePosicaoBolaY;
                }

                // verifica lateral inferior
                if (posicaoBolaX > alturaCampo && velocidadePosicaoBolaY > 0) 
                {
                    velocidadePosicaoBolaY = -velocidadePosicaoBolaY;
                }

                // verifica se o Jogador 2 fez um ponto
                if (posicaoBolaX < 0)
                {
                    if (posicaoBolaY > posicaoJogador1 && posicaoBolaY < posicaoJogador1 + alturaRaquete)
                    {
                        // Rebater a bola
                        velocidadePosicaoBolaX = -velocidadePosicaoBolaX;
                        let diferencaY = posicaoBolaY - (posicaoJogador1 + alturaRaquete / 2);
                        velocidadePosicaoBolaY = diferencaY * efeitoRaquete;
                    }
                    else
                    {
                        pontucaoJogador2 = pontucaoJogador2 + 1;
                    }
                }

                // verifica se o jogador 1 fez ponto
                if (posicaoBolaX > larguraCampo)
                {
                    if (posicaoBolaY > posicaoJogador2 && posicaoBolaY < posicaoJogador2 + alturaRaquete)
                    {
                        // rebater a bola
                        velocidadePosicaoBolaX = -velocidadePosicaoBolaX
                        let diferencaY = posicaoBolaY - (posicaoJogador2 + alturaRaquete / 2);
                        velocidadePosicaoBolaY = diferencaY * efeitoRaquete;
                    }
                    else
                    {
                        // pontos do jogador 1
                        pontucaoJogador1 = pontucaoJogador1 + 1;
                        // colocar a bola no centro
                    }
                }
            }

            window.onload = function ()
            {
                setInterval(executar, 1000 / 30);
            }
            
        </script>
    </body>
</html>

Mateus Sidiney · 23 de novembro de 2020

então o valor inicial do raio é 5 e não vai ser sempre 5 no caso ? acho que entendi. no código tem um looping e acabei esquecendo que ele adiciona 5 a cada looping eu acho. muito obrigado pela resposta e pelo tempo, tava com dor de cabeça com isso já.

Mateus Sidiney · 24 de novembro de 2020

errei, no caso ele adiciona 5 e retira 5 ? no caso isso seria um cálculo para ele se mover 5 pixels para X e Y ? porque no caso a variável não está dentro do looping.

Citação

posicaoBolaX = posicaoBolaX + velocidadePosicaoBolaX;
posicaoBolaY = posicaoBolaY + velocidadePosicaoBolaY;

no caso velocidadePosicaoBolaX e Y tem o valor 5 ai já posicaoBolaX e Y tem valor 5 então fica 10 ai ele retorna o looping sempre fazendo isso ? ai essa seria a movimentação do raio ? 5 pixels para X e Y ?

edit: quando eu olhava o código eu só pensava 2 coisas, estava dentro de um looping e o valor do cálculo sempre seria 5 e a movimentação seria 5 pixels, mas olhei melhor e vi que ele faz uma conta e adiciona para fazer a mesma conta para o raio da bola se mover (eu acho), eu estou certo ou falta algo ou errei em algo?