Etapa 1: Criar um projeto e adicionar uma tabela ao formulário

A primeira etapa da criação de um jogo da memória é criar o projeto e adicionar uma tabela ao formulário.A tabela ajuda a alinhar os ícones em uma grade 4x4 de forma ordenada.Você também define várias propriedades para aprimorar a aparência do tabuleiro do jogo.

Para criar um projeto e adicionar uma tabela ao formulário

1. Na barra de menus, escolha Arquivo, Novo, Projeto.

2. Se não estiver usando o Visual Studio Express, primeiramente, você precisará selecionar uma linguagem de programação.Na lista Modelos Instalados, escolha Visual C# ou Visual Basic.

3. Na lista de modelos de projeto, escolha Aplicativo de Windows Forms, dê o nome MatchingGame ao projeto e escolha o botão OK.

4. Na janela Propriedades, defina as propriedades de formulário a seguir.

   1. Altere a propriedade Texto do formulário, de Form1 para Jogo da Memória.Esse texto aparece na parte superior da janela do jogo.

   2. Defina o tamanho do formulário para 550 pixels de largura por 550 de altura.Você pode fazer isso definindo a propriedade Dimensionar para 550, 550 ou arrastando o canto do formulário até visualizar o tamanho correto no canto inferior direito do IDE (ambiente de desenvolvimento integrado).

5. Exiba a caixa de ferramentas escolhendo a guia Caixa de Ferramentas no lado esquerdo do IDE.

6. Arraste um controle TableLayoutPanel da categoria Contêineres na caixa de ferramentas e, em seguida, defina as propriedades a seguir para ele.

   1. Defina a propriedade BackColor para CornflowerBlue.Para isso, abra a caixa de diálogo BackColor escolhendo a seta de menu suspenso próxima à propriedade BackColor na janela Propriedades. Em seguida, escolha a guia Web na caixa de diálogo BackColor para exibir uma lista de nomes de cores disponíveis.

      Observação
      As cores não estão em ordem alfabética e CornflowerBlue está quase no fim da lista.

   2. Defina a propriedade Encaixar para Preenchimento escolhendo o botão suspenso próximo à propriedade e escolhendo o botão grande do meio.Isso estende a tabela para que ela cubra o formulário inteiro.

   3. Defina a propriedade CellBorderStyle para Baixo-relevo.Isso fornece bordas visuais entre cada célula no tabuleiro.

   4. Escolha o botão triangular no canto superior direito do TableLayoutPanel para exibir o menu de tarefas.

   5. No menu de tarefas, escolha Adicionar Linha duas vezes para adicionar mais linhas e escolha Adicionar Coluna duas vezes para adicionar mais duas colunas.

   6. No menu de tarefas, escolha Editar Linhas e Colunas para abrir a janela Estilos de Coluna e Linha.Escolha cada uma das colunas, escolha o botão de opção Porcentagem e defina a largura de cada coluna para 25% da largura total.Em seguida, selecione Linhas na caixa suspensa na parte superior da janela e defina a altura de cada linha para 25%.Quando tiver finalizado, escolha o botão OK.

   O TableLayoutPanel agora deve ser uma grade 4x4, com dezesseis células quadradas de igual tamanho.Essas linhas e colunas estão onde as imagens do ícone aparecerão mais tarde.

7. Certifique-se de que TableLayoutPanel esteja selecionado no editor de formulários.Para confirmar isso, você deve ver tableLayoutPanel1 na parte superior da janela Propriedades.Se não estiver selecionado, escolha TableLayoutPanel no formulário ou escolha-o no controle suspenso na parte superior da janela Propriedades.

   Enquanto TableLayoutPanel estiver selecionado, abra a caixa de ferramentas e adicione um controle Label (localizado na categoria Controles Comuns) à célula esquerda superior de TableLayoutPanel.O controle Label agora deve ser selecionado no IDE.Defina as propriedades a seguir para ele.

   1. Verifique se a propriedade BackColor do rótulo está definida como CornflowerBlue.

   2. Defina a propriedade AutoDimensionar para Falso.

   3. Defina a propriedade Encaixar para Preenchimento.

   4. Defina a propriedade TextAlign para MiddleCenter escolhendo o botão suspenso próximo à propriedade e escolhendo o botão do meio.Isso garante que o ícone apareça no meio da célula.

   5. Escolha a propriedade Fonte.O botão reticências (…) deverá aparecer.

   6. Escolha o botão de reticências e defina o valor de Fonte para Webdings, o Estilo da Fonte para Negrito e o Tamanho para 72.

   7. Defina a propriedade Texto do rótulo até a letra c.

      A célula superior esquerda no TableLayoutPanel agora deve conter uma caixa preta centrada em um plano de fundo azul.

      Observação

      A fonte Webdings é uma fonte de ícones que acompanha o sistema operacional Windows.No seu jogo da memória, o jogador precisa encontrar pares de ícones, de modo que você usa essa fonte para exibir os ícones a serem encontrados.Em vez de colocar c na propriedade Texto, tente inserir diferentes letras para ver quais ícones são exibidos.Um ponto de exclamação é uma aranha, um N maiúsculo é um olho e uma vírgula é uma pimenta.

8. Escolha o controle de rótulo e copie-o ao lado da célula no TableLayoutPanel. (Escolha as teclas Ctrl+C ou, na barra de menus, escolha Editar, Copiar.) Cole-o. (Escolha as teclas Ctrl+V ou, na barra de menus, escolha Editar, Colar.) Uma cópia do primeiro rótulo aparece na segunda célula de TableLayoutPanel.Cole-o novamente e outro rótulo aparecerá na terceira célula.Continue colando controles Label até que todas as células sejam preenchidas.

   Observação
   Se você colar muitas vezes, o IDE adicionará uma nova linha ao TableLayoutPanel para que ele tenha um local para adicionar seu novo controle de rótulo.Isso pode ser desfeito.Para remover a nova célula, escolha as teclas Ctrl+Z ou, na barra de menus, escolha Editar, Desfazer.

   Agora seu formulário é apresentado.Ele deve se parecer com a imagem a seguir.

   Formulário inicial do jogo da memória

   

Para continuar ou revisar

• Para ir para a próxima etapa do tutorial, consulte Etapa 2: Adicionar um objeto aleatório e uma lista de ícones.

• Para retornar ao tópico de visão geral, consulte Tutorial 3: Criar um jogo de correspondência.