Quebra-Cabeça com Flash

Introdução

É com muita satisfação que começo a escrever para vocês

e o tema que considero muito importante e super interessante que é o desenvolvimento de jogos

utilizando o Flash, e ao longo destas colunas estaremos vendo algumas tecnicas de desenvolvimento de jogos,

fisica e matematica no desenvolvimento de jogos, IA ( Inteligencia Artificial ) etc. Como temos visto

serão muitos temas e sempre com muita prática que é o que torna o tema melhor ainda a praticidade dele.

Pré-Requisitos

Macromedia Flash 8

Conteúdo

Pessoal hoje veremos um jogo de quebra cabeça que traz interatividade e outros elementos tambem,

apesar de ser simples o código pode ser escrito de diversas formas e até mesmo o resultado final pode variar bastante,

então vamos ver o Script:

A organização da Time Line é muito importante, tanto a Time line quanto a biblioteca por que com

isso ganhamos produtividade e fascilitamos o entendimento e a reutilização do jogo ou projeto.

Na layer que está selecionado action colocaremos o código abaixo, eu comentei todas as linhas para

que saibamos a ação de cada linha de código.

stop();

//importa classe externa ( classe ‘ lmc_tween.as ‘ )
#include “lmc_tween.as”

//inicialização das variaveis
var cont1:Number = 0;
var cont2:Number = 0;
var contador:Number = 0;
var i:Number = 0;

fundo._alpha = 30;

//os Mc’s ‘alvo’ ficam invisiveis
for (var i = 0; i<12; i++) {
–this["alvo"+i]._alpha = 0;
}

//posicoes finais dos objetos
for (i=0; i<12; i++) {
–this["posFim"+i] = this["alvo"+i]._x;
–this["posFim"+i+20] = this["alvo"+i]._y;
}

//posicoes inicio dos objetos

// this["posInicio"+i] = guarda a posição inicial do Mc posição x

// this["posInicio"+i+20] = guarda a posição inicial do Mc posição y

// this["target"+i]._x = pega a posição do Mc na tela posição x

// this["target"+i]._y = pega a posição do Mc na tela posição y

for (i=0; i<12; i++) {
–this["posInicio"+i] = this["target"+i]._x;
–this["posInicio"+i+20] = this["target"+i]._y;
}

/*
** verifica em relação ao final do game
*/

function verifica() {
//se a variavél contador for igual a 12
if (contador == 12) {
–this.swapDepths(this._parent.getNextHighestDepth());
// exibe na tela o texto abaixo no campo de texto dinâmico
–text03.htmlText = “Parabens você completou o quebra cabeça!”;
//Desabilita a visibilidade das peças
for (var i = 0; i<12; i++) {
–this["target"+i]._alpha = 0;
}
// coloca visivel a imagem do quebra cabeca completo sem as ‘ bordas ‘
contorno.gotoAndPlay(2);
}
}

/*
** função que controla todo o game está é a função principal
*/

function geral() {
—for (i=0; i<12; i++) {
// ao pressionar faça
–this["target"+i].onPress = function() {
// ao clicar na peça especifica ele vai para o ‘Depth’ mais alto
–this.swapDepths(this._parent.getNextHighestDepth());
// inicializa a ação de arrastar as peças
–startDrag(this);
–};

this["target"+i].onRelease = function() {
this.swapDepths(this._parent.getNextHighestDepth());
// para a ação de arrastar a peça
stopDrag();
// Se não estiver na area correta FAÇA:
if (!this.hitTest(this._parent["alvo"+this._name.substring(6, 8)])) {
// a peça retorna a posição inicial ( usa-se a classe do laco )
// abaixo encontra-se uma explicação a cerca desta classe do laco que foi utilizada
// my_mc = ‘ colocar o seu movie clip ‘
// _x = ‘ colocar a posição x ‘
// _y = ‘ colocar a posição y ‘
// my_mc.slideTo(_x,_y);
// o resultado é que o MC vai para a posição x e y passada dando para ver o ‘trajeto’ dele no palco
this._parent["target"+this._name.substring(6, 8)].slideTo(this._parent["posInicio"+this._name.substring(6, 8)], this._parent["posInicio"+this._name.substring(6, 8)+20]);
}else{
// Se estiver na area correta FAÇA:
for (i=0; i<12; i++) {
if (this._name.substring(6, == i) {
this._parent["target"+this._name.substring(6, 8)]._x = this._parent["posFim"+this._name.substring(6, 8)];
this._parent["target"+this._name.substring(6, 8)]._y = this._parent["posFim"+this._name.substring(6, 8)+20];
// verifica acerto
verifica(contador++);
// desabilita peça
this.enabled = false;
}
}
}
};
}
}

/*
** chama as funções geral e verifica
*/

geral();
verifica();

Na segunda layer da Time Line ficam os elementos gráficos :

os Mc’s com o nome de Target eles são as peças do quebra cabeça que serão arrastadas pra

os Mc’s com o nome de Alvo.

Obs:. Quando os Mc’s Target são soltos nos Alvos errados eles retornam a pocição inicial como podemos verificar

no exemplo do jogo e no código ( AS ) comentado acima, e quando eles são soltos no Alvo correto

eles ficam na ‘posição final’ e são desabilitado ( myMc.enabled = false ) como tambem podemos verificar no AS acima.

Os Mc´s Alvo são onde os Mc´s Target deverão ser arrastados para eles.

Temos um Mc chamado contorno ele recebe uma ação de ” contorno.gotoAndPlay(2) ”

esta ação ocorre quando o jogador conclui o jogo ( o resultado é informado pela função Verifica ).

Ações do Mc contorno:

Frame 1:

Stop();

Frame 2:

play();

Frame 3:

stop();

E temos uma animação apartir do frame 2 da Time Line da imagem

em alpha 0 até ela de alpha 100 assim retirando o contorno das peças como vemos

na imagem acima.

Ressaltando novamente a importancia da organização dos Itens no Flash, abaixo se

enconta como ficou organizado a Biblioteca no flash neste projeto.

Pessoal abaixo está o jogo finalizado bom jogo :

Considerações Finais

Espero que tenham gostado por que cada vez mais iremos nos aprofundar em relação ao

mundo dos jogos ( single player e multi player ) e tambem conheceremos bastante em relação aos jogos

comerciais que estão sendo cada vez mais utilizados como forma de divulgação indireta e até mesmo direta.

Obrigado à todos e cliquem no link para baixar todos os arquivos do tutorial.

Abraço a todos e uma boa semana.

Autor: Fábio Gaudêncio – Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.