MXStudio » Flash » Jogo de “Tiro ao Alvo”

Jogo de “Tiro ao Alvo”

Jogo de “Tiro ao Alvo”

Ao final deste tutorial teremos construído um jogo de tiro ao alvo como o mostrado a seguir, onde temos que acertar os logotipos voadores com cliques do mousee suas estatísticas são atualizadas em tempo real:

1.
Para facilitar nosso trabalho, preparei um arquivo fla inicial com os elementos artísticos já inseridos na Library. Assim focamos nosso tempo no que é essencial.

Download do arquivo fonte inicial

2. Após ter feito o download, descompactado o arquivo e aberto o TiroAoAlvo_Inicial.fla renomeie-o para Tiro ao Alvo.fla.

3. Crie mais duas layers e renomeie as três que tem agora como segue: AS, bg, bg_mc.

4. Clique no frame 1 da layer bg_mc e arraste uma instância do MC fundo_mc da Library para o Stage.

5.
Siga o procedimento análogo para a layer bg, arrastando uma instância do Bitmap chamado “fundo”.

6. Clique no frame 1 da layer AS e digite o seguinte código:

/*
Animação Programada
Este exemplo mostra como criar, posicionar, animar, testar acerto da figura com o mouse e deletar MCs
*/
/*
Definição das variáveis que serão usadas para estatísticas
*/
_global.acertos = 0; //Armazena a quantidade de logos atingidos
_global.erros = 0; // Armazena a quantidade de logos que “fugiram”
_global.cliques = 0; // Armazena a quantidad e cliques (acertos e erros)
_global.cProfundidade = 100;
_global.nivel = 1;
/*
Definição das variáveis (tempo de execução) que serão usadas nos cálculos
*/
var xVelocidade:Number = 3;
var larguraStage:Number = 550; //Definição da área dos cliques
var alturaStage:Number = 580; // Definição da área dos cliques
/*
Inclusão a instância do MC alvo_mc da Library no Stage.
Este clip será usado como um cursor personalizado
*/
this.attachMovie(“alvo_mc”, “alvo_mc”, 5001);
/*
Oculta o cursor do mouse
*/
Mouse.hide();
/*
Cria Listener para o Mouse
*/
var mouseListener:Object = new Object();
/*
Sempre que o cursor do mouse mover-se para fora do arquivo SWF, a posição será atualizada na instância do alvo_mc no Stage.

*/
mouseListener.onMouseMove = function() {
alvo_mc._x = _xmouse;
alvo_mc._y = _ymouse;
};
/*
Quando o botão do mouse é clicado, verificar se o cursor está fora dos limites do Stage.
Em caso positivo, incrementa o número de cliques dados
*/
mouseListener.onMouseDown = function() {
_global.cliques++;
if (fundo_mc.hitTest(_xmouse, _ymouse, false)) {
_global.acertos++;
}
};
Mouse.addListener(mouseListener);
/*
Define um TextFormat que é usado para formatar o campo estatisticas_txt.
*/
var meu_textoFormatado:TextFormat = new TextFormat();
meu_textoFormatado.bold = true;
meu_textoFormatado.font = “Arial”;
meu_textoFormatado.size = 12;
meu_textoFormatado.color = 0×000000;
/*
Cria um campo texto para mostrar as estatísticas do jogador.
*/
this.createTextField(“estatisticas_txt”, 5000, 10, 0, 530, 22);
/*
Aplica o TextFormat no campo texto.
*/
estatisticas_txt.setNewTextFormat(meu_textoFormatado);
estatisticas_txt.selectable = false;
updateStats();
/*
Inclui um evento onEnterFrame na timeline principal para que um novo logo seja constantemente gerado no jogo.
*/
this.onEnterFrame = function() {
/*
Inclui aleatoriamente um novo logo
*/
if (randRange(0, 20) == 0) {
/*
anexa uma nova instância do logo da Library no Stage e define uma profundidade única
*/
var randomLogo:Number = randRange(1, 3);
/*
Observe que o nome do MC a seguir é obtido pelo Flash através do Identifier do Linkage (clique com o botão direito
do mouse sobre o objeto na Library e escolha Linkage…)

*/
var thisMC:MovieClip = this.attachMovie(“logo”+randomLogo+”_mc”, “logoAlvo”+_global.cProfundidade+”_mc”, _global.cProfundidade);
_global.cProfundidade++;
/*
Configura a posição inicial do logoAlvo_mc à esquerda do Stage
*/
thisMC._x = -thisMC._width;
/*
Cria um número aleatório entre 80 e 100.
Será usado para o tamanho (escala) do MC atual, alpha e velocidade
que se moverá pelo Stage.
*/

var escala = randRange(80, 100);
/*
Configura as propriedades do _xescala e _yescala no MC atual.*/
*/
thisMC._xescala = escala;
thisMC._yescala = escala;
thisMC._alpha = escala;
thisMC.speed = xVelocidade+randRange(0, 3)+_global.nivel;
/*
Configura um valor aleatório para _y.
Agora, ao invés de todos os logos voarem sobre o mesmo caminho,
eles variam sua posição vertical levemente. */
*/
thisMC._y = Math.round(Math.random()*350)+65;
/*
Cria um manipulador onEnterFrame que executam algumas dúzias de vezes por segundo */
*/
thisMC.onEnterFrame = function() {
/*
Move o logo horizontalmente ao longo do Stage.
No momento todos os logos movem-se da esquerda para a direita
*/
this._x += this.speed;
/*
Decrementa levemente a posição do _y no MC atual.
Isto faz com que pareça que os logos estejam voando
levemente mais alto do que movem-se no Stage.
*/
this._y -= .4;
/*
Se a posição atual do logo é maior do que o Stage,
conta o logo como “perdido” e apaga sua instância.
*/
if (this._x>larguraStage) {
_global.erros++;
updateStats();
this.removeMovieClip();
}
};
/*
Quando o logo é pressionado, contar como um “acerto”
*/
thisMC.onPress = function() {
/*
Atualizar as estatísticas do jogador
*/
_global.acertos++;
if ((_global.acertos%40) == 0) {
_global.nivel++; // Mudança de nível
}
updateStats();
/*
Vai para o rótulo do MC chamado “hit”
(que permite você mostrar uma animação engenhosa quando a
instância é atingida.)
*/
this.gotoAndPlay(“hit”);
/*
Configura algumas variáveis locais que você usará para
animar o logo caindo pelo Stage.
*/
var ymov = this._y;
var gravity = 20;
/*
Cria um evento onEnterFrame para a instância do MC atual.
*/
this.onEnterFrame = function() {
ymov += gravity;
xmov *= 0.5;
/*
Incrementa a rotação do MC atual no sentido horário em 5 graus.
*/
this._rotation += 5;
/*
Configura as propriedades _x e _y do MC no Stage,
isto permite-nos fazer com que a queda
seja mais realista
*/
this._x += xVelocidade;
this._y = ymov;
/*
Após anular a posição _y position no Stage,
remova o MC para que suas coordenadas não sejam
continuamente calculadas */
if (this._y>alturaStage) {
this.removeMovieClip();
}
};
/*
Apagar o manipulador de evento onPress.
Isto faz com que o logo não possa ser continuamente clicado
enquanto ele está caindo pelo Stage.
*/
delete this.onPress;
};
}
};
/*
Função que atualiza as estatísticas no Stage
*/
function updateStats() {
var precisao:Number = Math.round((_global.acertos/_global.cliques)*100);
if (isNaN(precisao)) {
precisao = 0;
}
estatisticas_txt.text = “Cliques: “+_global.cliques+” “+”Acertos: “+_global.acertos+” “+”Erros: “+_global.erros+” “+”Precisão: “+precisao+”%”+” “+”Nível: “+_global.nivel;
}
/*
Função que retorna um inteiro aleatório entre dois números especificados. Isto permite que você inclua algumas diferenças sutis de tamanho e
velocidade para o MC no Stage.
*/
function randRange(minNum:Number, maxNum:Number):Number {
return (Math.floor(Math.random()*(maxNum-minNum+1))+minNum);
}

A explicação está inserida nos comentários do código.

10.
Tecle Ctrl+Enter para ver a execução do que acabamos de desenvolver.

Download do arquivo fonte final

(Fonte: Adobe/Macromedia, adaptado por Francisco Teodorico Pires de Souza)


Assine o nosso Feed
1.404 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

6 Comments to Jogo de “Tiro ao Alvo”

  1. rafael lima's Gravatar rafael lima
    Agosto 22, 2008 at 3:43 pm | Permalink

    Ola Francisco…
    mto interessante esse game que você desenvolveu…
    estava querendo saber como faço para fazer que o numero de acerto seje 100 e ele mude para outro MC ???
    teria como você me dar uma forcinha nesta parte ???

    abrass

  2. michael's Gravatar michael
    Setembro 2, 2008 at 3:37 pm | Permalink

    o meu apareço um erro na formatação de texto de cor!!
    como faço para arrumar esse problema?

  3. Rodrigo's Gravatar Rodrigo
    Setembro 7, 2008 at 1:26 pm | Permalink

    a função this.attachMovie pode ser usada para imagens?

  4. Rodrigo's Gravatar Rodrigo
    Setembro 7, 2008 at 1:28 pm | Permalink

    como eu mudo a imagem? por exemplo em vez daquele ‘xadrezinho andante’ colocar uma pomba?

  5. Ana's Gravatar Ana
    Junho 24, 2009 at 3:25 pm | Permalink

    Olá…Adorei este tutorial.

    No entanto, tenho uma dúvida…

    Não entendo para q serve o sublinhado atrás da palavra “global”.
    “_global” porquê?
    Obrigada e continue com o bom trabalho.

  6. Monique's Gravatar Monique
    Agosto 14, 2009 at 11:34 am | Permalink

    oi n ententi como e que usa esses codigos pode me ensina.obrigado

Deixe um Comentario

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

Francisco

Últimos Artigos do Autor