1

Construindo o Jogo da Velha no Android

Descrição da Imagem: Utilizando botões, utilizando a linguagem de

programação XML para elaborar a interface gráfica, a linguagem Java para
manipulação do evento de click nos botões e desenvolvimento de uma lógica
para o jogo, é possível desenvolver um jogo da velha para ser utilizado na
plataforma Android.
 2

Linha de Apoio ou Lead: Layout XML para desenvolvimento da interface

gráfica, arquivo de strings para armazenar os textos do aplicativo, manipulação
do arquivo AndroidManifest para deixar fixo a orientação da activity,
manipulação dos eventos de click utilizando a linguagem Java e uma boa
lógica para encontrar uma solução, portanto, utilizando conceitos simples vistos
ao longo da disciplina podemos desenvolver jogos simples para a plataforma
Android.

Neste capítulo iremos utilizar os conteúdos vistos até então, entre os

conteúdos estão: desenvolvimento de interfaces gráficas no XML, declaração
de todos os textos do aplicativo no arquivo de strings, definir a orientação fixa
de uma activity no arquivo AndroidManifest, manipulação do evento de click
utilizando a linguagem Java, além de elaborar alguns métodos e utilizar os
conhecimentos de lógica de programação para desenvolvermos o aplicativo
jogo da velha, que será o primeiro jogo que estaremos desenvolvendo para a
plataforma Android. É possível desenvolver uma série de jogos simples
utilizando a ferramenta Android Studio e os conceitos aprendidos ao longo da
disciplina.

1.1 Desenvolvendo a Interface Gráfica do Aplicativo

Começaremos criando um projeto novo no Android Studio, clique em

File, depois em New e por último em New Project, abrirá a janela mostrada na
figura 1.1, coloque o nome do aplicativo para Jogo da Velha, deixe o local
padrão para salvar o projeto, dentro da pasta AndroidStudioProjects.
 3

Figura 1.1: Janela de configuração do nome, domínio e localização do projeto.

Ao clicar em Next, outra janela será aberta para selecionar a API e a

versão mínima do sistema operacional Android que o aplicativo deve suportar,
selecione a API 14 e o Android 4.0 como versões mínimas a serem suportadas.
Ao clicar em Next, a janela para escolha de uma Activity será mostrada,
selecione o modelo de Activity chamada “Empty Activity”.

Ao clicar em Next, abrirá uma janela conforme mostrada na figura 1.2,

nela é preciso determinar o nome da classe Java para a Activity e o nome do
arquivo XML para a interface gráfica da Activity, neste exemplo colocamos o
nome JogoVelha para a classe Java e activity_jogo_velha para o arquivo XML,
caso queira, fique à vontade para colocar outro nome.
 4

Figura 1.2: Escolha do nome da classe Java e do arquivo XML para a Activity.

O primeiro passo, caso desejarmos configurar para que o aplicativo

tenha uma activity fixa em uma orientação, que não altere a orientação
conforme o usuário mexer a orientação de seu smartphone é preciso realizar
uma configuração no arquivo AndroidManifest. Para realizar esta configuração,
acesse o diretório manifests, conforme pode ser mostrado na figura 1.3.
 5

Figura 1.3: Localização do arquivo AndroidManifest dentro do projeto.

No arquivo AndroidManifest, configure a propriedade screenOrientation

para portrait, neste caso a activity abrirá sempre na orientação vertical, caso
seja configurado para landscape, a activity abrirá sempre na orientação
horizontal, é preciso configurar a orientação logo após a linha de configuração
do nome da activity, conforme pode ser visto na figura 1.4.

Figura 1.4: Determinando a orientação da activity no arquivo AndroidManifest.

 6

O próximo passo é acessar o arquivo de strings e declarar todos os

textos presentes no aplicativo, neste local. Para acessar o arquivo de strings,
vá no diretório res, após no diretório values, conforme pode ser visto na figura
1.5.

Figura 1.5: Localização do arquivo de strings dentro do projeto.

A string app_name já deve estar presente no arquivo, com o nome dado

lá na tela inicial, quando criamos o projeto, iremos criar uma string para receber
o texto “Recomeçar” com o nome “recomecar”, sempre que precisar que o texto
apareça para o usuário é preciso referenciar o texto pelo nome da string no
código-fonte do aplicativo. O código completo do arquivo de strings pode ser
visto na figura 1.6.

Figura 1.6: Código completo do arquivo de strings.

O próximo passo é montar a interface gráfica do aplicativo, para isso

acesse o arquivo XML da interface gráfica da activity, abra o diretório res, após
vá no diretório layout e você encontrará o arquivo XML, conforme pode ser
visto na figura 1.7.
 7

Figura 1.7: Localização do arquivo XML da interface gráfica da Activity.

Para montar a interface gráfica do aplicativo utilizaremos quatro

componentes LinearLayout, um LinearLayout geral que irá se referir a toda a
interface gráfica e outros três componentes LinearLayout se referindo a cada
uma das linhas da interface gráfica, mais o botão para recomeçar que como só
possui este componente na última linha não necessita de um LinearLayout.

Para o LinearLayout geral utilizaremos a propriedade para a largura

(layout_width) para todo o espaço (match_parent) e a altura (layout_heigth)
para todo o espaço (match_parent), pois estamos dizendo que a tela ocupará
todo o espaço na largura e na altura do dispositivo móvel do usuário.
Utilizaremos uma margem inferior, esquerda, direita e topo para 16dp, a tela
terá quatro divisões, quatro linhas (layout_weight) para 4 e a orientação
(orientation) para vertical, ou seja, desenvolveremos nossa interface gráfica
tendo como base a orientação vertical.

Para o LinearLayout da primeira linha da interface gráfica, utilizaremos

na largura (layout_width) para ocupar todo o espaço (match_parent), na altura
(layout_height) para somente o espaço necessário (wrap_content). A
propriedade layout_weight para 1, ou seja, irá ocupar uma divisão, uma linha
das quatro da interface gráfica, porém, agora a orientação (orientation) é
horizontal, pois queremos colocar componentes um do lado do outro e não um
embaixo do outro.
 8

Dentro do LinearLayout da primeira linha é preciso inserir três botões,

para cada botão utilizaremos a propriedade id, para inserir um nome para os
botões, utilizamos os nomes btn1, btn2 e btn3, a propriedade layout_width
(largura) para ocupar somente o espaço necessário (wrap_content) e a
propriedade layout_height (altura) para ocupar toda a altura daquela linha
(match_parent). Utilizamos também a propriedade layout_weight para o botão
ocupar na largura 0.333 de um total de 1, a propriedade textColor (cor do texto)
para preto e textSize (tamanho do texto) para 30sp.

Para a segunda e a terceira linha o código é o mesmo, mudando apenas

o nome dos botões.

Na quarta linha da interface gráfica é inserido o botão para recomeçar a

partida, o código é parecido com o código dos outros botões, a diferença é que
a propriedade layout_weight recebe o valor 1, pois ocupará toda uma divisão,
uma linha das 4 da tela, layout_width (largura) ocupará todo o espaço,
layout_height (altura) para ocupar somente o espaço necessário
(wrap_content), a propriedade text irá buscar o texto no arquivo de strings, na
tag recomecar e a propriedade textAllCaps para falso para que apenas a
primeira letra fique maiúscula e as demais minúsculas.

O código completo do arquivo XML da interface gráfica pode ser visto

nas figuras 1.8 e 1.9.
 9

Figura 1.8: Primeira parte do código do arquivo XML da interface gráfica.

 10

Figura 1.9: Segunda parte do código do arquivo XML da interface gráfica.

 11

Terminamos de montar a interface gráfica do aplicativo, na sequência

iniciaremos a desenvolver alguns métodos, toda a lógica para fazer funcionar o
nosso jogo e manipular os eventos de clicks nos botões utilizando a linguagem
Java.

1.2 Manipulando os Eventos de Click nos Botões

Para manipular os eventos de click nos botões, desenvolver métodos em

Java e montar uma lógica para fazer funcionar o aplicativo, precisamos
encontrar a classe Java que manipula os eventos da interface gráfica do
aplicativo. Conforme pode ser visto na figura 1.10, a classe Java se encontra
no diretório java, após clique no diretório que possui o mesmo nome do
domínio do projeto

Figura 1.10: Localização da classe Java para manipulação dos eventos da Activity.

As primeiras linhas do código que precisam ser desenvolvidas são as

declarações de variáveis e declaração dos objetos necessários. Declare os
nove botões do tabuleiro do jogo, o botão para recomeçar e uma variável
inteira que controlará o número de jogadas válidas que já foram realizadas no
jogo, com ela conseguimos controlar quando a partida empatou, ou seja, não
 12

existem mais botões livres para serem jogados e nenhum dos jogadores
venceu a partida. O código pode ser visto na figura 1.11.

Figura 1.11: Declaração das variáveis e objetos necessários.

Porém o botão btn1, por exemplo, declarado acima na linguagem Java

não está relacionado ao botão btn1 da interface gráfica em XML, para fazer
esse relacionamento é preciso desenvolver o código apresentado na figura
1.12, para cada elemento da interface gráfica que seja necessário manipular na
classe Java é preciso dizer que tipo de componente ele é no arquivo XML entre
parênteses, solicitar para ele encontrar no arquivo XML um componente com o
nome na propriedade id da interface gráfica que deseja relacionar.

Figura 1.12: Mapeando os objetos Java e o componente XML relacionado a cada

objeto.

Na sequência iremos desenvolver o código para manipular os eventos

de click nos botões, o código dos botões são todos muito parecidos,
basicamente alterando o número dos botões no código. O primeiro teste é
verificar se ninguém jogou naquela posição do tabuleiro, se o texto do botão
estiver vazio é porque ninguém jogou naquela posição, portanto, é uma jogada
válida, neste caso, é somada um no número de jogadas realizadas, é feito um
teste, se o número da jogada for ímpar, é colocado um “X” no texto do botão e
testado se o jogador X venceu a partida, caso o número da jogada for par, é
colocado um “O” no texto do botão e testado se o jogador O venceu a partida.
O código completo do evento de clique no botão btn1 é mostrado na figura
1.13.
 13

Figura 1.13: Código do botão btn1.

Para o evento de click no botão para recomeçar a partida, será chamado

o método recomecar(), conforme pode ser visto na figura 1.14. O código para
fazer a partida recomeçar estará presente no código do método, o método foi
criado para evitar repetir várias vezes o mesmo código, pois como veremos o
método para recomeçar é chamado no botão para recomeçar e também nos
métodos que testam se o jogador O ou X venceram a partida.

Figura 1.14: Código do botão btnRecomecar.

Para testar se o jogador X venceu, conforme pode ser visto o código na

figura 1.15, é preciso ter uma variável venceu iniciando em falso e na
sequência fazer oito testes, se estiver presente o texto “X” nos botões 1, 2 e 3
ao mesmo tempo, ou nos botões 4, 5 e 6, ou ainda nos botões 7, 8 e 9, ou nos
botões 1, 4 e 7, ou nos botões 2, 5 e 8, ou ainda 3, 6 e 9, ou 1, 5 e 9, ou 3, 5 e
7, ou seja, se nas linhas, nas colunas ou diagonais estão presentes o texto “X”
 14

nos botões, nestes casos, o jogador X venceu, a variável venceu é atualizada

para verdadeiro, é mostrado uma mensagem na tela que fica por alguns
segundos e desaparece (Toast) dizendo que o jogador X venceu, é chamado o
método recomeçar para iniciar uma nova partida. O último teste é ver se a
jogada é igual a jogada 9 e ninguém venceu, nestes casos, significa que a
partida empatou, é mostrada uma mensagem na tela e é chamado o método
para recomeçar a partida, para que inicie uma nova partida, esse teste é
realizado neste método porque neste aplicativo, definimos que o jogador X
sempre vai iniciar a partida, logo, se a partida chegar até a jogada 9, ele fará a
última jogada da partida.

Figura 1.15: Código do método jogadorXVenceu().

Para testar se o jogador O venceu, o código é parecido com o método

anterior, declaramos uma variável venceu iniciando em falso. Na sequência é
realizado oito testes, testado as oito possibilidades para que o jogador O possa
vencer, ou seja, testando se nas linhas, colunas ou diagonais, nos três botões
está presente o texto “O”, neste caso a variável venceu recebe o valor
verdadeiro, é mostrado na tela uma mensagem informando que o jogador O
 15

venceu e é chamado o método recomeçar, para iniciar uma nova partida. O

código completo do método pode ser visto na figura 1.16.

Figura 1.16: Código do método jogadorOVenceu().

Para programarmos o código do método para recomeçar a partida, é

preciso estabelecer que o texto presente nos nove botões presentes na activity
do jogo da velha esteja sem nenhum texto, através da propriedade setText e é
preciso também atualizar o número da jogada para zero, conforme pode ser
visto na figura 1.17.

Figura 1.17: Código do método recomecar().

 16

O aplicativo está pronto. Aproveite e teste o aplicativo em seu

smartphone ou o emulador do Android Studio, teste para ver se o aplicativo
detecta quando a partida encerrou, quando o jogador X venceu ou quando ou
jogador O venceu ou quando a partida terminou empatada, verifique também
se o botão para recomeçar a partida está funcionando corretamente, enfim,
teste para ver se todas as funcionalidades do aplicativo estão funcionando
corretamente.

1.3 Síntese

Neste capítulo desenvolvemos o nosso primeiro jogo para a plataforma

Android utilizando a ferramenta Android Studio. Utilizamos para isso a
linguagem XML para desenvolver a interface gráfica da activity do jogo da
velha, declaramos todos os textos no arquivo de strings, utilizamos o arquivo
AndroidManifest para configurar para que a activity fique fixa na orientação
vertical, utilizamos também a linguagem Java para manipular o evento de click
nos botões e criamos alguns métodos na linguagem Java para desenvolvermos
uma lógica que permitisse fazer com que o aplicativo funcionasse
adequadamente.

Exercícios

1. Pesquise na Play Store sobre apps de jogos. Após pesquisar, fale sobre três
aplicativos de jogos disponíveis na Play Store.

2. Em um aplicativo para calcular a área de um círculo, tendo como base que a

Activity terá um campo para receber o valor do raio de um círculo, um botão
para calcular, outro botão para limpar e um campo para receber o resultado,
 17

crie um projeto novo, vá até o arquivo “strings.xml” e declare os textos

necessários que devem estar presentes no aplicativo.

3. Crie a interface gráfica para o aplicativo do exercício anterior.

4. Crie o código para o evento de click dos botões para calcular a área de um
círculo e limpar do aplicativo que está sendo desenvolvido nos exercícios
anteriores.

5. Encerre o aplicativo e teste em seu celular ou no emulador do Android Studio

para verificar se o aplicativo está apresentando o comportamento esperado e
calculando corretamente.