Advertisement
ipsBruno

(Javascript) Queda-Livre em Canvas!

Feb 11th, 2014
208
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2. *  Simples simulação de queda livre
  3. *  O corpo acelerá conforme a gravidade instruída, até chegar no chão!
  4. *  email@brunodasilva.com
  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