Jogo de tiro

Caro amigo, Olá e bem-vindos de volta para Firewire , seu guia amigável para o excitante mundo de web-design e web soluções! Neste boletim, estamos indo para criar um jogo em flash (Balloon Shooter). É um jogo de tiro onde o jogador / utilizador tem que atirar os balões voando e ganhar os pontos. Há balões coloridos de laranja, o que dá leitor / usuário pontos de bônus extra. Player / usuário ganha 1 minuto de tempo para jogar este jogo, dentro deste período, ele / ela precisa atirar quantos balões ele / ela pode. Para cada balão perdido, pontuação separado é mantido. Clique aqui para fazer o download gratuito do Flash MX arquivo template / fonte (. fla) para combinar os passos indicados neste tutorial.

1. Criar um novo filme com dimensões de 300px. X 400px. e fps = 24 com branco a cor como cor de fundo

1. Selecione o quadro 1 em Layer 1 2. Com a ajuda de 'Texto' tipo de ferramenta "Balloon Shooter" como um título do jogo, como mostrado na imagem 




3. Aqui nós usamos 'presidente' da fonte do texto. Você pode usar qualquer outra fonte de sua escolha 4. Renomeie a camada como "Tiro ao Balão" 5. Abaixo do título do jogo digite o texto conforme mostrado na imagem

6. Criar dois balões diferentes gráficos e colocá-los como mostrado na imagem


7. Escolha Inserir> Camada para inserir uma nova camada acima da camada Balloon Shooter

8. Renomeie a camada como "Clique para Jogar '

9. Com a ajuda de 'Texto' texto tipo de ferramenta como 'Clique para jogar " abaixo o texto existente 10. Selecione o texto e escolha Inserir> Converter em símbolo . Convertê-la em um botão com o ponto central de registro selecionado e nomeá-la como "brincadeira"




11. Dê um duplo clique no botão play para ir em seu interior 12. Selecione frame 2 no longo estágio e escolha Inserir> Quadro-chave 13. Com a ajuda de "Cor de preenchimento" opção nas 'Ferramentas' painel de mudar a cor do texto de 'Red'

14. Selecione o quadro 4 em estágio Hit e escolha Inserir> Quadro

15. Renomeie a camada como 'Play Button'

16. Insira uma nova camada acima da camada botão Play e arraste -o para baixo de modo que aparece abaixo do botão Play

17. Selecione o quadro em fase de Hit e escolha Inserir> Quadro-chave

18. Desenhe um retângulo de patch como uma "área de ocorrência" do botão

19. Volte para Cena 1

20. Selecione o botão Play e escolha Janela> Ações

21. No painel Ações digite a seguinte ação

em ( release ) {
	gotoAndStop (2);
}

22. Insira uma nova camada acima Clique para Jogar camada e nomeie como "acções"

23. Selecione o quadro 1 na camada Ações e no painel Actions digite a seguinte ação

fscommand ( "showmenu" , false );

parar ();

1. Selecione o Click to Play camada e insira uma nova camada acima dela 2. Renomeie a camada como "Painel de Pontuação"




3. Selecione frame 2 na camada Painel de Pontuação e escolha Inserir> Quadro-chave

4. Criar um painel de gradiente com dimensões como 300px. X 35px. e colocá-lo na parte inferior da fase . 


5. Insira uma nova camada acima da camada Painel de Pontuação e nomeá-lo como 'scores' de

6. Selecione frame 2 na camada de Scores e escolha Inserir> Quadro-chave

7. Com a ajuda de 'Texto' ferramenta cria um dinâmico campo de texto para exibir a pontuação. No painel Propriedades manter as configurações como mostra a imagem. Na variável tipo de campo o nome da variável como 'score'




8. Do mesmo modo criar um outro campo de texto e colocá-la sobre a outra mão. Na variável tipo de campo o nome da variável como 'perdi'

9. Para entender o que esses dois pontos estão mostrando texto tipo 'hits' e 'miss' como mostrado na imagem


10. Selecione frame 2 na camada Ações e digite a seguinte ação.
parar ();

Page: 1 2 3 4 3. No Symbol Duplicate tipo "balão de bônus ' e criar uma cópia do clipe de filme balão 4. Da mesma forma duplicar o clipe de filme balão movimento e nomeá-lo como 'bônus balão movimento de clipe de filme " 5. Na Biblioteca , clique duas vezes o bônus clipe de filme balão para ir lá dentro 6. Na Camada 1 no lugar do balão existente criar uma cor diferente balão com dimensões ligeiramente maiores do que o primeiro.Aqui temos tido 33px.X50px. 7. Selecione o botão hit na camada botão fictício e torná-lo um pouco maior para corresponder ao tamanho do novo balão. 8. Selecione o botão de hit e escolha Janela> Ações 9. No painel Ações fazer apenas uma mudança de linha . No lugar do '_root.score + +' tipo '_root.score + = 5' 10. Seleccionar moldura 3 a Camada 1 e mudar a cor do balão busto 11. Na Biblioteca , clique duas vezes o balão de bônus clipe de filme movimento para ir no seu interior 12. Selecione o clipe de filme balão no frame 2 13. No painel de propriedades com a ajuda do botão Símbolo de Swap , trocar clipe de filme balão com bônus clipe de filme balão 14. Selecione bônus clipe de filme balão e escolha Janela> Ações 15. No painel Ações excluir as ações existentes e digitar as seguintes ações onClipEvent ( load ) { _root hitn = 0.; este . _alpha = 0; } onClipEvent ( enterFrame ) { este . _y - = _root speedn.; este . _rotation - = 5; se ( isto . _y <= -90) { este . _alpha = 100; } se ( este . _y <= -380 && _root . hitn == 0) { gotoAndPlay (2); _root perdido + = 1.; _root hitn = 1.; } se ( _root . _currentframe == 3) { _parent . nextFrame (); } } / / Essas ações são as mesmas que usamos para balões clipe de filme. Apenas as variáveis ​​são diferentes. 16. Volte para Cena 1 17. Insira uma nova camada acima da camada balões e nomeá-lo como "balões de bônus" 18. Selecione frame 2 e escolha Inserir> Quadro-chave 19. Escolha Janela> Biblioteca> bônus balão clipe de filme movimento 20. Arraste o balão de bônus clipe de filme movimento no palco e coloque-o abaixo da parte inferior fase em que colocaram o balão clipe de filme movimento 21. No painel de propriedades digite o nome da instância como "bonballoon ' 22. Escolha Janela> Biblioteca> clipe de filme gatilho 23. Arraste o clipe de filme gatilho no palco e colocá-lo ao lado do bônus clipe de filme balão movimento 24. Escolha Ações> Janela 25. No painel Ações digite as seguintes ações onClipEvent ( enterFrame ) { se ( _root .% n _root . intervaln == 0) { duplicateMovieClip ( "_root.bonballoon" , "bonballoons" + _root n. _root n.); setProperty ( "_root.bonballoons" + _root n. _x , aleatório (200) +50); tellTarget ( "_root.bonballoons" + _root . n) { gotoAndPlay (2); } } _root n + +.; } / / Essas ações são as mesmas que usamos para balões clipe de filme. Apenas as variáveis ​​são diferentes. 26. Escolha Controlar> Testar filme Agora você pode ver os balões voando e rosa, assim como laranja (bônus) balões voando depois de algum intervalo. Os balões cor de laranja são os balões de bônus por isso, se você atingi-los você ganha 5 pontos de bônus para cada balão laranja. Se você continuar a jogar este jogo não vai acabar. Então é preciso colocar um temporizador. Depois de certo tempo recebe mais, o jogo vai parar. 1. Escolha Inserir> Novo Símbolo 2. Em Create New Symbol tipo caixa 'relógio' e criar um clipe de filme 3. No centro do palco, crie um pequeno círculo de 27px.X 27px. com preenchimento de cor branca e contorno verde 4. Insira uma nova camada e nomeie como 'Timer' 5. Criar uma dinâmica campo de texto que pode conter dois dígitos e colocá-lo no centro do círculo 6. No painel de propriedades digite o variável nome como '_root.time' 7. Insira uma nova camada acima da camada temporizador e renomeá-lo como 'Relógio Tic' 8. Crie um pequeno ponteiro do relógio , converter -lo em um gráfico com o ponto inferior centro registro selecionado e nomeá-lo como 'ponteiro de relógio " 9. Coloque o ponteiro do relógio gráfico de tal forma que o ponto registraion do ponteiro do relógio devem coincidir com o filme clips ponto central . 10 . Selecione de 24 quadros em camada Relógio Tic e escolha Inserir> Quadro-chave 11. Selecione qualquer quadro entre 1 e 24 e escolha Inserir> Criar interpolação de movimento 12. Nas propriedades do painel conjunto opções de rotação como CW 13. Selecione de 24 quadros em outras duas camadas e escolha Inserir> Quadro 14. Insira uma nova camada acima da camada do relógio Tic e nomeá-lo como 'Ações' 15. Selecione quadro 24 e escolha Inserir> Quadro-chave 16. Em 24 Keyframe atribuir a seguinte ação _root . tempo -; / / Toda vez quando chega actionscript no quadro 24, o valor diminui 'tempo' variável em 1. Portanto, parece que contagem regressiva segundos. 17. Volte para a Cena 1 18. Insira uma nova camada acima da camada Balões Bônus e nomeá-lo como 'Relógio' 19. Selecione frame 2 na camada do relógio e escolha Inserir> Quadro-chave 20. EscolhaJanela> Biblioteca> clipe de filme relógio 21. Arraste o clipe de filme relógio no palco e colocá-lo no painel de pontuação  22. Selecione o clipe de filme relógio e escolha Janela> Ações 23. No painel Ações digite as seguintes ações onClipEvent ( enterFrame ) { se ( _root . tempo == 30) { _root speedz = 9.; _root intervaln = 30.; } se ( _root . tempo == 10) { _root intervalz = 10.; } se ( _root . tempo == 0) { _root . gotoAndStop (3); } } / / se ( _root . tempo == 30) { _root speedz = 9.; _root intervaln = 30.; } Esta condição verifica se o valor da variável 'tempo' é perfeitamente igual a 30. Se a condição satisfaz então o valor da variável 'speedz' é ajustado para 9 para aumentar a velocidade dos balões e do valor da variável 'intervaln' é definido como 30 para reduzir o intervalo de tempo entre dois balões aparências de bónus. se ( _root . tempo == 10) { _root intervalz = 10.; } Esta condição verifica se o valor da variável 'tempo' é perfeitamente igual a 10. Se a condição satisfaz então o valor da variável 'intervalz' é definido como 10 para reduzir o intervalo de tempo entre duas aparições balões. se ( _root . tempo == 0) { _root . gotoAndStop (3); } Esta condição verifica se o valor da variável 'tempo' é perfeitamente igual a 10. Se a condição satisfaz então actionscript vai e parar no frame 3 em Cena 1.

1. Insira uma nova camada acima da camada do Relógio e nomeá-lo como 'Game Over'

2. Selecione o frame 3 e escolha Inserir> Quadro-chave

3. Com a ajuda de 'Texto' tipo de ferramenta 'Game Over'
4. Selecione o texto no palco, converter -lo em um Movie Clip e nomeie como ' game over '

5. Selecione o jogo sobre clipe de filme e escolha Janela> Ações

6. No painel Ações digite as seguintes ações

onClipEvent ( load ) {
	Rato . mostra ();
}

7. Abaixo o jogo sobre clipe de filme tipo de texto como " Você marcou: ' e 'Você perdeu: " uma abaixo de outro
8. Criar duas dinâmicas campos de texto para mostrar as pontuações finais 
9. Selecione o dinâmico campo de texto para "Você marcou ' e no painel de Propriedades tipo variável nome como 'score' 10. Da mesma forma, selecione dinâmico campo de texto para "Você Perdeu" e nopainel de Propriedades tipo variável nome como 'perdi' 


Quando o jogo é longo, não deve ser uma opção para o usuário jogá-lo novamente. Então, precisamos criar um botão 'Play Again'.
11. Insira uma nova camada acima de Game Over camada e nomeie como 'Play Again'

12. Selecione o frame 3 e escolha Inserir> Quadro-chave

13. Com a ajuda de 'Texto' tipo de ferramenta 'Play Again' abaixo das pontuações finais

14. Selecione o texto, converter -lo em um botão e nomeie como "jogar novamente"

15. Clique duas vezes o jogo novamente o botão para ir em seu interior 16. Selecione frame 2 no longo estágio e escolha Inserir> Quadro-chave 17. Com a ajuda de "Cor de preenchimento" opção nas'Ferramentas' painel de mudar a cor do texto de 'Red' 18. Selecione o quadro 4 em Hit palco e escolha Inserir> Quadro 19. Renomeie a camada como "Play Again Button ' 20. Insira uma nova camada acima Jogar Novamente camada botão e arraste -lo para baixo para que ele aparece abaixo do botão Play Again 21. Selecione o quadro no 'Hit' palco e escolha Inserir> Quadro-chave 22. Desenhe um retângulo de patchcomo uma "área de ocorrência" do botão 23. Volte para Cena 1 24. Selecione o jogo novamente o botão no palco e escolha Janela> Ações 25. No painel Ações digite a seguinte ação

em ( release ) {
	gotoAndStop (2);
}

26. Selecione o frame 3 em camada Ações e escolha Inserir> Quadro-chave

27. Selecione 3 keyframe e atribuir a seguinte ação a ele
parar ();
28. Escolha Controlar> Testar filme
Comece a jogar o jogo. Após 1 minuto o jogo vai acabar. Após o jogo é mais você pode ver as pontuações finais e com a ajuda de 'Play Again' botão, você pode reiniciar o jogo.
Para adicionar mais interação no jogo que pode criar um alvo arma que irá se mover com o mouse mas mouse não pode ser visto. Isso pode dar uma sensação como se estivesse procurando o balão.


1. Escolha Inserir> Novo símbolo , crie um Movie Clip e nomeie como "alvo"

2. Criar um alvo arma de 22px. X 22px. como mostrado na imagem

3. Volte para Cena 1 4. Insira uma nova camada acima Jogar Novamente camada e nomeie como "alvo" 5. Selecione frame 2 e escolha Inserir> Quadro-chave 6. Escolha Janela> Biblioteca> clipe de filme de destino 7. Arraste o clipe de filme de destino no palco e no painel de Propriedades tipo nome da instância como "objectivo" 8. Selecione clipe de filme de destino no palco e escolha Janela> Ações 










9 . No painel Ações digite as seguintes ações

onClipEvent ( load ) {
	Rato . esconder ();
}
onClipEvent ( enterFrame ) {
	este . _x = _root . _xmouse ;
	este . _y = _root . _ymouse ;
	este . swapDepths ( _root z 1.);
	se ( _root . _currentframe == 3) {
		removeMovieClip ( "" );
	}
}

/ / este . _x = _root . _xmouse ; 
/ / este . _y = _root . _ymouse ; 
. Essas ações ajudam o clipe de filme para arrastar com o mouse

/ / este . swapDepths ( _root z +1.); 
Esta ação determina a profundidade de o clipe de filme. 

10. Selecione o frame 3 e escolha Inserir> Quadro-chave em branco
11. Escolha Controlar> Testar filme e veja como você pode direcionar os balões
Para tornar o jogo mais interativo, podemos acrescentar um fundo para o jogo.


1. Insira uma nova camada abaixo da camada balão Shooter

2. Escolha Arquivo> Importar para importar uma imagem de fundo para o jogo 3. Aqui temos importados 'sky.jpg " como imagem de fundo 4. Renomeie a camada como "Céu"




5. Insira uma nova camada acima da camada Ações e criar uma fase esboço

Jogo Balloon Shooter está pronto. Jogue o jogo e tentar atirar como muitos balões para recolher o máximo de pontos.
Atenciosamente,

http://www.layoutgalaxy.com/html/htmnewletter47-page4.htm