Jogo - Acerte o Alvo

 

Bem, vocês sabem que o flash é uma ótima ferramenta para o desenvolvimento de jogos, neste tutorial vamos ensinar como criar um jogo simples mais interessante.

 

Um breve resumo sobre o jogo: é o seguinte teremos um alvo representado por um passaro que ficará movimentando-se aleatoriamente pelo documento, onde o nosso mouse será um clipe de filme em forma de mira que ao acertar o passaro este cai dando a impressão que você o acertou. 

 

Pré-requisitos: Conhecimentos básicos em Action Script(programação no flash).

 

1º Passo: Primeiramente crie um novo documento e altere as suas propriedades pressionando a tecla de atalho CTRL+J:

 

550 Largura(Width) x 400 Altura(Height);

Cor de fundo(background color): Preta;

Insira um quadrado usando clicando sobre ferramenta Rectangle Tool() ou pressionando a tecla de atalho (R) para ativa-lá, desenhe um retângulo sem fundo do tamanho do documento, ou seja, 550 Largura(Width) x 400 Altura(Height);

 

2º Passo: Crie um novo símbolo(new symbol) pressionando a tecla de atalho CTRL+F8 e escolha a opção clipe de filme(movie clip), insira o nome que este clipe de filme receberá na biblioteca através do campo name. Com isso copie do Word e insira no flash as cinco imagens centralizadas no centro do clipe de filme(para centralizar as imagens pressione as teclas de atalho CTRL+K selecione a imagem e escolha centralizar ao centro horizontalmente e verticalmente) localizadas abaixo, de acordo com a explicação:

 

No 1º quadro chave insira a imagem 01;

Insira um 2º quadro chave e insira neste a imagem 02;

No 3º quadro chave insira a imagem 03;

No 4º quadro chave insira a imagem 04;

 

Isto foi feito para dar a impressão de que nosso passaro está voando. Após ter efetuado a inserção das imagens nos seus respectivos quadros chaves selecione na linha de tempo o quadro de numero 7 e aperte a tecla de atalho F6 para repetir a imagem do último quadro no caso o 4º quadro chave.

 

Imagem 01	Imagem 02	Imagem 03
Imagem 04	Imagem 05

 

Clique sobre quadro chave de numero 7 e selecione imagem contida nele e pressione a tecla de atalho F8 e escolha a opção gráfico(graphic), após isso clique na linha de tempo no quadro de nº 20 e pressione a tecla de atalho F6, selecione o quadro de numero 20 e clique sobre a nossa imagem, clique sobre a ferramenta free transform tool() ou pressione a tecla de atalho (Q) para ativa-lá rotacione a imagem para que ela fique da seguinte forma:

 

 

Arraste a imagem para baixo nesta direção até o final do documento, isto vai dar a impressão de quando clicarmos sobre o alvo o mesmo é atingido e conseqüentemente caí. Para isso clique em um quadro qualquer entre o 7º e o 20º e altere a propriedade interpolação(tween) do painel propriedades para movimento.

 

Sua linha de tempo deve ficar como a imagem abaixo:

 

 

Agora vamos inserir nossas ações neste clipe de filme nos seguintes quadro chaves:

 

No primeiro quadro chave(KeyFrame) vamos inserir o seguinte código:

 

//posição aleatório no eixo x

setProperty("_root.alvo", _x, random(500));

//posição aleatório no eixo y

setProperty("_root.alvo", _y, random(400));

 

Explicação: Este código é responsável por setar a posição x e y do nosso clipe através de uma função random(), função está que dispara aleatoriamente números dentre do intervalo passado como parâmetro.

 

Insira no quadro chave(KeyFrame) de número 7 o seguinte código:

 

//posição aleatório no eixo x

setProperty("_root.alvo", _x, random(500));

//posição aleatório no eixo y

setProperty("_root.alvo", _y, random(400));

//vai para o quadro de numero 1 e executa a partir deste

gotoAndPlay(1);

 

Explicação: Este código só tem uma diferença com relação ao código anterior, que é a ação gotoAndPlay() que tem como parâmetro o quadro que a animação deve ir e continuar a execução a partir deste.

 

E para finalizar está animação insira no quadro chave de número 20 a ação:

 

//vai para o quadro de numero 1 e executa a partir deste

gotoAndPlay(1);

 

Explicação: Ao chegar no final da animação deve voltar ao seu inicio onde será disparada uma posição x e y aleatória.

 

Feito isto volte a cena principal. E pressione a tecla de atalho F11 para acessar os objetos da biblioteca e clique e arraste para o palco o clipe de filme do passaro e lhe de o nome de alvo nome este que será usado na nossa programação como mostrado no código anterior. Teste a animação através do pressionamento das teclas CTRL+ENTER e verifique se o clipe de filme alvo está se posicionando aleatoriamente na tela, caso esteja ok vamos prosseguir.

 

Agora criaremos três variáveis que serão usadas na nossa animação, com os seguintes nomes:

 

contador – armazena os pontos do usuário quando este acerta o alvo.

posx_m – armazena a coordenada x do clipe de filme da mira.

posy_m - armazena a coordenada x do clipe de filme da mira.

 

Para criar estas variáveis selecione a ferramenta text tool() ou pressione a tecla de atalho (T) para ativa-lá, feito isso desenhe no documento o comprimento de visibilidade do conteúdo de sua variável, não se esqueça de alterar a cor da variável e as suas propriedades como indicado na figura abaixo:

 

 

Crie as três variáveis com o nome indicado acima e de acordo com a figura e as alinhe de acordo com a sua preferência pelo documento.

 

3º Passo: Copie e cole do Word a seguinte imagem que será usada como mira:

 

 

Altere o seu tamanho para width(largura) = 63 e  height(altura) = 52, pressione a tecla de atalho F8 e escolha a opção clipe de filme(movie clip) para converter a imagem em um clipe filme, está imagem será a imagem que conterá o código do nosso jogo, não se esqueça de inserir o nome do nosso clipe de filme selecionando o clipe de filme da mira e pressionando as teclas de atalho CTRL+F3 para exibir o painel de propriedades se este não estiver ativo e insira o seguinte nome para o clipe de filme da mira: cursor.

 

Agora pressione a tecla de atalho F9 para exibir a área de programação e insira o seguinte código na seqüência do tutorial no clipe de filme da mira(cursor):

//ao carregar o clipe de filme

onClipEvent (load) {

//seta a variavel que armazena os pontos com zero

_root.contador = 0;

//seta a variavel que armazena a posição da mira com zero no eixo x

_root.posx_m = 0;

//seta a variavel que armazena a posição da mira com zero na eixo y

_root.posy_m = 0;

//oculta o mouse

Mouse.hide();

//delimita a area de movimento do mouse ao tamanho do documento

startDrag(this,true,0,0,490,350);

/* cria uma instancia(c) para alterar o cor da mira quando esta colidir com o passaro*/

c = new Color(this);

}

 

Explicação: Ao carregar(onClipEvent (load)) o clipe de filme da mira, a variável contador responsável por armazenar os pontos do usuário quando este acerta o passaro é inicialmente definida como zero pois o jogo começou e ele não possui nenhum acerto, as variáveis posx_m e posy_m são responsáveis por armazenar as posições x e y da nossa mira e inicialmente são definidas como zero, porque o alinhamento do nosso clipe de filme da mira deve ficar centralizado no meio do nosso documento na posição x=245.4 e y= 176.0, para que as coordenadas mostradas sejam corretas. O método startDrag(this,true,0,0,490,350) é responsável por deixar a mira como sendo o nosso cursor personalizado e ainda defini uma área de atuação da nossa mira a primeira coordenada 34 defini até onde a mira pode movimentar-se na esquerda, e a coordenada 29 defini até onde a mira pode movimentar-se na parte superior do documento, a coordenada 516 define até onde a nossa mira pode movimentar-se na direita e para finalizar a coordenada 372 define até onde a mira pode movimentar-se na parte inferior do documento. Para finalizar este trecho de código criamos uma variável com o nome de c que será uma instância da classe Color que será usada para mudarmos a cor do nosso clipe de filme da mira.

 

4º Passo: Insira o seguinte o código abaixo:

 

//ao pressionar o mouse

onClipEvent (mouseDown) {

//se a mira colidir com o alvo e o quadro atual do alvo for menor que 8

if (this.hitTest(_root.alvo) == true && _root.alvo._currentframe<8) {

//move o clipe de filme do passaro para o quadro 8 - derruba o passaro

_root.alvo.gotoAndPlay(8);

//incrementa a variável que armazena a quantidade de pontos

_root.contador += 10;

}

}

 

Explicação: Ao clicar com o mouse será detectado através da função(hitTest())que tem como parâmetro o clipe de filme do passaro(_root.alvo) se a mira representada na chamada da função através do código(this) colidiu com o clipe de filme do passaro(_root.alvo), esta função retorna verdadeiro(true) no caso da colisão ser verdadeira(true), e se o clipe de filme corrente do alvo for menor que 8 ou seja, só será constado como acerto quando atingir o passaro e este estiver batendo assas e não caindo. Se estas duas condições forem verdadeiras, o clipe de filme do passaro vai para o quadro de número oito e prossegue a animação a partir deste, o intervalo do quadro 8 até o quadro de número 20 é responsável por representar a queda do passaro. E a cada acerto nos contabilizaremos 10 pontos a mais para o usuário.

 

5º Passo: Bem vamos inserir o nosso último trecho de código do nosso jogo:

 

//Fica a todo o momento checando

onClipEvent (enterFrame) {

//pega a posição x da mira de acordo com o centro do documento

_root.posx_m = parseInt(this._x)-277;

//pega a posição y da mira de acordo com o centro do documento

_root.posy_m = 202 - parseInt(this._y);

////se a mira colidir com o alvo e o quadro atual do alvo for menor que 8

if (this.hitTest(_root.alvo) == true && _root.alvo._currentframe<8) {

//deixa a cor da mira vermelha

c.setRGB(parseInt("ff2211", 16));

} else {

//deixa a cor da mira normal

c.setRGB(006633);

}

}

 

Explicação: Este trecho de código é responsável por pegar as coordenadas x e y do nosso clipe de filme da mira através das propriedades(_x e _y) as subtrações e adições que são feitas nas coordenadas(x e y) do clipe de filme da mira são responsáveis por deixar a mira inicialmente na posição x = 0 e y = 0. A mesma condição de detecção de colisão é feita novamente só que agora com um intuito diferente que é o seguinte: quando a mira colidir com o passaro e este estiver voando a cor da mira ficará vermelha indicando colisão, caso a mira não colida com o clipe de filme do passaro esta ficará azul.

 

Se alguém estiver interessado nos arquivos executáveis é só me mandar um e-mail(fabianounipam04@yahoo.com.br) solicitando tais arquivos

ASP BÁSICO Cálculo de Frete Internacional com ASP e Access Sistema de Login com ASP 3.0 usando três camadas – Parte 1 Sistema de Login com ASP 3.0 usando três camadas – Parte 2 Sistema de Login com ASP 3.0 usando três camadas – Parte 3 Sistema de Login com ASP 3.0 usando três camadas – Parte 4 Sistema de Login com ASP 3.0 usando três camadas – Parte 5 Sistema de Login com ASP 3.0 usando três camadas – Parte 6 Sistema de Login com ASP 3.0 usando três camadas – Parte 7 Sistema de Login com ASP 3.0 usando três camadas – Parte 8 Sistema de Login com ASP 3.0 usando três camadas – Parte 9 Sistema de Login com ASP 3.0 usando três camadas – Parte 10 ASP 3.0 utilizando 3 camadas - Parte 1 ASP 3.0 utilizando 3 camadas - Parte 2 ASP 3.0 utilizando 3 camadas - Parte 3 COLDFUSION Criando um formulário em Flash usando o ColdFusion MX 7 FLASH - ACTIONSCRIPT Movimentar objeto – Parte 01 Movimentar objeto – Parte 02 Jogo – Acerte o Alvo Como Movimentar um Objeto utilizando Botões Exibir frases Aleatórias Ações Básicas do ActionScript Criando Botões com MovieClip no Flash Criando Links em Botões Flash Integrando Flash com Fireworks na Criação de Botões Interpolação Motion (Movimento) Interpolação Shape (Forma) Principais Eventos do Mouse (Flash/ActionScript) Criando Máscaras no Flash (Mask) Parte 1 Criando Máscaras no Flash (Mask) Parte 2 Galeria de Fotos Carregando Arquivos Externos (Flash e ActionScript) PHP BÁSICO Introdução ao PHP Lógica em PHP Trabalhando com Formulários HTML Utilizando Arquivos – Criando um Scrap Book Banco de Dados em Arquivos Texto PHP - Sistema de busca de preços - Parte 1 PHP - Sistema de busca de preços - Parte 2 PHP - Sistema de busca de preços - Parte 3 PHP - Sistema de busca de preços - Parte 4 PHP - Sistema de busca de preços - Parte Final Primeiros Scripts Guardando dados em memória Um pouco mais sobre variáveis Manipulando variáveis Estruturas de controle - Parte 1 Estruturas de controle - Parte 2 Estruturas de controle - Parte 3 Estruturas de controle - Parte 4 Estruturas de controle - Parte 5 Criação de Funções no PHP Funções – Um pouco mais Sobre Parâmetros - Parte 1 Funções – Um pouco mais Sobre Parâmetros - Parte 2 Funções – Alguns Truques Funções – Últimos Truques Arrays – Noções Básicas Arrays – Um pouco Mais Sobre Criação de Arrays

PHP COM BANCO DE DADOS Criando um Sistema Ficha Cadastral Clientes - Parte 1 Criando um Sistema Ficha Cadastral Clientes - Parte 2 Criando um Sistema Ficha Cadastral Clientes - Parte Final Controle Horarios Funcionários - Parte 1 Controle Horarios Funcionários - Parte 2 Controle Horarios Funcionários - Parte 3 Controle Horarios Funcionários - Parte 4 Controle Horarios Funcionários - Parte 5 Controle Horarios Funcionários - Parte 6 Controle Horarios Funcionários - Parte 7 Controle Horarios Funcionários - Parte 8 Controle Horarios Funcionários - Parte 9 Controle Horarios Funcionários - Parte 10 Controle Horarios Funcionários - Parte 11 Controle Horarios Funcionários - Parte 12 Controle Horarios Funcionários - Parte 13 - Conclusão Instalando o PHP no Windows XP Instalando o MySQL no Windows XP Sistema Controle Extintores -Parte 1 Sistema Controle Extintores -Parte 2 Sistema Controle Extintores -Parte 3 Sistema Controle Extintores -Parte 4 Sistema Controle Extintores -Parte 5 Sistema Controle Extintores -Parte - Conclusão PHP - Controle dos Correios - Parte 1 PHP - Controle dos Correios - Parte 2 PHP - Controle dos Correios - Parte 3 PHP - Controle dos Correios - Parte 4 PHP - Controle dos Correios - Parte 5 PHP - Controle dos Correios - Parte 6 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 1 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 2 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 3 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 4 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 5 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 6 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 7 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 8 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 9 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 10 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 11 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 12 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 13 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 14 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 15 Sistema Para Controle do IMC - Índice de Massa Corporal - Parte 16 JAVASCRIPT BÁSICO JavaScript Básico - Lição 1 JavaScript Básico - Lição 2 JavaScript Básico - Lição 3 JavaScript Básico - Lição 4 JavaScript Básico - Lição 5 JavaScript Básico - Lição 6 JavaScript Básico - Lição 7 JavaScript Básico - Lição 8 - Instruções If e Else JavaScript Básico - Lição 9 - Tópicos Diversos JavaScript Básico - Lição 10 - Objetos Math e Date JavaScript Básico - Lição 11 - Trabalhando com o objeto Browser JavaScript - Criando Seus Próprios Objetos JavaScript - Virtual Earth – Primeiro Passo JavaScript - Virtual Earth – Segundo Passo