Cvičení – Blazor
V tomto cvičení vytvoříme projekt Blazor a začneme vytvářet aplikaci, která se v průběhu modulu stane hrou Připojit čtyři.
Vytvoření nového projektu Blazor
Nejprve vytvoříme nový projekt pro naši hru pomocí Visual Studio 2022.
V sadě Visual Studio 2022 vytvořte novou aplikaci Blazor tak, že zvolíte > soubor>.
V seznamu šablon zvolte Blazor Web App a pojmenujte ji ConnectFour. Vyberte Další.
Zvolte .NET 8 pro verzi rozhraní. Typ ověřování by měl být nastaven na Žádný, Režim interaktivního vykreslení by měl být nastaven na Server a Umístění interaktivity by mělo být nastaveno na na stránku/součást. Ponechte všechny ostatní možnosti jako výchozí.
Tato akce by měla vytvořit adresář ConnectFour obsahující naši aplikaci.
Spusťte aplikaci stisknutím klávesy F5 v sadě Visual Studio 2022.
Teď byste měli vidět aplikaci Blazor spuštěnou v prohlížeči:
Gratulujeme! Vytvořili jste svou první aplikaci Blazor!
Vytvoření komponenty panelu
V dalším kroku vytvoříme komponentu herní desky, kterou budou používat hráči v naší hře. Komponenta je definována pomocí syntaxe Razor, což je kombinace HTML a C#.
V Průzkumníku řešení sady Visual Studio klikněte pravým tlačítkem na složku Součásti . V místní nabídce zvolte Přidat > komponentu Razor a pojmenujte soubor Board.razor.
Tuto komponentu používáme k uložení všeho potřebného pro rozložení herní desky a správu interakcí s ní. Počáteční obsah této nové komponenty je
h3značka a@codeblok označující, kde se má zapsat kód jazyka C#:<h3>Board</h3> @code { }HomePřipravte stránku tak, že otevřete soubor Components/Pages/Home.razor a vymažete všechno za třetím řádkem se značkou PageTitle.@page "/" <PageTitle>Home</PageTitle>Přidejte na
Boardstránku našiHomekomponentu<Board />přidáním značky, která odpovídá názvu souboru naší nové komponenty.@page "/" <PageTitle>Index</PageTitle> <Board />Pokud chcete zobrazit změny, spusťte aplikaci pomocí klávesy F5. Pokud už aplikace běží, klepněte na tlačítko Opětovné načítání za provozu vedle tlačítka Spustit/Pokračovat, aby se změny použily u spuštěné aplikace.
Návod
V nabídce Opětovné načítání vyberte možnost Opětovné načtení při uložení souboru za provozu, abyste aplikovali změny na spuštěnou aplikaci pokaždé, když změníte soubor.
Gratulujeme! Vytvořili jste první komponentu a použili ji na stránce Blazor.
Přidání obsahu a stylu do herní desky
Začněme definovat herní desku se sedmi sloupci a šesti řádky. Pak přidejte trochu stylu, aby se naše tabule oživil.
V souboru Board.razor odeberte kód HTML v horní části a přidejte následující obsah, který definuje desku se 42 místy pro herní kousky.
K vygenerování 42 pozic desky můžeme použít smyčku C#
for. Značka kontejneruspanse vyzvedne a opakuje se s jejím obsahem 42krát, aby představovala naši desku.<div> <div class="board"> @for (var i = 0; i < 42; i++) { <span class="container"> <span></span> </span> } </div> </div>
Když komponentu panelu uložíme, aplikace se aktualizuje a zobrazí se jako prázdná stránka díky Opětovné načítání za provozu funkcím, které znovu sestaví a spustí aktualizovanou aplikaci.
Poznámka:
Visual Studio vás může vyzvat k restartování aplikace při změně souborů. Ověřte, že by aplikace měla být znovu sestavena při úpravách kódu a aplikace se při přidávání funkcí automaticky restartuje a aktualizuje prohlížeč.
Styling komponenty
Pojďme do komponenty Board přidat nějaký styl definováním barev pro rámec hrací plochy a hráče nad první značkou div v souboru 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>
Tyto proměnné CSS , --board-bg--player1: red jsou vyzvednuty a použity ve zbytku naší šablony --player2: bluestylů pro tuto komponentu.
V dalším kroku přidáme do Board komponenty dokončenou šablonu stylů pro hru.
Klikněte pravým tlačítkem do Průzkumníka řešení ve složce Součásti a vytvořte nový soubor CSS s názvem Board.razor.css.
Do nového souboru Board.razor.css zkopírujte následující obsah:
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)}}Tady je výběr některých šablon stylů CSS, které slouží k naformátování desky a "děrování otvorů" pro každou z mezer. V souboru CSS je k dispozici více obsahu pro herní části a jejich animace na obrazovce.
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; }
Prohlížeč by se měl aktualizovat za vás (pokud ne, můžete ručně aktualizovat prohlížeč pomocí klávesy F5) a měli byste mít pozdrav se správnou žlutou deskou Connect Four:
Blahopřejeme, teď máte začátek hry. V pozdějších lekcích do ní přidáme herní logiku.