Tutorial: Criar um aplicativo WinForms de jogo correspondente

Nesta série de quatro tutoriais, você cria um jogo correspondente, em que o jogador corresponde a pares de ícones ocultos.

Use estes tutoriais para saber mais sobre as seguintes tarefas no Visual Studio IDE (Ambiente de Design Integrado).

  • Armazenar objetos, como ícones, em um objeto List<T>.
  • Use um foreach loop em C# ou um For Each loop em Visual Basic iterar por meio de 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.

A captura de tela mostra o jogo que você cria, com vários ícones correspondentes exibidos em uma grade.

Neste primeiro tutorial, você aprenderá a:

  • Crie um Visual Studio que usa Windows Forms.
  • Adicionar e formatar um elemento de layout.
  • Adicionar e formatar rótulos a exibir.

Pré-requisitos

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

Criar seu projeto de jogo de Windows Forms

Quando você cria seu jogo de correspondência, a primeira etapa é criar um projeto Windows Aplicativo de Formulários.

  1. Abra o Visual Studio.

  2. Na barra de menus, selecione Arquivo > > Novo Project.

    A captura de tela mostra a caixa de diálogo Novo projeto.

  3. No lado esquerdo da caixa de diálogo Novo Project, selecione Visual C# ou Visual Basic e, em seguida, selecione Windows Desktop.

  4. Na lista de modelos de projeto, selecione Windows Aplicativo de Formulários (.NET Framework). Nomeia o novo formulário MatchingGame e, em seguida, selecione OK.

    Observação

    Se o modelo Aplicativo do Windows Forms (.NET Framework) não for exibido, use o Instalador do Visual Studio para instalar a carga de trabalho Desenvolvimento para área de trabalho do .NET.

    Captura de tela que mostra a carga de trabalho de desenvolvimento de área de trabalho dot NET no Instalador do Visual Studio.

    Para obter mais informações, confira a página Instalar o Visual Studio.

  1. Abra o Visual Studio.

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

    A captura de tela mostra a opção Criar um novo projeto na Visual Studio inicial.

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

  4. Selecione o modelo Windows Aplicativo de Formulários (.NET Framework) para C# ou Visual Basic e, em seguida, selecione Próximo.

    A captura de tela mostra a caixa de diálogo Criar um novo projeto com Windows Formulários inseridos e opções para o Windows Forms.

    Observação

    Se você não vir o modelo Windows Aplicativo de Formulários (.NET Framework), poderá instalá-lo na janela Criar um novo projeto. Na mensagem Não encontrar o que você está procurando?, selecione o link Instalar mais ferramentas e recursos.

    A captura de tela mostra o link Instalar mais ferramentas e recursos da mensagem Não localizar o que você está procurando na caixa de diálogo Criar novo projeto.

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

    A captura de tela mostra a carga de trabalho do .NET Core no Instalador do Visual Studio.

    Selecione Modificar na Instalador do Visual Studio. Talvez você seja solicitado a salvar seu trabalho. Em seguida, selecione Continuar para instalar a carga de trabalho.

  5. Na janela Configurar seu novo projeto, nomee o projeto MatchingGame e, em seguida, selecione Criar.

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

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

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 Windows Designer de Formulários. 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 Text de Form1 para Jogo correspondente. Esse texto aparece na parte superior da janela do jogo.
    • De acordo com o tamanho do formulário. Você pode alterá-lo definindo a propriedade Size como 550, 550 ou arrastando o canto do formulário até ver o tamanho correto na parte inferior do IDE Visual Studio.
  2. Selecione a guia Caixa de Ferramentas no lado esquerdo do IDE. Se você não a vir, selecione Exibir Caixa de Ferramentas na barra de > menus ou Ctrl + Alt + X.

  3. Arraste um TableLayoutPanel controle da categoria Contêineres na caixa de ferramentas ou clique duas vezes nele. De definir as propriedades a seguir 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 BregaBlue.

      Observação

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

    • De definir a propriedade Dock como Preencher na lista de menus suspensos selecionando o botão central grande. Essa opção estende a tabela para fora para abranger todo o formulário.

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

    • Selecione o botão de 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 Estilos de Coluna e Linha. Para cada coluna, selecione a opção Porcentagem e, em seguida, de definir a largura de cada coluna como 25%.

    • Selecione Linhas na lista na parte superior da janela e, em seguida, de definir 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 de tamanho igual. Essas linhas e colunas são onde os ícones aparecem mais tarde.

Captura de tela que mostra a guia Formulários com uma grade de quatro a quatro.

Adicionar e formatar rótulos a exibir

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

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

    • De definir a propriedade BackColor do rótulo como CadarceBlue.
    • Defina a propriedade AutoSize para False.
    • Defina a propriedade Encaixar como Preenchimento.
    • De definir a propriedade TextAlign como MiddleCenter escolhendo o botão de lista listada 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 reellipses (...) é exibido. Selecione as reellipses e de definir o valor 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 do TableLayoutPanel agora contém uma caixa preta centralizada em uma tela de fundo azul.

    Observação

    Webdings é uma fonte de ícones que acompanha o Windows operacional. No jogo de correspondência, o jogador corresponde a pares de ícones. Essa fonte exibe os ícones a corresponder.

    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 Rótulo e copie-o para a próxima célula no TableLayoutPanel. Selecione as teclas Ctrl + C ou, na barra de menus, Editar > Copiar. Em seguida, colar 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.

Captura de tela que mostra o formulário de jogo correspondente com 16 quadrados pretos.

Próximas etapas

Avance 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.