[Tutorial] Velocidade e Aceleração

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!

por klius Qua 19 Out 2011, 23:23

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

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

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.

por Conteúdo patrocinado

[Tutorial] Velocidade e Aceleração

[Tutorial] Velocidade e Aceleração

Re: [Tutorial] Velocidade e Aceleração

Re: [Tutorial] Velocidade e Aceleração

Re: [Tutorial] Velocidade e Aceleração

Re: [Tutorial] Velocidade e Aceleração