Jump to content
Fórum Script Brasil
  • 0

animação com Java e HTML5


brandol

Question

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>

Edited by brandol
Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 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.

Edited by Arash
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.5k
×
×
  • Create New...