terça-feira, 6 de setembro de 2011

Jogo Password para Android


Olá leitores,

Como prometido, hoje irei fazer jus ao nome do blog. Iremos criar um joguinho simples conhecido como senha utilizando os elementos que trabalhamos no post anterior. Então mãos à obra.

Primeiro precisamos trabalhar nosso esquema de jogo. Sabemos que teremos que “sortear” um conjunto de números, esses números variam de 0 (zero) ao 9 e podem se repetir. Teremos que “pegar” de alguma maneira a sequência de números digitados pelo usuário e compará-los a cadeia de números que representam nossa senha. Depois de comparar, caso o usuário tenha acertado, informamos que ele venceu o jogo. Caso erre, precisamos mostrar ao usuário as seguintes informações:
  • Número existe e está na posição correta;
  • Número existe mas está na posição incorreta;
  • Número não existe.

Definindo nosso esquema de jogo, podemos começar a pensar no layout.

No meu caso, eu escolhi enviar uma mensagem ao usuário informando as regras do jogo. Em seguida, teremos mais uma mensagem indicando a sequência secreta. É importante anotar aqui que essa sequência precisa ser secreta. Ou seja, precisamos mascará-la. Como faremos isso mostrarei no código no momento que chegarmos na parte respectiva. Após os dois textos, iremos inserir uma campo de entrada onde o usuário deverá digitar a sequência que ele imagina ser a secreta. Mais uma importante anotação: A sequência secreta são números de 0 (zero) ao 9, então devemos restringir os valores de entrada para estes números. Também veremos como fazer isso através do código. Por último, acrescentaremos o botão de confirmação. Agora vamos para o código do arquivo “main.xml”.

Tutorial explicando o jogo


Texto que irá "exibir" a sequência secreta


Campo de entrada do usuário



Botão de confirmação



Na primeira imagem, não há muita novidade assim como na quarta. Na segunda, adicionamos um 'id' ao <TextView>. Na terceira definimos nossos dados de entrada como dígitos de 0 (zero) ao 9 através da linha 'android:digits=“0123456789”'. Esse fato é importante porque senão poderíamos adicionar letras e símbolos, o que não é do nosso interesse, pelo menos nessa fase.

Depois de trabalhar nosso layout, está na hora de partirmos para o arquivo .java, podemos também executar o app para vermos como está nosso layout.


Teremos que importar todas as bibliotecas que importamos no post passado.

Imports necessários para aplicação



Em seguida, vamos para o corpo da nossa classe principal.

Iremos declarar duas variáveis que farão a ligação com os elementos <EditText> e <TextView> que declaramos no arquivo “main.xml” chamados user_sequence e password_txt, respectivamente. Também vamos precisar de uma variável String chamada password_sequence que irá armazenar o valor real da sequência secreta de caracteres que serão sorteados randomicamente variando de 0 (zero) ao 9 como definimos no começo do post. Outra variável será a intitulada rounds que como o nome já diz irá contar o número de rodadas que o usuário precisará jogar para acertar a sequência.

Declaração das variáveis



Agora iremos dar um “pulo” no código. Para definir a sequência de caracteres secretos, por questão de limpeza do código e também facilidade, vamos criar uma função específica para criar nossa sequência secreta.

Para criar a sequência de senha, a ideia é extremamente simples. Vamos criar uma variável String para nos auxiliar. Nossa função irá retornar o valor armazenado por essa variável auxiliar. Dei o nome dela de pass_sequence. Vamos criar também uma variável para definir o tamanho da sequência, isso porque podemos mais tarde criar níveis de dificuldade que aumentarão o número de caracteres secretos. Por enquanto, deixaremos com o valor 4. Com um loop que vai do 0 (zero) ao tamanho da sequência, no nosso caso o valor é 4, vamos calcular um número randômico que vai de 0 (zero) ao 9 através da linha pass_sequence += Math.round(Math.random() * 10 ). Depois apenas retornamos o valor resultante de pass_sequence.

Função createPasswordSequence()




Agora que criamos nossa função para criar a sequência de caracteres secretos, vamos voltar ao código principal onde iremos atribuir o valor de retorno da função mencionada na variável password_sequence. Lembra quando falei que teríamos que arrumar um jeito de “mascarar” nossa senha? Pois é, não sei se é a melhor maneira, mas foi a que me veio na cabeça no momento que estava programando. Criei uma variável auxiliar do tipo String que possui o mesmo tamanho de password_sequence com uma diferença: a variável aux terá apenas como valor o símbolo “*”. E como faremos para verificar se a sequência do usuário é igual ao do programa? Pois é, nós poderemos compará-la diretamente com password_sequence pois esta variável não será mostrada ao usuário, consequentemente ele não terá como manipulá-la.


Inicialização da sequência de caracteres



Pronto. Já temos nossa sequência de caracteres. Para facilitar o entendimento do usuário, vamos mostrar a variável aux precedida de uma informação. Em seguida, vamos linkar nosso botão criado no main.xml com um botão no código-fonte.


Linkando <TextView> e <Button>



Chegamos no momento de tratar a interação do usuário com nosso game. O usuário irá digitar uma sequência e apertar o botão para verificar se a senha está correta, certo? Então precisamos criar um listener para o botão e é o que faremos agora. Contudo, não basta apenas adicionar um listener ao botão. Precisamos verificar se o que o usuário digitou é igual ao que foi criado pelo aplicativo. Então vamos “pular” mais uma vez até nossa função de verificação que também criamos.

Explicá-la não será uma tarefa simples. Como vimos, além de verificarmos se está correta a sequência ou não, também precisamos enviar ao usuário uma resposta com os códigos que listamos na tela da aplicação. Para realizarmos a verificação, vamos ter que criar um loop duplo com condicionais.

Para começar, vamos pelo mais fácil. O caso de o dígito existir e estar na posição correta. Fazemos essa verificação através da primeira condicional. Caso o dígito exista e está na posição correta, o segundo loop não será executado otimizando dessa maneira a performance da nossa aplicação. Agora no caso do dígito não estar na ordem correta (observe que ainda não sabemos se o dígito simplesmente não existe naquela sequência ou se ele existe mas está em outra posição) precisamos rodar o loop interno.

Se vocês repararem bem, criei uma variável booleana para definir se o dígito existe ou não. Pode parecer sem sentido, mas a ideia ficará mais clara quando avançarmos um pouco mais no código. Entramos no loop e verificamos um a um se algum dígito da variável password_sequence corresponde a algum dígito da cadeia digitada pelo usuário. Caso exista o dígito igual, iremos setar como verdadeiro a variável has_item e quebraremos o loop. Agora imagine que chegamos ao fim do loop e não encontramos nenhum dígito que fosse igual entre as duas sequências. O que o programa fará? Ele entrará na condição na qual has_item continua com o valor falso. Então teremos nossa função de verificação funcionando perfeitamente e de maneira otimizada.


Função verifyPasswordErrorSequence() responsável em retornar uma cadeia de caracteres com os códigos 'char' para instruir o jogador dos erros e acertos



Voltamos para nosso método onCreate(...) para criar a ação do botão. Ela será basicamente a mesma do último post, contudo, no caso da entrada do usuário for igual a senha sorteada, uma mensagem de vitória será lançada e o jogo recomeçará com nova senha secreta. No caso das senhas não baterem, a sequência de caracteres com os códigos respectivos da posição e existência de cada caractere será exibido.

Caso do usuário ter acertado a sequência


Caso do usuário ter errado a sequência



Bom, agora é só executar e se divertir quebrando a cabeça para acertar as sequências de senhas. Espero que este post torne-se útil para vocês.

Caso alguém tenha joguinhos para sugerir, basta enviar e-mail para mim (andreikeda87@gmail.com). Obrigado pelas visitas e sintam-se a vontade para comentar e também seguir o blog.


Um grande abraço e até a próxima quando iremos fazer mais um joguinho utilizando apenas <EditText> e <Button>

Nenhum comentário:

Postar um comentário