Vytvoření herní plochy

Pro vytvoření naší hry SnakeWPF začneme vytvářením mapy. Bude to omezená oblast, v níž se musí had pohybovat - jakási jáma pro hady, kdybyste chtěli. Rozhodl jsem se, že má jáma pro hady by měla vypadat jako šachovnice, tvořená čtverci stejné velikosti, které budou mít stejné rozměry jako tělo hada. Mapu vytvoříme ve dvou iteracích: Některé části budou rozvrženy v XAML, protože je to jednoduché, zatímco pozadí čtverců budeme kreslit v Code-behind, protože je to opakující se a dynamické.

Herní plocha XAML

Začněme tedy s XAML - jednoduché okno s panelem Canvas uvnitř ovládacího prvku Border, abychom vytvořili omezenou oblast:

<Window x:Class="WpfTutorialSamples.Games.SnakeWPFSample"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    xmlns:local="clr-namespace:WpfTutorialSamples.Games"  
    mc:Ignorable="d"  
    Title="SnakeWPF - Score: 0" SizeToContent="WidthAndHeight">  
    <Border BorderBrush="Black" BorderThickness="5">  
    <Canvas Name="GameArea" ClipToBounds="True" Width="400" Height="400">  

    </Canvas>  
    </Border>  
</Window>

Naše hra nyní vypadá takto.

Používáme Canvas jako skutečnou herní oblast, protože nám umožní přidávat ovládací prvky, u kterých máme plnou kontrolu nad pozicemi. Toho využijeme později, ale prozatím si všimněte následujících věcí:

• Pro okno není definována žádná šířka/výška - místo toho jsme ji definovali pro Canvas, protože to je část, kterou potřebujeme plně kontrolovat. Poté se ujistíme, že okno si přizpůsobí svou velikost odpovídajícím způsobem nastavením vlastnosti SizeToContent na WidthAndHeight. Kdybychom místo toho definovali šířku/výšku pro okno, dostupný prostor uvnitř by závisel na tom, kolik okraje používá operační systém pro okna, což by mohlo záviset na motivech apod.
• Nastavíme vlastnost ClipToBounds na True pro Canvas - to je důležité, protože jinak by ovládací prvky, které přidáváme, mohly přesahovat hranice panelu Canvas.

Kreslení pozadí z Code-behind

Jak bylo zmíněno, chci pro herní oblast šachovnicové pozadí. Skládá se z mnoha čtverců, takže je jednodušší přidat jej z Code-behind (nebo použít obrázek, ale to není tak dynamické!). Musíme to udělat hned, jakmile jsou všechny ovládací prvky uvnitř okna inicializovány/vykresleny, a naštěstí pro nás má okno pro to událost: událost ContentRendered. K té se přihlásíme v deklaraci okna:

Title="SnakeWPF - Score: 0" SizeToContent="WidthAndHeight" ContentRendered="Window_ContentRendered"

Nyní přejděte do Code-behind a pojďme začít. Především potřebujeme definovat velikost, kterou budeme používat při kreslení hada, pozadí čtverců atd. To lze udělat na začátku vaší třídy Window:

public partial class SnakeWPFSample : Window
{
    const int SnakeSquareSize = 20;
    .....

Nyní, v naší události ContentRendered, zavoláme metodu DrawGameArea(), která odvede veškerou těžkou práci. Vypadá to takto:

private void Window_ContentRendered(object sender, EventArgs e)  
{  
    DrawGameArea();  
}  

private void DrawGameArea()  
{  
    bool doneDrawingBackground = false;  
    int nextX = 0, nextY = 0;  
    int rowCounter = 0;  
    bool nextIsOdd = false;  

    while(doneDrawingBackground == false)  
    {  
    Rectangle rect = new Rectangle  
    {  
        Width = SnakeSquareSize,  
        Height = SnakeSquareSize,  
        Fill = nextIsOdd ? Brushes.White : Brushes.Black  
    };          
    GameArea.Children.Add(rect);  
    Canvas.SetTop(rect, nextY);  
    Canvas.SetLeft(rect, nextX);  

    nextIsOdd = !nextIsOdd;  
    nextX += SnakeSquareSize;  
    if(nextX >= GameArea.ActualWidth)  
    {  
        nextX = 0;  
        nextY += SnakeSquareSize;  
        rowCounter++;  
        nextIsOdd = (rowCounter % 2 != 0);  
    }  

    if(nextY >= GameArea.ActualHeight)  
        doneDrawingBackground = true;  
    }  
}

Jak bylo dříve zmíněno, tyto články vyžadují trochu více znalostí C# než zbytek článků v tomto tutoriálu, takže nepůjdu přes každý řádek, ale zde je obecný popis toho, co děláme: Uvnitř while smyčky neustále vytváříme instance ovládacího prvku Rectangle a přidáváme jej na Canvas (GameArea). Vyplňujeme jej buď bílým nebo černým štětcem, a používáme naši konstantu SnakeSquareSize jako šířku i výšku, protože chceme, aby to byl čtverec. V každé iteraci používáme nextX a nextY k řízení, kdy přejít na další řádek (když dosáhneme pravé hranice) a kdy skončit (když současně dosáhneme spodní a pravé hranice).

Zde je výsledek:

Shrnutí

V tomto článku jsme definovali XAML používaný k hostování veškerého herního obsahu a "namalovali" jsme vzor šachovnice na herní oblast přidáním WPF ovládacích prvků Rectangle v černé a bílé barvě. Dalším krokem bude začít přidávat samotného hada, stejně jako jídlo, které bude jíst.