[Tutorial] Velocidade e Aceleração

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[Tutorial] Velocidade e Aceleração

Mensagem por Petiz em Seg 17 Out 2011, 20:18

Nome:
Velocidade e Aceleração

Descrição:
Continuação da aula anterior sobre como desenvolver um jogo utilizando JavaScript.

Nível de dificuldade:
Mediano.

Requerimentos:
Bloco de notas e um navegador com suporte a Javascript.

Desenvolvimento:

Introdução:

Na aula anterior nos compreendemos um pouco mais sobre JavaScript, aprendemos a desenhar em uma pagina em branco uma pequena aeronave e damo-lhe movimentos para diversas direções, nessa aula aprenderemos a manipular a aeronave e iremos fazer com ela dispare um especie de torpedo e tambem aprederemos a alternar a velocidade da aeronave.

Codificação:

parte2.html
Código:
<html>

<head>

<title>Movendo e Atirando com a Aeronave</title>



<script language="JavaScript">



step = 0;     // Current step

steps = 100; // Total number of steps to perform the effect

accel = 0.05;  // Acceleration

vX = 1;    // X velocity



function moveObj(name, Xpix, Ypix)

{   

     obj = document.getElementById(name);

   

   var px = parseInt(obj.style.left) + Xpix;      

   var py = parseInt(obj.style.top) + Ypix;

   obj.style.left = px;

   obj.style.top = py;

}



function fireTorpedo(name)

{

// Get the position of the saucer     

   var obj = document.getElementById(name);   

   var px = parseInt(obj.style.left);      

   var py = parseInt(obj.style.top);



// Fire topredo to the right of the saucer

   var t = document.getElementById("torpedo");

   t.style.left = px+95;

   t.style.top = py+38;   

   

   step = 0;

   accel = 0.05;

   vX=1;



   window.setTimeout("moveTorpedo();", 0);

}



function moveTorpedo()
{
   step++; if(step>=steps) return; // The effect has finished

   

// Move torpedo to the right by the given velocity and acceleration   

   var t = document.getElementById("torpedo");

   var px = parseInt(t.style.left);   

   vX+=parseInt(accel); // Increase velocity by the amount of acceleration

   t.style.left = px + vX;

   accel+=0.05;

   

   window.setTimeout("moveTorpedo();", 0);
}



function ProcessKeypress(e)

{

   var myObj = "saucer";

   var moveBy = 10;

   

   if (e.keyCode) keycode=e.keyCode;

   else keycode=e.which;

   ch=String.fromCharCode(keycode);

 

   if(ch=='a')       moveObj(myObj, -moveBy, 0);

   else if(ch=='s')    moveObj(myObj, moveBy, 0);

   else if(ch=='w')    moveObj(myObj, 0, -moveBy);

   else if(ch=='z')    moveObj(myObj, 0, moveBy);

   else if(ch==' ')   fireTorpedo(myObj);

}



</script>



<body onKeyPress="ProcessKeypress(event);">



<p><img id="saucer" style="z-index: 0; left: 300px; position: absolute; top: 250px"

   height=72 width=100 align=baseline border=0 hspace=0 src="saucer.gif"></p>



<img id="torpedo" style="z-index: 0; left: -100px; position: absolute; top: -100px"

src="torpedo.gif" width="12" height="12">



</body>

</html>

Note que a função ProcessKeypress () agora invoca o fireTorpedo () função quando a tecla de espaço é pressionada:

Código:
function ProcessKeypress(e)
{
      var myObj = "saucer";
      var moveBy = 10;
     
      if (e.keyCode) keycode=e.keyCode;
      else keycode=e.which;
      ch=String.fromCharCode(keycode);
   
      if(ch=='a')        moveObj(myObj, -moveBy, 0);
      else if(ch=='s')    moveObj(myObj, moveBy, 0);
      else if(ch=='w')    moveObj(myObj, 0, -moveBy);
      else if(ch=='z')    moveObj(myObj, 0, moveBy);
      else if(ch==' ')    fireTorpedo(myObj);
}

Antes de olharmos para a função fireTorpedo (), aqui está uma pequena explicação:

Velocidade é rapidez, velocidade, a rapidez do movimento. Matematicamente, é definida como a taxa de mudança da posição de um corpo em uma direção específica.

No código, podemos expressá-lo assim quando mover o objeto para a direita:

Código:
While the 's' key is pressed
    torpedo.x = torpedo.x + 5

Ou, se quisermos mover o objeto para baixo:

Enquanto a tecla 'z' é pressionada
torpedo.y = torpedo.y + 5

Aceleração é o aumento da velocidade ou velocidade.

No código, podemos expressá-lo assim quando mover o objeto para a direita:

Código:
Enquanto a tecla 's' é pressionada
    velocity = velocity + acceleration
    torpedo.x = torpedo.x + velocity

Agora estudar a fireTorpedo () e moveTorpedo () funções. Note-se que window.setTimeout () é usado para invocar moveTorpedo () recursivamente e fornecer o movimento contínuo.

Código:
function fireTorpedo(name)
{
  // Get the position of the saucer     
      var obj = document.getElementById(name);   
      var px = parseInt(obj.style.left);     
      var py = parseInt(obj.style.top);
 
  // Fire topredo to the right of the saucer
      var t = document.getElementById("torpedo");
      t.style.left = px+95;
      t.style.top = py+38;   
     
      step = 0;
      accel = 0.05;
      vX=1;
 
      window.setTimeout("moveTorpedo();", 0);
 }
 
  function moveTorpedo()
  {
      step++; if(step>=steps) return; // The effect has finished
     
  // Move torpedo to the right by the given velocity and acceleration
      var t = document.getElementById("torpedo");
      var px = parseInt(t.style.left);   
      vX+=parseInt(accel); // Increase velocity by the amount of acceleration
      t.style.left = px + vX;
      accel+=0.05;
     
      window.setTimeout("moveTorpedo();", 0);
  }

Como um exercício, modifique o código controlar o pires para incluir a aceleração.

Conclusão:


Nesta terceira aula aprendemos fazer com que a aeronave atire, na nossa próxima e ultima aula aprenderemos a adicionar gravidade e fricção. Até a proxima! ;)

Observação nas Sprites:

Código:
<img id="torpedo" style="z-index: 0; left: -100px; position: absolute; top: -100px"

src="torpedo.gif" width="12" height="12">

Observando está pequena parte do código acima pode-se alterar a imagem do torpedo por outra no caso utilizei para esta aula a imagem a-seguir:

fc00. deviantart. net/fs51/f/2009/321/4/9/Torpedo_Ted_sprite_by_Pokemon_Diamond. gif (Cole o link do seu navegador e junte-o.)

Obrigado pela sua atenção! lol!

Petiz

Número de Mensagens : 60
Data de inscrição : 17/10/2011
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [Tutorial] Velocidade e Aceleração

Mensagem por klius em Qua 19 Out 2011, 23:23

muit boa ideia. mostra uma forma de criar um jogo na web.parabems !

klius

Número de Mensagens : 10
Data de inscrição : 17/10/2011
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [Tutorial] Velocidade e Aceleração

Mensagem por Convidad em Qua 19 Out 2011, 23:27

Muito legal seu tutorial.
Bem explicado e conceituado.Mostrando todos os pontos necessários .
Continue assim e siga em frente Happy

Convidad
Convidado


Voltar ao Topo Ir em baixo

Re: [Tutorial] Velocidade e Aceleração

Mensagem por Petiz em Qui 20 Out 2011, 12:24

Obrigado pelos seus cometários, estou trabalhando em uma nova linguagem de programação. Não estou tendo tempo pra postar a ultima parte do tutorial mais quando tiver coloco aqui.

Petiz

Número de Mensagens : 60
Data de inscrição : 17/10/2011
Reputação : 1
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Voltar ao Topo Ir em baixo

Re: [Tutorial] Velocidade e Aceleração

Mensagem por Conteúdo patrocinado Hoje à(s) 16:05


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum