Genexus - Jogo da Velha

Lembro de um dia, em que ainda era um estagiário aprendendo a trabalhar com o Genexus, cada um tem sua própria história de como entrou nesse "mundo" e seria muito interessante escutar a de cada um, a minha um dia ainda conto.., mas nesse dia estava ocioso no meu canto da sala e pensei, será que seria possível realizar algum jogo a partir do Genexus??

É claro que nunca pensei em um jogo tipo mario ou call of duty hehehe, mas um jogo simples tipo aqueles de tabuleiro. Então nesse tal dia tentei realizar o jogo da velha... 

Bem, no fim, tirando a parte gráfica hahaha, consegui fazer um jogo da velha a partir de uma web panel usando variáveis bitmap e eventos de clique destas. Mas o melhor desse dia é que no fim disso tudo, consegui evoluir um pouco mais nos conhecimentos que tentava absorver.

Abaixo você poder ver uma pequena demonstração do resultado deste post:

Hoje vou passar um pouco disso pra galera que esta curiosa de saber.

Paint Brush - Desenhos

Bora lá, primeiro desenhei no Paint Brush mesmo, quatro desenhos:

1. um quadrado com dimensões de 230x230px contendo o desenho clássico do jogo;
2. um xis com dimensões de 66x66px;
3. um círculo com dimensões de 66x66px;
4. e uma tela branca com as mesmas dimensões de 66x66px;

Criação de nova classe Table

Após isso, iremos no Genexus criar uma nova classe de tabela, dentro do nosso tema trabalhado. A classe que criei, a nomeei de "TableFundoJogo", e nesta nova classe foram alteradas as seguintes propriedades:

        BackgroundRepeat: no-repeat

        Height: 230px

        Width: 230px

        BackgroundImagem: Fundo230 (nome da minha imagem de fundo)

Projetando nossa Web Panel 

Agora criaremos uma nova Web Panel (figura abaixo), iremos adicionar uma tabela de 3 Rows x 3 Columns. Esta tabela conterá a classe que criamos anteriormente, ou seja, já irá buscar suas propriedades definidas.

Nesta WebPanel iremos criar 21 variáveis, estas variáveis deverão ser apresentadas em Tela, na Form do objeto. As variáveis serão:

1. Xis (Numeric(4)): placar do jogador da figura X;
2. Circulo (Numeric(4)): placar do jogador da figura O;
3. Contador (Numeric(4)): irá contar a quantidade de cliques realizados;
4. um (Bitmap): variável posicionada na primeira célula da tabela;
5. dois (Bitmap): variável posicionada na segunda célula da tabela;
6. tres (Bitmap): variável posicionada na tereira célula da tabela;
7. quatro (Bitmap): variável posicionada na quarta célula da tabela;
8. cinco (Bitmap): variável posicionada na quinta célula da tabela;
9. seis (Bitmap): variável posicionada na sexta célula da tabela;
10. sete (Bitmap): variável posicionada na sétima célula da tabela;
11. oito (Bitmap): variável posicionada na oitava célula da tabela;
12. nove (Bitmap): variável posicionada na nona célula da tabela;
13. umNome (Character(20)): irá reter o nome da imagem associada à variável um;
14. doisNome (Character(20)): irá reter o nome da imagem associada à variável dois;
15. tresNome (Character(20)): irá reter o nome da imagem associada à variável tres;
16. quatroNome (Character(20)): irá reter o nome da imagem associada à variável quatro;
17. cincoNome (Character(20)): irá reter o nome da imagem associada à variável cinco;
18. seisNome (Character(20)): irá reter o nome da imagem associada à variável seis;
19. seteNome (Character(20)): irá reter o nome da imagem associada à variável sete;
20. oitoNome (Character(20)): irá reter o nome da imagem associada à variável oito;
21. noveNome (Character(20)): irá reter o nome da imagem associada à variável nove;

Programando os Eventos

Bom, a idéia inicial é: teremos variáveis strings que irão controlar cada imagem do jogo, estão variáveis irão começar o jogo vazias, isto é sem xis e sem círculos. Por isso a quarta imagem criada no Paint (tela em branco) foi adicionada ao nosso projeto com o nome "Vazio". 

Como apenas 11 das 21 variáveis precisam ficar visíveis, as demais foram adicionadas dentro de uma outra tabela, e esta tabela nós deixamos invisível.

Event Start
//=====Inicializa variáveis nome da imagem como "Vazio"=====
&umNome = 'Vazio'
&doisNome = 'Vazio'
&tresNome = 'Vazio'
&quatroNome = 'Vazio'
&cincoNome = 'Vazio'
&seisNome = 'Vazio'
&seteNome = 'Vazio'
&oitoNome = 'Vazio'
&noveNome = 'Vazio'

//=====Inicializa contador de cliques e placar=====
&Contador = 0
&Xis = 0
&Circulo = 0

//=====Tabela com as variáveis de controle invisivel=====
TableVariaveis.Visible = 0
EndEvent

Agora, cada variável Bitmap irá conter um evento de Click. Neste evento iremos detectar se a sua variável de controle é "Vazio". Caso sim, iremos incrementar a variável de controles de cliques, e dividi-la por 2.

Se o resto desta divisão for 1, quem está clicando é o 1º jogador. Se o resto for igual a 0, quem está clicando será o segundo jogador.

Event &um.Click
//=====Se variável nao estiver definida (circulo ou xis)=====
if &umNome = 'Vazio'
//=====Controla nº de cliques=====
&Contador += 1

//=====Controla qual jogador clicou=====
if Mod(&Contador,2) = 1
&umNome = 'Xis'
else
&umNome = 'Circulo'
endif
endif
EndEvent

Bom, é no Evento Refresh que iremos utilizar o método "FromImage()", nesse caso, cada variável Bitmap esta recebendo como imagem a sua variável de controle. Esta variável de controle irá conter "Vazio" ou "Xis" ou "Circulo" (nome das variáveis adicionadas ao projeto).

Ainda neste evento, realizamos o controle de ganhador. Por exemplo, se o nome das variáveis de controle umNome, doisNome e tresNome forem iguais, algum jogador fechou a 1ª linha. Se houver ganhador a SubRotina "Fim" será realizada.

Event Refresh
//=====Define imagem para cada variável Bitmap=====
&um.FromImage(&umNome)
&dois.FromImage(&doisNome)
&tres.FromImage(&tresNome)
&quatro.FromImage(&quatroNome)
&cinco.FromImage(&cincoNome)
&seis.FromImage(&seisNome)
&sete.FromImage(&seteNome)
&oito.FromImage(&oitoNome)
&nove.FromImage(&noveNome)

//=====Controle se houve ganhador=====
do case
case &umNome <> 'Vazio' and &umNome = &doisNome and &umNome = &tresNome
&Ganhador = &umNome
do 'Fim'
case &umNome <> 'Vazio' and &umNome = &quatroNome and &umNome = &seteNome
&Ganhador = &umNome
do 'Fim'
case &umNome <> 'Vazio' and &umNome = &cincoNome and &umNome = &noveNome
&Ganhador = &umNome
do 'Fim'
case &doisNome <> 'Vazio' and &doisNome = &cincoNome and &doisNome = &oitoNome
&Ganhador = &doisNome
do 'Fim'
case &tresNome <> 'Vazio' and &tresNome = &seisNome and &tresNome = &noveNome
&Ganhador = &tresNome
do 'Fim'
case &tresNome <> 'Vazio' and &tresNome = &cincoNome and &tresNome = &seteNome
&Ganhador = &tresNome
do 'Fim'
case &quatroNome <> 'Vazio' and &quatroNome = &cincoNome and &quatroNome = &seisNome
&Ganhador = &quatroNome
do 'Fim'
case &seteNome <> 'Vazio' and &seteNome = &oitoNome and &seteNome = &noveNome
&Ganhador = &seteNome
do 'Fim'
endcase
EndEvent

Sub 'Fim'
//=====Mensagem de Fim de Jogo=====
msg('Fim de jogo, o '+&Ganhador.Trim()+' é o vencedor!')
//=====Marca Placar=====
if &Ganhador = 'Xis'
&Xis += 1
else
&Circulo += 1
endif

//=====Desabilita variáveis Bitmap=====
&um.Enabled = 0
&dois.Enabled = 0
&tres.Enabled = 0
&quatro.Enabled = 0
&cinco.Enabled = 0
&seis.Enabled = 0
&sete.Enabled = 0
&oito.Enabled = 0
&nove.Enabled = 0

EndSub

Abaixo, iremos adicionar os eventos dos botões "Novo Jogo" e "Zerar Placar":

Event 'NovoJogo'
//=====Inicializa variáveis nome da imagem como "Vazio"=====
&umNome = 'Vazio'
&doisNome = 'Vazio'
&tresNome = 'Vazio'
&quatroNome = 'Vazio'
&cincoNome = 'Vazio'
&seisNome = 'Vazio'
&seteNome = 'Vazio'
&oitoNome = 'Vazio'
&noveNome = 'Vazio'

//=====Inicializa contador de cliques e placar=====
&Contador = 0

//=====Habilita variáveis Bitmap=====
&um.Enabled = 1
&dois.Enabled = 1
&tres.Enabled = 1
&quatro.Enabled = 1
&cinco.Enabled = 1
&seis.Enabled = 1
&sete.Enabled = 1
&oito.Enabled = 1
&nove.Enabled = 1
EndEvent

Event 'ZerarPlacar'
//=====Zera variáveis do Placar=====
&Xis = 0
&Circulo = 0
EndEvent

Era isso pessoal, agora é só compilar e testar!! Abraço.