Ir para conteúdo
Fórum Script Brasil
  • 0

animação com Java e HTML5


brandol

Pergunta

tenho quefazer um canhão, que atire e sua bala descreva uma trajetória seguindo uma função, até esse ponto sem nem um problema, mas tenho que fazer somente utilizando HTML5 e JavaScript, depois de terminar de escrever o código, a trajetória não fica como uma animação, mas alguns pontos ficam marcados no canvas, fui pesquisar como fazer animações em Java e acabei me pedendo no código :mellow: alguém pode me explicar esse código e me dizer como faço o objeto do código seguir uma função.

<script>
      window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame ||
        function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
      })();

      function animate(lastTime, myRectangle) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        var linearSpeed = 100;
        // pixels / second
        var linearDistEachFrame = linearSpeed * timeDiff / 1000;
        var currentX = myRectangle.x;
        if(currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
          var newX = currentX + linearDistEachFrame;
          myRectangle.x = newX;
        }
        lastTime = time;

        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);

        // draw
        context.beginPath();
        context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);

        context.fillStyle = "#8ED6FF";
        context.fill();
        context.lineWidth = myRectangle.borderWidth;
        context.strokeStyle = "black";
        context.stroke();

        // request new frame
        requestAnimFrame(function() {
          animate(lastTime, myRectangle);
        });
      }

      window.onload = function() {
        var myRectangle = {
          x: 0,
          y: 50,
          width: 100,
          height: 50,
          borderWidth: 5
        };

        var date = new Date();
        var time = date.getTime();
        animate(time, myRectangle);
      };

    </script>

Editado por brandol
Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

Mano da uma olhada nesse site, ele ensina praticamente tudo sobre o canvas para jogos...

Canvas - Gráfico - Jogo

E na boa vei! se voce vai programar em uma linguagem saiba o nome dela!!! não é Java!! Java é diferente de Javascript, só muda o nome, nem mesmo a forma de escrever é igual. só tem esse nome por causa da empresa que o criou!

Só pra saber...

Java é server-side, se for para internet, como PHP, Perl, Python.....

Javascript é client-side.

JScript é javascript da MicroSoft.

Editado por Arash
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,1k
    • Posts
      651,8k
×
×
  • Criar Novo...