Caça-Palavras

Criando um caça-palavras

Neste
artigo, iremos desenvolver um caça-palavras, utilizando também arquivos XML para que possamos criar dinamismo e facilitar a troca de palavras do jogo.

Pré-requisitos:

  • Flash 8;
  • Editor de Texto (para escrever o XML).

Ao longo deste estudo, veremos os seguintes itens que lhes auxiliarão em outras tarefas:

  • Trabalhar com duplicação de MovieClip;
  • Trabalhar com Array;
  • Trabalhar com XML;
  • Posicionamento de elementos duplicados;
  • Acesso a elementos duplicados.

Para auxiliar e facilitar o seu estudo deste artigo, estude também os artigos falando sobre XML:

Criando a interface

Nossa primeira tarefa, é desenvolver o layout do nosso jogo de caça-palavras. Fiz o meu de uma maneira bem simples, para ficar mais fácil o entendimento. Coloque o palco nas dimensões 750 x 300 (aperte CTRL + J ou vá em Modify -> Document… para alterar as dimensões do palco). Como um jogo de caça-palavras consiste em um aglomerado de quadrinhos com letras no meio, vamos fazer somente um quadrinho (MovieClip) com uma letra dentro (Dynamic Text/Texto dinâmico).

O quadro laranja (à esquerda) mostra nosso MovieClip no primeiro quadro. O quadro azul (à direita), no segundo quadro. Há três camadas: a primeira camada (de cima para baixo) é para ações. A segunda, o campo de texto dinâmico (note que não há quadros chaves). A terceira, o fundo dos quadrinhos (o primeiro quadro do MovieClip exibe o quadro normal e o segundo quadro, o estado deste selecionado). Coloque o nome de instância do texto dinâmico como letra. A única ação a ser colocada neste primeiro quadro, como mostra a figura é stop(); para que o nosso MovieClip fique parado.

Depois da edição do MovieClip, volte para a linha de tempo principal, e coloque o nome de instância de q1 (letra “q” e número 1) para o MovieClip.

Após isso, crie uma nova camada para colocarmos a lista com as palavras e outra para as ações. Deverá ficar parecido com isso:

Na camada lista palavras, iremos criar um campo de texto dinâmico, com o nome de instância palavra. Coloque-o na posição em x: 550 e y: 10.

Clique sobre este campo de texto e pressione F8 ou clique em Modify > Convert to Symbol. Depois, coloque o nome de instância deste novo MovieClip como lista_palavra.

Pronto, nossa interface está pronta. Depois se você quiser acrescentar desenhos e outras coisas fique a vontade.

Criando o XML

Iremos armazenar a lista de palavras em um arquivo XML, para ficar mais organizado e facilitar a troca de palavras. Abaixo segue um XML de exemplo:

<?xml version=”1.0″ encoding=”UTF-8″?>
<caca-palavra>
<config linhas=”10″ colunas=”17″ x=”10″ y=”10″ espaco=”2″/>
<palavras>
<palavra orientacao=”vertical” coluna=”1″ linha=”1″>MXSTUDIO</palavra>
<palavra orientacao=”horizontal” coluna=”3″ linha=”5″>FLASH</palavra>
<palavra orientacao=”diagonal_direita” coluna=”5″ linha=”2″>FIREWORKS</palavra>
<palavra orientacao=”vertical_inverso” coluna=”3″ linha=”10″>RIA</palavra>
<palavra orientacao=”vertical” coluna=”16″ linha=”2″>FORUM</palavra>
</palavras>
</caca-palavra>

As possíveis posições você pode conferir nos comentários do código de ActionScript, mais abaixo. É necessário que seja seguido esta ordem na montagem do arquivo XML, para o código abaixo o interprete corretamente. Primeiro o nó de caca-palavra, depois o config e em seguida o nó palavras que contém vários nós palavra.

O ActionScript

No quadro 1 da camada ações, coloque as ações abaixo.

/* alinhamos o stage pelo topo e esquerda */
Stage.align=”LT”;
/* colocamos o quadrinho inicial invisivel */
q1._visible=false;
/* deixa a lista de palavras invisivel */
lista_palavras._visible=false;
/* armazena as palavras */
var holder:Object = {};
/* número de tentativas do usuário */
var tentativas:Number = 0;
/* letras que irão compor o jogo */
var alfabeto:Array = (new String(‘A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,X,W,Y,Z,1,2,3,4,5,6,7,8,9,0′)).split(‘,’);
/* carrega o XML */
var doc:XML = new XML();
/* remove espaços em branco do XML */
doc.ignoreWhite=true;
/* quando carregar o XML */
doc.onLoad = function () {
/* pega o nó de configuração */
var conf:XMLNode=this.firstChild.firstChild;
/* coloca o primeiro quadrinho na posição informada em x */
q1._x = conf.attributes.x;
/* coloca o primeiro quadrinho na posição informada em y */
q1._y = conf.attributes.y;
/* pega o numero de colunas */
var cols:Number = Number(conf.attributes.colunas);
/* pega o numero de linhas */
var rows:Number = Number(conf.attributes.linhas);
/* pega o espaço entre os quadrinhos */
var espaco:Number = Number(conf.attributes.espaco);
/* calcula o total de quadrinhos a serem criados */
var total:Number = cols * rows;

// monta o caça-palavras
for(var i=0, row=0, col=0; i<total; i++) {
/* duplica o quadrinho */
var d:MovieClip = q1.duplicateMovieClip(‘itc’+col+’l'+row, i);
/* coloca na posição em X correta */
d._x = q1._x + ((d._width+espaco)*col);
/* coloca na posição em Y correta */
d._y = q1._y + ((d._height+espaco)*row);
/* coloca uma letra aleatoriamente */
d.letra.text = alfabeto[ Math.floor(Math.random()*alfabeto.length) ];
/* quando o usuário clicar na letra */
d.onRelease = function () {
/* verifica: se está no primeiro vai para o segundo, do contrário, para o primeiro */
this.gotoAndStop( this._currentframe == 1 ? 2 : 1);
/* aumenta o numero de tentativas */
tentativas++;
}
/* se chegou na ultima coluna */
if(++col == cols) {
/* vai para a proxima linha */
row++;
/* volta para a primeira coluna */
col=0;
}
}

/* pega a primeira palavra */
var pal:XMLNode = this.firstChild.lastChild.firstChild
/* para cada palavra */
for(pal, l=0; pal!=null; pal=pal.nextSibling) {
/* pega o proximo level */
var n:Number = getNextHighestDepth();
/* duplica a proxima palavra na lista */
var p:MovieClip = lista_palavras.duplicateMovieClip(‘lis’+n, n);
/* colca na linha correta */
p._y = lista_palavras._y + (p._height*(l++));
/* coloca a palavra */
p.palavra.text = pal.firstChild.toString();
/* pega a coluna que irá iniciar */
var col:Number=Number(pal.attributes.coluna)-1;
/* pega a linha que irá iniciar */
var row:Number=Number(pal.attributes.linha)-1;
/* pega a palavra */
var palavra:String = pal.firstChild.toString();
/* pega a direção para montar a palavra */
var dir:String=pal.attributes.orientacao;
/* coloca o numero de letras encontradas desta palavra */
holder[ palavra ] = 0;
/* para cada letra desta palavra */
for(var i=0; i<palavra.length; i++) {
/* pega o quadrinho relativo a esta letra */
var d:MovieClip = eval(‘itc’+col+’l'+row);
/* coloca a letra no quadrinho */
d.letra.text = palavra.substr(i, 1);
/* coloca a palavra inteira para um teste posterior dentro do quadrinho */
d.palavra = palavra;
/* quando o usuário clicar neste quadrinho */
d.onRelease = function () {
/* se for o primeiro quadro */
if(this._currentframe == 1) {
/* vai para o proximo quadro */
this.nextFrame();
/* aumenta o numero de letras desta palavra que foram encontradas */
holder[ this.palavra ]++;
/* se encontrou todas as letras desta palavra */
if(holder[ this.palavra ] == this.palavra.length) {
/* desativa os quadrinhos dela */
deactivate( this.palavra );
}
/* mas se estiver no segundo quadro */
} else {
/* vai para o primeiro quadrinho */
this.prevFrame();
/* decrementa o numero de letras encontradas */
holder[ this.palavra ]–;
}
/* aumenta o numero de tentativas */
tentativas++;
}
/* conforme a direção escolhida */
switch(dir) {
/* se foi verticalmente, vai para linha debaixo */
case “vertical”: row++; break;
/* se foi horizontal, para a coluna da direita */
case “horizontal”: col++; break;
/* para a linha de cima */
case “vertical_inverso”: row–; break;
/* para a coluna da esquerda */
case “horizontal_inverso”: col–; break;
/* para a linha de baixo e coluna da direita */
case “diagonal_direita”: row++; col++; break;
/* para a linha de cima e coluna da esquerda */
case “diagonal_direita_inverso”: row–; col–; break;
/* para a linha da baixo e coluna da esquerda */
case “diagonal_esquerda”: row++; col–; break;
/* para a linha de cima e coluna da direita */
case “diagonal_esquerda_inverso”: row–; col++; break;
}
}
}
}
/* função para desativar os quadrinhos que tem a palavra “p” como parametro */
function deactivate( p ) {
/* para cada quadrinho */
for(var i in this) {
/* se tiver a palavra a P */
if(this[i].palavra == p) {
/* remove o onRelease */
delete this[i].onRelease;
}
/* se encontra na lista */
if(this[i].palavra.text == p) {
/* acrescenta um OK */
this[i].palavra.text += ‘ – OK ‘;
}
}
}
/* carrega a lista de palavras */
doc.load(‘palavras.xml’);

Como falei anteriormente, ficou bem simples, para que fosse mais fácil o entendimento.
Lembre-se: as palavras não podem cruzar! Neste jogo, fiz para as palavras não pudessem cruzar, para ficar mais fácil o código.

Confira um exemplo do jogo funcionando!

@braços e fiquem com Deus!

Hugo Ferreira da Silva – Administrador do Portal MXSTUDIO

Qualquer dúvida, envie um e-mail para hufersil@mxstudio.com.br ou acesse nosso fórum.

Escrito por hugo on fevereiro 6, 2006. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

10 respostas a Caça-Palavras

  1. Olá, bom dia.

    Costumo usar essa atividade nos meus trabalhos, porém, não sei como ajustar um erro que ocorre no seu processo. Na verdade não é um erro, mas uma brecha. Se a pessoa marcar todos os quadrados o programa considera certo. O que gostaria que fosse implementado é que apenas quando a pessoa marcar as palavras certas possa validar, mesmo ele marcando as certas, se houver outra marcada que não seja das palavras corretas, não validaria.

  2. Olá, gostei muito do seu exemplo… porém não consegui fazer funcionar…

    Por favor, poderia me mandar um arquivo .FLA com o exemplo funcionando?

    Grato!

  3. Olá, muito legal…

    Estou testando aqui e não consigo fazer funcionar, os codigos que vc postou aqui estão corretos, é só copiar e colar mesmo?
    Abraço

  4. Poderia enviar o FLA para o preguiça aqui?

  5. por favor e mandar o fla?

    não estou entendendo uma coisa, meu jog não está marcando as palavras.

    obrigado.

  6. Olá, bom dia.
    Estou usando o seu projeto e encontrei alguns ajustes a serem feitos, como a correção do para fechar uma tag no XML e acho que as aspas simples e duplas foram modificadas por outros símbolos quando publicou aqui os códigos, então fui alterando manualmente e suprimindo os erros, mas existem dois, sendo o primeiro que corrigi, mas não sei se fiz o certo e o segundo que persiste em dar erro. Seguem:
    1º) 83. var d:MovieClip = eval(’itc’+col+’l
    Além da correção das aspas, o final não deveria estar fechando tanto a aspa simples quanto o ); ? Fiz esta modificação e passou pelo Flash. Por favor, me corrija se fiz errado.
    2º) 107. holder[ this.palavra ]–;
    É assim que usarei “holder” e o decremento é com um “-” apenas? Não está passando pelo Flash.
    Agradeço muito se me ajudar nas correções. Caso já tenha um FLA corrigido, pode mandar-me por email?

  7. descrição:
    Operator ‘-’ must be followed by an operand

    Source:
    case “vertical_inverso”: rows-–; break;

  8. tentei montar o jogo, mas não deu certo, você poderia mandar o arquivo FLA para o meu email, desde ja muito obrigado

  9. Cara, Num consigo fazer funcionar mais nem a base de reza brava.

    Será que num seria pedir muito, se vc me mandasse um .FLA???

    Vlw! To no aguardo…

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>