Tutorial Jogo da velha para Android

Olá pessoal,
Esse é mais um tutorial sobre desenvolvimento de apps/jogos para Android. Não é um jogo muito avançado nem muito tecnológico. É um jogo bem simples: o jogo da velha. Essa é uma versão bem simplificada, com gráficos realmente muito básicos… Você pode melhorar os gráficos… fazer uma versão online para dois jogadores pela internet… Fazer o jogador jogar contra um algoritmo de inteligência artificial…

Mas esse tutorial só ensina como fazer uma versão simples e básica do jogo da velha para Android.

Vamos desenhar na tela programaticamente e ‘manusear/interpretar’ o toque do usuário na tela.

Esse tutorial é feito para/com a AIDE, mas deve ser adaptável ao Eclipse e ao Android Studio… Se você segue o tutorial com uma IDE diferente, por favor comente abaixo…

Para começar vamos criar um novo projeto.

Criando Novo Projeto

Tutorial Jogo da velha para Android

Como de costume vamos eliminar todo código dispensável que foi gerado automaticamente… Nosso ‘hello world’ fica:

Hello World

Tutorial Jogo da velha para Android



Agora vamos criar uma classe ‘Tela’ que é uma extensão da classe ‘View’ que nos permite desenhar na tela (como visto no outro tutorial http://ubuntu.blog.br/desenhando-na-tela-do-android-programaticamente/)

Vamos instanciar a classe ‘Tela’ que criamos e vamos atribuir ela como ‘View da app’:

Tela t;
@Override public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
//setContentView(R.layout.main);
t=new Tela(this);
setContentView(t);
}

Agora vamos ‘desenhar’ o tabuleiro:
(usando o Método drawLine que apresentei no outro tutorial)

Desenhando o Tabuleiro

Tutorial Jogo da velha para Android



 

O método ‘onDraw’ é um método da classe Tela…
O tabuleiro tem 300×300 px de tamanho para caber em qualquer dispositivo… Em uma outra oportunidade mostrarei métodos de adequar (redimensionando) o tamanho do tabuleiro na tela…

Agora vamos criar uma variável que armazena os estados das 9 celulas do tabuleiro (um atributo da classe MainActivity):
(cada ‘0’ representa uma célula no tabuleiro 3×3) (o valor ‘0’ será alterado quando o jogador clicar sobre a célula…)

Vamos ‘mapear’ a tela para ‘manusear’ o toque…
Ou seja, ‘escutar’ o toque na tela e identificar onde foi pressionado…

O método ‘onTouchEvent’ da clsse ‘Tela’ nos permite identificar ‘onde’ a tela está sendo pressionada (atravéz dos métodos getX() e getY() que ‘retornam’ as coordenadas do ponto onde a tela está sendo pressionada)

Existem constantes para identificar se é a ‘entrada do toque’ na tela, ou o ‘arrastar do toque’ na tela, ou o ‘abandonar o toque’ na tela… É o ‘abandonar o toque’ que nos interessa: MotionEvent.ACTION_UP
O código até aqui fica:

Vamos fazer o app ‘entender’ que o usuário selecionou a primeira célula do tabuleiro… (na ontouchevent)

//se o toque(x,y) foi entre o ponto “0,0” (da tela) e o ponto “100,100” (da tela)
então a primeira célula deve ser carimbada com o ‘X’…
o método ‘invalidate’ serve para chamar o ‘OnDraw’

Vamos fazer a ‘ondraw’ ‘carimbar’ o ‘X’:

Vamos editar de novo a ‘ontouchevent’… Vamos ‘replicar’ o código que identifica ‘se o usuário pressiona a primeira célula’.

Vamos usar um ‘laço for’ para replicar o código para as três primeiras células:

O código até agora fica:

Repare que usamos uma variavel ‘m’
Qualquer dúvida pode me enviar em e-mail para [email protected]

Como já identificamos e carimbamos quando o usuário clica sobre as três primeiras células, vamos ‘replicar’ o código para as duas linhas de baixo:
Na ‘ontouch’:

e na ondraw:

Já mapeamos o ‘X’ em todas células… Agora vamos mapear o ‘O’:
Vamos comentar essa última linha que escrevemos (substituimos) na ontouch…

e vamos refazer os passos anteriores… Na ‘ontouch’ escreva:

e na ‘ondraw’:

O código até aqui fica:

 

Vamos ‘replicar’ o manuseio do toque para todas celulas… Dessa vez atribuindo ‘2’ para a ‘onDraw’ identificar que deve desenhar o ‘0’

e replicar o ‘carimbo’ do ‘0’ em todas as celulas

Qualquer dúvida pode me enviar um email: [email protected]

Já temos ‘mapeados’ todas as ‘impressões’ do ‘0’ e do ‘X’

Para finalizar vamos criar uma variável booleana ‘vezdox’ que muda a cada toque, identificando cada jogada:

e na ‘ontouchevent’:

Se você não entendeu o comando (vezdox?1:2) pesquise por ‘operador ternário’ ou ‘inline if’
Adianto que é uma maneira simplificada e direta de fazer um ‘if’

O código todo fica:

Esse source está disponibilizado no gitHub: Código-fonte

Avalie esse Post
  • Gabriel Novaes

    Faltou colocar no github 😛 mas ótimo post 🙂

    • Allan Almeida

      @disqus_QqNMbwBsxp:disqus
      Falei com o Rodrigo que foi o autor do post =)

      Obrigado pela visita e comentário.

      Allan