GMBR
Gostaria de reagir a esta mensagem? Crie uma conta em poucos cliques ou inicie sessão para continuar.
Entrar

Esqueci-me da senha

Últimos assuntos
» Preciso de ajuda
por AftonDuGrau Dom 21 Abr 2024, 20:18

» Como faz o evento drawn GUI, não se repetir?
por aminaro Sex 19 Abr 2024, 20:30

» Como ajustar velocidade de cada frame da animação no game maker
por Ralphed Qui 18 Abr 2024, 18:28

» PROBLEMAS COM FÍSICAS DE ÁGUA
por aminaro Ter 16 Abr 2024, 10:07

» Retorno da GMBR!!!
por Ralphed Sex 12 Abr 2024, 22:45

» JOGADOR PARANDO NO AR QUANDO ATACA
por aminaro Qua 10 Abr 2024, 13:51

» Problemas com texto interativo
por Kaaru72 Dom 07 Abr 2024, 11:31

» Erro escondido e indecifrável
por dev_gabize.azv Qui 04 Abr 2024, 10:11

» Mudar cor de apenas uma palavra
por Ralphed Sáb 30 Mar 2024, 00:39

» Procuro Programador de game maker
por Wou Sex 15 Mar 2024, 10:27

» Mod APK
por gamerainha Qua 13 Mar 2024, 06:30

» Aceito pedidos de sprites (Com exemplos meus)
por Sevilha Qua 28 Fev 2024, 12:17

» Inventário simples
por Isquilo_Roedor Qui 22 Fev 2024, 15:18

» Problemas na programaçnao de inimigo [jogo DOOM LIKE]
por Black Mirror Dom 11 Fev 2024, 13:34

» ANDROID MULTI TOUCH
por DiegoBr Dom 04 Fev 2024, 12:13

» Servidor de Discord do fórum?
por Lighter Sáb 27 Jan 2024, 17:18

» Save e Load Json
por Klinton Rodrigues Qui 25 Jan 2024, 11:12

» Colisão com mais de um objeto
por aminaro Seg 22 Jan 2024, 15:02

» Oi sou novo aqui
por Thiago Silveira Alexandre Sáb 20 Jan 2024, 20:55

» Como acessar conteudo comprado no marketplace
por macmilam Sex 19 Jan 2024, 07:42

» Devlogs em vídeos do Block Room
por Joton Seg 15 Jan 2024, 16:56

» Alguém aqui já ganha dinheiro com seus games?
por Joton Seg 15 Jan 2024, 16:49

» ACERVO GMBR MAGAZINE
por Joton Qui 11 Jan 2024, 19:21

» como aumentar o obj sem aumentar a colisão??
por GabrielXavier Qua 10 Jan 2024, 07:21

» Asteroid Core - Early Acesse Update [0.2.0.0]
por JOZ. Seg 08 Jan 2024, 14:39


[Tutorial] Velocidade e Aceleração

2 participantes

Ir para baixo

[Tutorial] Velocidade e Aceleração Empty [Tutorial] Velocidade e Aceleração

Mensagem por Petiz 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
Petiz

Data de inscrição : 17/10/2011
Reputação : 1
Número de Mensagens : 60
Prêmios : [Tutorial] Velocidade e Aceleração Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

[Tutorial] Velocidade e Aceleração Empty Re: [Tutorial] Velocidade e Aceleração

Mensagem por klius Qua 19 Out 2011, 23:23

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

Data de inscrição : 17/10/2011
Reputação : 1
Número de Mensagens : 10
Prêmios : [Tutorial] Velocidade e Aceleração Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

[Tutorial] Velocidade e Aceleração Empty Re: [Tutorial] Velocidade e Aceleração

Mensagem por Convidad 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
avatar
Convidad
Convidado


Ir para o topo Ir para baixo

[Tutorial] Velocidade e Aceleração Empty Re: [Tutorial] Velocidade e Aceleração

Mensagem por Petiz 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
Petiz

Data de inscrição : 17/10/2011
Reputação : 1
Número de Mensagens : 60
Prêmios : [Tutorial] Velocidade e Aceleração Empty

Medalhas x 0 Tutoriais x 0 Moedas x 0

Ouro x 0 Prata x 0 Bronze x 0

Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0

Ir para o topo Ir para baixo

[Tutorial] Velocidade e Aceleração Empty Re: [Tutorial] Velocidade e Aceleração

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos