Tutorial: Criar um aplicativo de jogo correspondente do Windows Forms

Nesta série de quatro tutoriais, você cria um jogo correspondente. O jogador encontra pares de ícones ocultos.

Use estes tutoriais para saber mais sobre as seguintes tarefas no IDE (ambiente de desenvolvimento integrado) do Visual Studio:

• Armazene objetos, como ícones, em um List<T> objeto.
• Use um foreach loop em C# ou um For Each loop no Visual Basic para iterar por itens em uma lista.
• Acompanhe o estado de um formulário usando variáveis de referência.
• Crie um manipulador de eventos para responder a eventos que você pode usar com vários objetos.
• Crie um temporizador que conta para baixo e, em seguida, dispare um evento exatamente uma vez após o início.

Quando terminar, você terá um jogo completo.

Neste primeiro tutorial, você aprenderá a:

Pré-requisitos

Você precisa do Visual Studio para concluir este tutorial. Para obter uma versão gratuita, consulte os downloads do Visual Studio.

Criar um projeto de jogo de correspondência do Windows Forms

A primeira etapa da criação do jogo é criar um projeto de Aplicativo do Windows Forms.

O Visual Studio cria uma solução para seu aplicativo. Uma solução é um contêiner para os projetos e arquivos de que seu aplicativo precisa.

Neste ponto, o Visual Studio exibe um formulário vazio no Designer de Formulários do Windows.

Criar um layout para seu jogo

Nesta seção, você criará o tabuleiro de quatro por quatro para o jogo.

1. Selecione o formulário para selecionar o Designer de Formulários do Windows. A guia exibe Form1.cs [Design] para C# ou Form1.vb [Design] para Visual Basic. Na janela Propriedades , defina as propriedades do formulário a seguir.

   • Altere a propriedade Text de Form1 para Jogo Correspondente. Este texto aparece na parte superior da janela do jogo.
   • Defina o tamanho do formulário. Você pode alterá-la definindo a propriedade Size como 550, 550 ou arrastando o canto do formulário até ver o tamanho correto na parte inferior do IDE do Visual Studio.

2. Selecione a guia Caixa de Ferramentas no lado esquerdo do IDE. Caso não o veja, selecione Exibir>Caixa de Ferramentas na barra de menus ou pressione Ctrl+Alt+X.

3. Arraste um TableLayoutPanel controle da categoria Contêineres na caixa de ferramentas ou clique duas vezes nele.

   Defina as propriedades a seguir para o painel na janela Propriedades .

   • Defina a propriedade BackColor como CornflowerBlue. Para definir essa propriedade, selecione a seta para baixo ao lado da propriedade BackColor . Na caixa de diálogo resultante, selecione Web. Na lista de nomes, selecione CornflowerBlue.

     Observação

     As cores não estão em ordem alfabética. CornflowerBlue está perto da parte inferior da lista.

   • Defina a propriedade Dock como Preenchimento selecionando a seta para baixo e, em seguida, selecionando o botão do meio grande. Essa opção espalha a tabela para que ela cubra todo o formulário.

   • Defina a propriedade CellBorderStyle como Inset. Esse valor fornece bordas visuais entre cada célula no quadro.

   • Selecione o botão triângulo no canto superior direito do TableLayoutPanel para exibir seu menu de tarefas. No menu de tarefas, selecione Adicionar Linha duas vezes para adicionar mais duas linhas. Em seguida, selecione Adicionar Coluna duas vezes para adicionar mais duas colunas.

   • No menu de tarefas, selecione Editar Linhas e Colunas para abrir a janela Coluna e Estilos de Linha . Para cada coluna, selecione a opção Porcentagem e defina a largura de cada coluna como 25 %.

   • Selecione Linhas na lista na parte superior da janela e defina a altura de cada linha como 25 %.

   • Quando terminar, selecione OK para salvar suas alterações.

Seu TableLayoutPanel agora é uma grade de quatro por quatro com 16 células quadradas igualmente dimensionadas. Essas linhas e colunas são onde os ícones aparecem mais tarde.

Adicionar e formatar rótulos

Nesta seção, você cria e formata rótulos que aparecem durante o jogo.

1. Verifique se o TableLayoutPanel está selecionado no editor de formulários. Você deverá ver tableLayoutPanel1 na parte superior da janela Propriedades . Se ele não estiver selecionado, selecione o TableLayoutPanel no formulário ou selecione-o na lista na parte superior da janela Propriedades .

2. Abra a caixa de ferramentas, como antes, e abra a categoria Controles Comuns . Adicione um controle Label na célula superior esquerda do TableLayoutPanel. O controle de rótulo agora está selecionado no IDE. Defina as seguintes propriedades para ele.

   • Defina a propriedade BackColor do rótulo como CornflowerBlue.
   • Defina a propriedade AutoSize como False.
   • Defina a propriedade Dock como Fill.
   • Defina a propriedade TextAlign como MiddleCenter selecionando o botão de seta para baixo ao lado da propriedade e, em seguida, selecionando o botão do meio. Esse valor garante que o ícone apareça no meio da célula.
   • Selecione a propriedade Fonte . Um botão de reticências (...) é exibido. Selecione a elipse e defina o valor da fonte como Webdings, o Estilo da Fonte como Negrito e o Tamanho como 48.
   • Defina a propriedade Text do rótulo como a letra c.

   A célula superior esquerda do TableLayoutPanel agora contém uma caixa preta centralizada em um plano de fundo azul.

   Observação

   Webdings é uma fonte de ícone que é fornecida com o sistema operacional Windows. No jogo de correspondência, o jogador combina pares de ícones. Esta fonte mostra os ícones correspondentes. Se os ícones de Webdings não forem exibidos corretamente no formulário, defina a propriedade UseCompatibleTextRendering de rótulos no formulário como True.

   Em vez de c, tente letras diferentes na propriedade Text . Um ponto de exclamação é uma aranha, um N maiúsculo é um olho, e uma vírgula é um pimentão.

3. Selecione o controle Label e copie-o para a próxima célula no TableLayoutPanel. Selecione as teclas Ctrl+C ou, na barra de menus, Editar>Cópia. Em seguida, cole-o usando Ctrl+V ou Editar>Colar.

   Uma cópia do primeiro Rótulo aparece na segunda célula do TableLayoutPanel.

   Cole-o novamente e outro Rótulo será exibido na terceira célula. Continue a colar controles de etiqueta até que todas as células sejam preenchidas.

Esta etapa conclui o layout do formulário.

Próxima etapa

Vá para o próximo tutorial para saber como atribuir um ícone aleatório a cada rótulo e adicionar manipuladores de eventos aos rótulos.