Partilhar via

Tutorial: Criar um aplicativo de jogo da memória no WinForms

  • Artigo

Nesta série de quatro tutoriais, você cria um jogo da memória em que o jogador encontra pares de ícones ocultos.

Use esses tutoriais para saber mais sobre as tarefas a seguir no IDE (Ambiente de Design Integrado) do Visual Studio.

  • Armazenar objetos, como ícones, em um objeto List<T>.
  • Usar um loop foreach no C# ou um loop For Each no Visual Basic para iterar pelos itens em uma lista.
  • Acompanhar o estado de um formulário usando variáveis de referência.
  • Criar um manipulador de eventos para responder a eventos que você pode usar com vários objetos.
  • Criar um temporizador que faça a contagem regressiva e dispare um evento logo depois que ele for iniciado.

Quando terminar, você terá um jogo completo.

Screenshot shows the game that you create, with several matching icons displayed in a grid.

Neste primeiro tutorial, você aprenderá a:

  • Crie um projeto do Visual Studio que usa o Windows Forms.
  • Adicione e formate um elemento de layout.
  • Adicione e formate rótulos a serem exibidos.

Pré-requisitos

Você precisa do Visual Studio para concluir este tutorial. Visite a página de downloads do Visual Studio para obter uma versão gratuita.

Criar seu projeto de jogo da memória no Windows Forms

Ao criar um jogo da memória, a primeira etapa é criar um projeto de aplicativo do Windows Forms.

  1. Abra o Visual Studio.

  2. Na janela inicial, selecione Criar um novo projeto.

    Screenshot shows the Create a new project option in the Visual Studio start window.

  3. Na janela Criar um projeto, pesquise Windows Forms. Em seguida, selecione Área de Trabalho na lista Todos os tipos de projeto.

  4. Selecione o modelo Windows Forms App (.NET Framework) para C# ou Visual Basic e, em seguida, selecione Avançar.

    Screenshot shows the Create a new project dialog box with Windows Forms entered and options for Windows Forms App.

    Observação

    Se você não encontrar o modelo do Aplicativo do Windows Forms (.NET Framework), pode instalá-lo a partir da janela Criar um novo projeto. Na mensagem Não encontrou o que precisa?, selecione o link Instalar mais ferramentas e recursos.

    Screenshot shows the Install more tools and features link from the Not finding what you're looking for message in the Create new project dialog box.

    Em seguida, no Instalador do Visual Studio, selecione Desenvolvimento da área de trabalho do .NET.

    Screenshot shows .NET Core workload in the Visual Studio Installer.

    Selecione o botão Modificar no Instalador do Visual Studio. Pode ser necessário salvar o trabalho. Nesse caso, execute essa ação. Em seguida, selecione Continuar para instalar a carga de trabalho.

  5. Na janela Configurar seu novo projeto, dê ao projeto o nome MatchingGame, e, em seguida, selecione Criar.

    Screenshot shows the Configure your new project.

O Visual Studio cria uma solução para seu aplicativo. Uma solução é um contêiner para todos os projetos e arquivos necessários pelo seu aplicativo.

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á a grade quatro por quatro do jogo.

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

    • Altere a propriedade Texto de Form1 para Jogo da Memória. Esse texto aparece na parte superior da janela do jogo.
    • Defina o tamanho do formulário. Você pode alterá-lo definindo a propriedade Tamanho 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. Se não for exibida, selecione Exibir>Caixa de Ferramentas na barra de menus ou Ctrl+Alt+X.

  3. Arraste um controle TableLayoutPanel da categoria Contêineres na caixa de ferramentas ou clique duas vezes nele. Defina as seguintes propriedades para o painel na janela Propriedades.

    • Defina a propriedade BackColor como CornflowerBlue. Para definir essa propriedade, selecione a seta ao lado da propriedade BackColor. Na caixa de diálogo BackColor, selecione Web. Nos nomes de cores disponíveis, selecione CornflowerBlue.

      Observação

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

    • Defina a propriedade Dock como Fill na lista suspensa selecionando o botão grande do meio. Essa opção estende a tabela para que ela cubra o formulário inteiro.

    • Defina a propriedade CellBorderStyle como Baixo-relevo. Esse valor fornece bordas visuais entre cada célula no tabuleiro.

    • Selecione o botão triangular no canto superior direito do TableLayoutPanel para exibir o 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 Estilos de Coluna e Linha. Para cada coluna, selecione a opção Porcentagem e defina a largura de cada coluna como 25 por cento.

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

    • Quando você concluir, selecione OK para salvar as alterações.

Seu TableLayoutPanel agora é uma grade quatro por quatro com 16 células quadradas de tamanho igual. Essas linhas e colunas estão onde os ícones aparecerão mais tarde.

Screenshot shows the Forms tab with a four by four grid.

Adicionar e formatar rótulos a serem exibidos

Nesta seção, você criará e formatará rótulos a serem exibidos durante o jogo.

  1. Certifique-se de que TableLayoutPanel esteja selecionado no editor de formulários. Você deve ver tableLayoutPanel1 na parte superior da janela Propriedades. Se 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 à célula superior esquerda do TableLayoutPanel. O controle Label agora está selecionado no IDE. Defina as propriedades a seguir para ele.

    • Defina a propriedade BackColor do rótulo como CornflowerBlue.
    • Defina a propriedade AutoSize para False.
    • Defina a propriedade Encaixar como Preenchimento.
    • Defina a propriedade TextAlign como MiddleCenter escolhendo o botão suspenso próximo à propriedade e selecionando o botão do meio. Esse valor garante que o ícone apareça no meio da célula.
    • Selecione a propriedade Fonte. O botão reticências (...) aparece. Selecione as reticências e defina o valor de Fonte como Webdings, o Estilo da Fonte como Negrito e o Tamanho como 48.
    • Defina a propriedade Texto do rótulo como a letra c.

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

    Observação

    Webdings é uma fonte de ícones que acompanha o sistema operacional Windows. No jogo da memória, o jogador faz a correspondência entre os pares de ícones. Essa fonte exibe os ícones a serem correspondidos.

    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 é uma pimenta.

  3. Selecione o controle de rótulo e copie-o ao lado da célula no TableLayoutPanel. Selecione as teclas Ctrl+C ou, na barra de menus, Editar>Copiar. Em seguida, cole usando Ctrl+V ou 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.

Esta etapa conclui o layout do formulário.

Screenshot shows the matching game form with sixteen black squares.

Próximas etapas

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.

Adicionar ícones ao Jogo da Memória