aula 3 - versão 1.0 para Visual Basic - 09 setembro 2000

Tutorial: Noções Básicas de Programação de Jogos
endereço atual: http://www.oocities.org/victormsantanna/

"Clique" certo

Victor M. Sant'Anna

Introdução

Vamos aproveitar as duas lições anteriores e criar mais dois jogos, o primeiro programa muito simples e fácil de fazer em termos de código e o segundo visualmente mais simples, mas com maiores detalhes de programação. Os dois programas serão parecidos do ponto de vista do usuário: "clicar" botões para encontrar uma determinada resposta.

No primeiro programa, o jogador testará sua "capacidade paranormal" de prever acontecimentos futuros, tentando descobrir qual dentre cinco cartas o computador escolherá. Chamaremos esse programa de "PEs" (Percepção Extrasensorial). Veremos como ler imagens (bitmaps) gravadas em disco. Além disso, posicionaremos todos os controles em tempo de execução, ao contrário do que vínhamos fazendo anteriormente.

Ao contrário do primeiro programa, no segundo programa a disposição dos controles será em tempo de design do formulário. Testaremos a memória do jogador: quantos números uma pessoa pode guardar em seqüência? O programa irá gerar números aleatoriamente e o jogador terá de seguir a seqüência gerada pelo computador. Nesse caso, também usaremos o Timer para mostrar os números em uma velocidade suficiente para que o jogador memorize a seqüência. Os números serão armazenados em um string (ao invés de um array de inteiros, como seria o normal) para que seja mais fácil comparar a entrada do jogador contra a seqüência armazenada pelo programa.

Lendo imagens gravadas

Usando a função rnd() vista na primeira lição, vamos esperar pelo palpite do jogador antes de fazer o "sorteio" de uma imagem e conferir a resposta. Entretanto, ao invés de colar e posicionar as imagens em tempo de criação como nos programas anteriores, faremos isso durante a execução do programa. Posicionaremos todos os controles de acordo com o tamanho da tela que estiver sendo usada.

1) Crie um diretório para o programa e grave nesse diretório imagens semelhante as imagens abaixo. Use os nomes de "fig1.bmp", "fig2.bmp", "fig3.bmp", "fig4.bmp" e "fig5.bmp"

2) Crie um projeto novo e salve o projeto dentro do diretório que contém as imagens gravadas.

3) Coloque, no form1 criado, um botão (CommandButton).

4) Dê um "duplo clique" no botão para deixar o código como o mostrado abaixo:

5) Coloque uma caixa de figura (PictureBox) no form e, como nas lições anteriores, dê um "copiar" (copy) nessa caixa de figura (selecione-a e use Ctrl-C, por exemplo).

6) Cole no form a caixa de figura copiada (pode usar Ctrl-V, por exemplo): o Visual Basic pergunta se você quer criar um "array" de controles, responda que sim. Repita até ter 6 caixas de figura. A posição não importa, posicionaremos via código. As caixas de figura 1 a 5 conterão as imagens lidas no início do programa em Form_Load() e a caixa zero armazenará a imagem escolhida pelo computador. Todos os controles desse programa serão visíveis.

7) Dê um duplo clique no form para inserir as linhas de código de posicionamento e leitura das imagens. O código em Form_Load() deve ficar assim:

Screen.Width e Screen.Height fornecem as dimensões configuradas para a tela de monitor do usuário, largura e altura, respectivamente. Isso significa que não fará diferença se o tamanho de tela usado pelo computador é 600x480, 800x600 ou outra, nosso programa ajustará o tamanho da própria janela para deixar os controles perfeitamente distribuídos. Usamos a medida de três quartos de tela para a janela de nosso programa. Os bitmaps lidos, entretanto, tem tamanho único. Em um programa mais profissional, talvez seja interessante ter diversos conjuntos de bitmaps para os diferentes padrões de dimensões de tela.

Observe que, ao invés de usar as propriedades Width e Height, que dão o tamanho externo de nosso form, preferimos usar ScaleWidth e ScaleHeight para posicionar os controles dentro de nossa janela, pois essas propriedades retornam as dimensões internas de Form1. Como temos 5 bitmaps a serem exibidos, supondo que os mesmos tenham dimensões parecidas ou idênticas, dividimos por cinco o tamanho interno do form e posicionamos as caixas de figura em intervalos regulares. Posicionamos a caixa de figura Picture1(0) aproximadamente no meio do formulário. Por fim posicionamos o botão Command1 na parte inferior da janela, fazendo a altura do botão ser um quarto do tamanho da janela e a largura de Command1 ocupar a largura toda de nosso form. Demos à propriedade Caption do botão o valor "Estatísticas".

Usamos também uma variável para guardar os pontos feitos pelo jogador e o número de testes efetuados. Como você viu no início desse código, aproveitamos para "setar" as variáveis "pontos", "testes" e "MyValue" e acrescentar a sentença Randomize.

8) Vá na seção de declarações e coloque a seguinte declaração para as variáveis usadas no programa:

9) Acrescente um Timer ao form e dê para a propriedade Interval o valor 2000. Queremos que depois de 2 segundos (2000 milissegundos) a imagem desapareça. Vamos acrescentar agora o código do Timer. Dê um "duplo clique" no desenho do Timer que está no form. Acrescente o seguinte código em Timer1_Timer():

A linha acima faz com que a imagem apresentada desapareça sempre que o Timer for ativado. Só queremos que ela fique poucos segundos a vista, para que o jogador saiba se acertou ou não seu palpite.

10) Dê um duplo clique em uma caixa de figura. Picture1_Click() deve ficar assim:

Com isso incrementamos a variável teste sempre que o jogador "clicar" numa figura e também sorteamos um valor para "MyValue". Além disso, se a figura "clicada" for a mesma que o computador escolher, o jogador ganhará um ponto.

11) Embeleze o programa acrescentando um ícone, nome diferente e uma tela de abertura parecida com essa:

A tela acima pode ser carregada em uma caixa de figura de uma janela à parte sempre que o programa começar, por exemplo, uma espécie de "tela de abertura". Normalmente os programas tem uma tela assim contendo o nome do programa, do autor, logotipo e outras informações a chamada "splash screen" ou "splash window". Você pode preferir chamar a tela acima a partir de um botão ou menu de ajuda. Descubra no help do Visual Basic como fazer isso!

12) Crie o executável. Se testar o programa dentro do Visual Basic, verá que ele não conseguirá carregar as telas usadas, pois elas estão no diretório onde está o programa compilado (executável). Pode colocar os bitmaps no diretório do Visual Basic (temporariamente, apenas para teste), mas é preferível testar o executável diretamante, sem usar o Start do menu Run do Visual Basic.

Eis o resultado:

Não esqueça que usando telas (bitmaps) externas, você precisará distribui-las em conjunto com seu programa ou você não conseguirá que o usuário rode seu jogo!

Memória para números

Este programa serve para melhorara a memória do usuário para seqüência de números (útil para quem pretende guardar telefones e não tem uma caneta), mas não passa de um jogo bem conhecido, apesar de normalmente serem usados, no lugar de números, botões com cores e som e um menor número de botões (geralmente quatro). Usaremos para esse programa apenas botões de comando, mas fica como exercício para o programador trocar por figuras interessantes os botões utilizados.

1) Crie um form com um array de controles formados por 10 botões posicionados lado a lado. Numere os botões de zero a nove (Command1(0) a Command1(9), respectivamente).

2) Acrescente um Timer ao form. A propriedade Interval será setada pelo programa em tempo de execução.

3) Acrescente mais dois botões de comando independentes dos primeiros dez, Command2 e Command3. A propriedade Caption deles deve ser setada, respectivamente, para "Começar" e "Desistir".

4) Coloque no form duas caixas de texto (text1.text e text2.text), ambas de tamanho largo e com a propriedade Alignment setada para "2-center" e a propriedade MultiLine setada para "True". Também a propriedade Locked deve ser setada para "True", pois as caixas de texto não devem ser editadas pelo usuário (para que o jogador não possa corrigir seus erros: mundo cruel, não é?). Tente copiar o seguinte lay-out:

5) Dê um "duplo clique" no form. Vamos desabilitar o Timer e limpar as caixas de texto quando o programa iniciar, deixando Form_Load() assim:

Observe que estamos desabilitando todos os botões com algarismos, pois não queremos que o jogador os pressione no início do jogo.

6) As declarações das variáveis usadas no programa (colocadas na seção de declarações do form) devem ser estas:

A variável "resposta" conterá a seqüência de números gerada pelo computador, para que o programa possa verificar se o jogador acertou a seqüência, "contaletra" é usada em Timer, para saber qual algarismo deve ser exibido na caixa de texto do computador (text2) e "rodada" serve para calcularmos quantas rodadas o jogador conseguiu "agüentar".

7) O botão "Começar" (command2) irá inicializar diversas variáveis, deve ficar assim:

Observe que também aqui estamos desabilitando os botões com algarismos, pois não queremos que o jogador os pressione enquanto o computador não tiver terminado de exibir sua seqüência de números.

8) O botão "Desistir" (command3) deverá mostrar a contagem do jogador e terminar o programa. Ele é importante pois se o jogadar der um palpite errado tentando acertar a seqüência de algarismos, o programa não aceitará correção da resposta do jogador e ele terá de desistir! O código desse botão será:

9) Dê um "duplo clique" no Timer. Timer1_Timer() ficará assim:

O código acima é um pouco complexo, mas na verdade estamos limpando as caixas de texto se a seqüência estiver iniciando (sabemos disso porque "contaletra" será zerada sempre que a seqüência tiver terminado de ser exibida). Depois disso, caso o último algarismo já tenha sido exibido pelo Timer, limpamos as caixas de texto, zeramos "contaletra", habilitamos os botões com algarismos e desabilitamos o Timer. Caso ainda não seja o último algarismo, exibimos mais um na caixa de texto text2.text.

10) Por fim, os botões de algarismos (command1). Neles fazemos duas coisas, primeiro mostramos na caixa de texto o algarismo do botão clicado e depois testamos a resposta entrada pelo jogador, para ver se o número entrado já é igual ao número armazenado em "resposta". Caso o jogador tenha acertado, um novo algarismo gerado randomicamente é acrescentado à seqüência armazenada por "resposta", o timer é habilitado, mas com valor um pouco menor (para acelerar o jogo) e desabilitamos as teclas com algarismos:

Como pode ser visto, esse jogo não tem fim, o jogador terá de desistir em algum momento para saber quantos pontos fez. Assim é a vida! Não esqueça de mudar o título do jogo e inventar um ícone para usar com ele. A cor do fundo da janela também pode ser diferente. Eis o resultado do programa:

Conclusão

Fizemos alguns pequenos progressos em termos de programação, mas deu para perceber que é possível complicar na confecção de programinhas simples, mesmo que usando apenas o conhecimento disponível. As vezes programas menos vistosos contém mais complexidade do que programas com maiores recursos gráficos.

O recurso de usar telas (bitmaps) externos é muito útil, as vezes queremos criar programas personalizáveis pelo usuário. Se os recursos são extrenos, o programa não precisa ser recompilado. No caso do jogo PEs, por exemplo, desde que as figuras usadas não ultrapassem um certo tamanho, é possível criar um conjunto alternativo de bitmaps ou mesmo editá-las depois do programa pronto e distribuído.

Fica como exercício (mental ou para implementação) a transformação do segundo programa em um jogo com menos botões e mais cores, usando bitmaps ao invés de comandos de botões.