[Tutorial] Começando com os Códigos.

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

[Tutorial] Começando com os Códigos.

Mensagem por Petiz em Seg 17 Out 2011, 12:52

Nome:
Começando com os Códigos.

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:

Agora iremos entrar na parte mais complicado, na parte pratica já que na aula anterior aprendemos a parte Teórica. Nesta aula aprenderemos a dar vida a uma pequena nave espacial.

Iniciando o Script:

Em todos os jogos shoot-los-up você controla um objeto - um carro, uma nave espacial, ou qualquer outra coisa. Neste exemplo, estamos usando o disco voador como eu havia citado antes.

Link para a Sprite: carlitos. blogs. sapo. pt/arquivo/super_saucer.gif (Junte o link)

Sua primeira tarefa é fazê-lo responder a eventos de teclado: dependendo da chave que está sendo pressionado, a nave vira à esquerda, direita, para cima ou para baixo, ou dispara um torpedo. Você pode usar qualquer editor de texto (Bloco de Notas mesmo) para escrever o código JavaScript, mas é provável que você cometa muitos erros desnecessariamente e resíduos de muitas horas de seu tempo.

controlador.html
Spoiler:
Código:
<html>

<head>

<title>Movendo a Espacionave</title>



<script language="JavaScript">



function moveObj(name, Xpix, Ypix)

{   

     obj = document.getElementById(name);

   

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

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

   obj.style.left = px;

   obj.style.top = py;

}



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);

}



</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>



</body>

</html>

Vamos olhar o código fonte:

Código:
<body onKeyPress="ProcessKeypress(event);">

Pressão de cada tecla é enviado para o ProcessKeypress () função para processamento posterior:

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);
}

Esta função move o disco voador esquerda quando 'a' é pressionado, quando direito 's' é pressionado, quando 'w' é pressionada ou para baixo quando 'z' é pressionado, simplesmente mudando-lo por 10 pixels na direção necessária.

Se você mantiver a tecla 'a' pressionado, o disco continua a se mover para a esquerda da tela. Note-se que o movimento não é muito bom, mas irregular.

Para mover o objeto de uma forma mais natural, precisamos adicionar aceleração na equação.

Conclusão:

Nesta segunda aula aprendemos a mover uma pequena aeronave, continue observando os tutoriais.


Última edição por Petiz em Seg 17 Out 2011, 12:55, editado 2 vez(es) (Razão : Erros no Script)

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] Começando com os Códigos.

Mensagem por Convidad em Seg 17 Out 2011, 12:58

Gostei desta aula...
bem explicada.
agora já sabemos como movimentar.
pra proxima aula seria uma boa vc colocar um código para trocar a imagens e reproduzir uma animação .
axo q uma função window.GetElementByid já resolve..
t+

Convidad
Convidado


Voltar ao Topo Ir em baixo

Re: [Tutorial] Começando com os Códigos.

Mensagem por Petiz em Seg 17 Out 2011, 13:03

Só esclarecendo futuras duvidas:

Código:
<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">

Observe o código acima, onde está "saucer.gif" mude para "super_saucer.gif" ou para a imagem que desejar. ( E para os inteligentes, lembrem-se salvem o arquivo controlador na mesma pasta do .gif ).

Gostei desta aula...
bem explicada.
agora já sabemos como movimentar.
pra proxima aula seria uma boa vc colocar um código para trocar a imagens e reproduzir uma animação .
axo q uma função window.GetElementByid já resolve..
t+

Obrigado, Talvez eu poste um tutorial sobre a função window.GetElementByid, mas a próxima aula já está programada para aprendermos como fazer está pequena aeronave atirar um torpedo.


Última edição por Petiz em Seg 17 Out 2011, 13:04, editado 1 vez(es) (Razão : Acrescentando...)

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] Começando com os Códigos.

Mensagem por Convidad em Seg 17 Out 2011, 13:08

ah,que massa...vai fika show demais esse efeito de atirar...
mas ele pra atirardeve criar um Element que se mova correto...terás que fazer um contador,eu acho...
mas este tutorial está indo bem,continua assim Happy
ps : desculpa meu primeiro post,mas falei akilo pq pensei q vc tivesse falado apenas : use o java pra criar jogo,então não me leve a mal Happy

Convidad
Convidado


Voltar ao Topo Ir em baixo

Re: [Tutorial] Começando com os Códigos.

Mensagem por Petiz em Seg 17 Out 2011, 13:11

ah,que massa...vai fika show demais esse efeito de atirar...
mas ele pra atirardeve criar um Element que se mova correto...terás que fazer um contador,eu acho...
mas este tutorial está indo bem,continua assim
ps : desculpa meu primeiro post,mas falei akilo pq pensei q vc tivesse falado apenas : use o java pra criar jogo,então não me leve a mal

Não precisa desculpar-se, breve mostrar-te-ei como atirar.

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] Começando com os Códigos.

Mensagem por Denbs em Seg 17 Out 2011, 15:24

Gostei..consegui fazer direitim,mas tem um problema(não sei se foi intencional),mas depois de um tempo as luzes da nave param de piscar..
Tomei liberdade e eu mesmo postei a imagem para ficar mais facil e tbm com o nome adequado-http://www.4shared.com/photo/NDD4F5ul/saucer.html
ps:legal o uso da mesóclise - difícil conhecer pessoas q saibam falar um bom portugues ;)

flw

Denbs

Número de Mensagens : 204
Idade : 19
Data de inscrição : 19/01/2011
Reputação : 0
Insignia 1 x 0 Insignia 2 x 0 Insignia 3 x 0
Prêmios
   : 0
   : 0
   : 0

Voltar ao Topo Ir em baixo

Re: [Tutorial] Começando com os Códigos.

Mensagem por Petiz em Seg 17 Out 2011, 16:33

Gostei..consegui fazer direitim,mas tem um problema(não sei se foi intencional),mas depois de um tempo as luzes da nave param de piscar..
Tomei liberdade e eu mesmo postei a imagem para ficar mais facil e tbm com o nome adequado-4shared.com /photo/NDD4F5ul/saucer.html
ps:legal o uso da mesóclise - difícil conhecer pessoas q saibam falar um bom portugues

As luzes da nave apagam ao longe de um tempo, pois é dá própria sequencia da imagem, exemplo ela é um .gif que eu achei na net, acho que o autor dela quis que era para-se em um especifico quadro. Obrigado! para ter um bom português basta prestar mais atenção na aula de colocação pronominal.

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] Começando com os Códigos.

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


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