Exercício - Blazor

5 minutos

Neste exercício, criamos um projeto Blazor e começamos a construir um aplicativo que se torna um jogo "Connect Four" ao longo do módulo.

Criar um novo projeto Blazor

Primeiro, vamos criar um novo projeto para o nosso jogo usando o Visual Studio 2022.

Crie um novo aplicativo Blazor no Visual Studio 2022 escolhendo o menu Arquivo > Novo > Projeto .
Escolha "Blazor Web App" na lista de modelos e nomeie-o ConnectFour. Selecione Seguinte.
Escolha .NET 8 para a versão do framework. O tipo de autenticação deve ser definido como Nenhum, o modo de renderização interativo deve ser definido como Servidor e o local de interatividade deve ser definido como Por página/componente. Deixe todas as outras opções como padrão.

Esta ação deve criar um diretório ConnectFour contendo nosso aplicativo.
Execute o aplicativo pressionando F5 no Visual Studio 2022.

Agora você deve ver o aplicativo Blazor em execução no seu navegador:

Parabéns! Você criou seu primeiro aplicativo Blazor!

Criar um componente de placa

Em seguida, vamos criar um componente de tabuleiro de jogo para ser usado pelos jogadores em nosso jogo. O componente é definido usando a sintaxe Razor, que é uma mistura de HTML e C#.

Clique com o botão direito do mouse na pasta componentes no Gerenciador de Soluções do Visual Studio. Escolha Adicionar > componente Razor no menu de contexto e nomeie o arquivo Board.razor.

Usamos esse componente para armazenar tudo o que é necessário para o layout do tabuleiro de jogo e gerenciar as interações com ele. O conteúdo inicial deste novo componente é uma h3 tag e um @code bloco indicando onde o código C# deve ser escrito:
```
<h3>Board</h3>

@code {

}
```
Prepare a Home página abrindo o arquivo Components/Pages/Home.razor e limpando tudo após a terceira linha com a tag 'PageTitle''.
```
@page "/"

<PageTitle>Home</PageTitle>
```
Adicione nosso Board componente à Home página adicionando uma <Board /> tag que corresponde ao nome do arquivo do nosso novo componente.
```
@page "/"

<PageTitle>Index</PageTitle>
<Board />
```
Para ver as alterações, execute o aplicativo com F5. Se o aplicativo já estiver em execução, toque no botão Hot Reload ao lado do botão Executar/Continuar para aplicar as alterações ao aplicativo em execução.

Gorjeta

Selecione a opção Hot Reload on File Save no menu Hot Reload para aplicar alterações ao aplicativo em execução sempre que você alterar um arquivo.

Parabéns! Você construiu seu primeiro componente e o usou em uma página Blazor.

Adicionar conteúdo e estilo ao tabuleiro de jogo

Vamos começar a definir um tabuleiro de jogo com as sete colunas e seis linhas. Em seguida, adicione um pouco de estilo para dar vida à nossa prancha.

No arquivo Board.razor, remova o HTML na parte superior e adicione o seguinte conteúdo para definir um tabuleiro com 42 lugares para peças de jogo.

Podemos usar um loop C# for para gerar as 42 posições da placa. A etiqueta do recipiente span é recolhida e repetida com o seu conteúdo 42 vezes para representar a nossa placa.
```
<div>
   <div class="board">
      @for (var i = 0; i < 42; i++)
      {
         <span class="container">
            <span></span>
         </span>
      }
   </div>
</div>
```

Quando salvamos o componente do painel, nosso aplicativo é atualizado e ele aparece como uma página vazia, graças à funcionalidade Hot Reload que recria e inicia o aplicativo atualizado.

Nota

Você pode ser solicitado pelo Visual Studio para reiniciar seu aplicativo à medida que os arquivos são alterados. Confirme se o aplicativo deve ser reconstruído em edições de código e o aplicativo será reiniciado e atualizado automaticamente o navegador à medida que você adicionar recursos.

Estilizando o componente

Vamos adicionar algum estilo ao Board componente, definindo algumas cores para o quadro do tabuleiro e os jogadores acima da primeira div tag no arquivo Board.razor :

<HeadContent>
    <style>
        :root {
            --board-bg: yellow;  /** the color of the board **/
            --player1: red;      /** Player 1's piece color **/
            --player2: blue;     /** Player 2's piece color **/
        }
    </style>
</HeadContent>

Essas variáveis --board-bgCSS , --player1: red, --player2: blue são captadas e usadas no resto da nossa folha de estilo para este componente.

Em seguida, adicionamos uma folha de estilo completa para o jogo ao Board componente.

Clique com o botão direito do mouse no Gerenciador de Soluções na pasta Componentes e crie um novo arquivo CSS chamado Board.razor.css.

Copie o seguinte conteúdo para o novo arquivo Board.razor.css :

div{position:relative}nav{top:4em;width:30em;display:inline-flex;flex-direction:row;margin-left:10px}nav span{width:4em;text-align:center;cursor:pointer;font-size:1em}div.board{margin-top:1em;flex-wrap:wrap;width:30em;height:24em;overflow:hidden;display:inline-flex;flex-direction:row;flex-wrap:wrap;z-index:-5;row-gap:0;pointer-events:none;border-left:10px solid var(--board-bg)}span.container{width:4em;height:4em;margin:0;padding:4px;overflow:hidden;background-color:transparent;position:relative;z-index:-2;pointer-events:none}.container span{width:3.5em;height:3.5em;border-radius:50%;box-shadow:0 0 0 3em var(--board-bg);left:0;position:absolute;display:block;z-index:5;pointer-events:none}.player1,.player2{width:3.5em;height:3.5em;border-radius:50%;left:0;top:0;position:absolute;display:block;z-index:-8}.player1{background-color:var(--player1);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player1)}.player2{background-color:var(--player2);animation-timing-function:cubic-bezier(.5,.05,1,.5);animation-iteration-count:1;animation-fill-mode:forwards;box-shadow:0 0 0 4px var(--player2)}.col0{left:calc(0em + 9px)}.col1{left:calc(4em + 9px)}.col2{left:calc(8em + 9px)}.col3{left:calc(12em + 9px)}.col4{left:calc(16em + 9px)}.col5{left:calc(20em + 9px)}.col6{left:calc(24em + 9px)}.drop1{animation-duration:1s;animation-name:drop1}.drop2{animation-duration:1.5s;animation-name:drop2}.drop3{animation-duration:1.6s;animation-name:drop3}.drop4{animation-duration:1.7s;animation-name:drop4}.drop5{animation-duration:1.8s;animation-name:drop5}.drop6{animation-duration:1.9s;animation-name:drop6}@keyframes drop1{100%,75%,90%,97%{transform:translateY(1.27em)}80%{transform:translateY(.4em)}95%{transform:translateY(.8em)}99%{transform:translateY(1em)}}@keyframes drop2{100%,75%,90%,97%{transform:translateY(5.27em)}80%{transform:translateY(3.8em)}95%{transform:translateY(4.6em)}99%{transform:translateY(4.9em)}}@keyframes drop3{100%,75%,90%,97%{transform:translateY(9.27em)}80%{transform:translateY(7.2em)}95%{transform:translateY(8.3em)}99%{transform:translateY(8.8em)}}@keyframes drop4{100%,75%,90%,97%{transform:translateY(13.27em)}80%{transform:translateY(10.6em)}95%{transform:translateY(12em)}99%{transform:translateY(12.7em)}}@keyframes drop5{100%,75%,90%,97%{transform:translateY(17.27em)}80%{transform:translateY(14em)}95%{transform:translateY(15.7em)}99%{transform:translateY(16.5em)}}@keyframes drop6{100%,75%,90%,97%{transform:translateY(21.27em)}80%{transform:translateY(17.4em)}95%{transform:translateY(19.4em)}99%{transform:translateY(20.4em)}}

Aqui está uma seleção de alguns dos CSS usados para formatar o quadro e "punch holes" para cada um dos espaços. Há mais conteúdo disponível no arquivo CSS para as peças do jogo e suas animações na tela.

div.board {
    margin-top: 1em;
    flex-wrap: wrap;
    width: 30em;
    height: 24em;
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: -5;
    row-gap: 0;
    pointer-events: none;
    border-left: 10px solid var(--board-bg);
}

span.container {
    width: 4em;
    height: 4em;
    margin: 0;
    padding: 4px;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    z-index: -2;
    pointer-events: none;
}

.container span {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    box-shadow: 0 0 0 3em var(--board-bg);
    left: 0px;
    position: absolute;
    display: block;
    z-index: 5;
    pointer-events: none;
}

O navegador deve atualizar para você (se não, você pode atualizar manualmente o navegador com F5), e você deve ser recebido com uma placa amarela adequada Connect Four:

Screenshot de Yellow connect four board.

Parabéns, agora você tem o início do jogo. Em unidades posteriores, adicionamos lógica de jogo a ele.

Feedback

Esta página foi útil?