API tools faq
paste
Advertisement
ipsBruno

(Javascript) Queda-Livre em Canvas!

ipsBruno
Feb 11th, 2014
240
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 1.62 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. *  Simples simulação de queda livre
  3. *  O corpo acelerá conforme a gravidade instruída, até chegar no chão!
  4. *  [email protected]
  5. */
  6.  
  7. <canvas style="background-color:black" id='canvas' width=800 height=600></canvas>
  8.  
  9. <script>
  10.     cnv = document.getElementById('canvas').getContext('2d')
  11.  
  12.     cnv.fillStyle="white"
  13.  
  14.     // representar o tamanho máximo da tela onde movimenta os quadrados
  15.  
  16.     var w = 800
  17.  
  18.     var h = 600
  19.  
  20.     // tempo para cada frame
  21.     var t = 15;
  22.  
  23.     // Aqui cria as arrays que irão armazenar a posição dos quadrados (importante)
  24.     var y = new Array(100, 0);
  25.  
  26.     // Aqui representará a velocidade dos nossos quadrados
  27.     dy = 1
  28.  
  29.     // aceleração da gravidade ao segundo
  30.     g = 10;
  31.  
  32.  
  33.     // Chamar função recursiva que vai executar o movimento dos quadrados
  34.     executarMovimento()
  35.  
  36.  
  37.  
  38.     // Criando a função
  39.  
  40.     function executarMovimento() {
  41.  
  42.         // Deletar os quadrados já criados
  43.  
  44.         cnv.clearRect(0,0,w,h)
  45.  
  46.        
  47.         // Verificar se o quadrado e sua posição ultrapassaram o limite da área do canvas, representado por H
  48.         // ou seja, checar se o objeto chegou ao chão!
  49.  
  50.         if(y[1] + dy + 25 > h) {
  51.  
  52.             // caso passou, parar o movimento
  53.             dy = 0;
  54.        
  55.         }
  56.  
  57.  
  58.         // adicionar a aceleração. No caso é gravidade / 1000 (1 segundo em miléssimos) multiplicado por T. Número de quadros ao segundo!
  59.         dy += g / 1000 * t;
  60.  
  61.         // Adicionar nova coordenada conforme a velocidade
  62.         y[1] += dy  
  63.  
  64.         // Desenhar o quadrado de 25x25    
  65.         cnv.fillRect(20, y[1], 25, 25)
  66.        
  67.  
  68.         // Chamar novamente a função para executar o próximo movimento      
  69.         setTimeout(executarMovimento, t)
  70.  
  71.       }
  72.  
  73. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!