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

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

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.

por Convidad 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+

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

por Convidad 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

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

por Denbs 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

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

por Conteúdo patrocinado

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

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

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

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

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

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

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

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

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