Створення ігрового поля

Щоб створити нашу гру SnakeWPF, ми почнемо зі створення карти. Це буде обмежена область, де змія повинна рухатися – зміїна яма, якщо хочете. Я вирішив, що моя зміїна яма має виглядати як шахова дошка, складена з квадратів однакового розміру, які матимуть ті ж розміри, що й тіло змії. Ми створимо карту у дві ітерації: частина її буде розміщена в XAML, оскільки це просто, тоді як фонові квадрати ми намалюємо в Code-behind, оскільки це повторювано та динамічно.

Ігрова область XAML

Отже, почнемо з XAML — простого вікна з панеллю Canvas всередині елемента керування Border, щоб створити обмежену область:

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

Наша гра зараз виглядає так:

Ми використовуємо Canvas як власне ігрову область, оскільки це дозволить нам додавати до неї елементи керування, де ми отримаємо повний контроль над позиціями. Ми використаємо це пізніше, а зараз зверніть увагу на наступне:

• Для вікна не визначено ширину/висоту — натомість ми визначили їх для полотна Canvas, оскільки саме цю частину нам потрібно повністю контролювати. Потім ми гарантуємо, що вікно відповідно налаштує свій розмір, встановивши властивість SizeToContent на WidthAndHeight. Якби ми натомість визначили ширину/висоту для вікна, доступний простір у ньому залежав би від того, яку рамку використовує операційна система для Windows, що може залежати від тем тощо.
• Ми встановлюємо властивість ClipsToBounds у значення True для Canvas – це важливо, оскільки інакше додані нами елементи керування змогли б розширюватися за межі панелі Canvas.

Малювання фону кодом у background

Як уже згадувалося, мені потрібен фон у вигляді шахової дошки для ігрової області. Він складається з багатьох квадратів, тому його легше додати з коду (або використати зображення, але це не так динамічно!). Нам потрібно зробити це, як тільки всі елементи керування всередині вікна будуть ініціалізовані/відрендерені, і, на щастя для нас, у вікні є подія для цього: подія ContentRendered. Ми підпишемося на неї в оголошенні вікна:

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

Тепер перейдемо до Code-behind і почнемо роботу. Перш за все, нам потрібно визначити розмір, який буде використовуватися для малювання змійки, клітинок фону тощо. Це можна зробити на початку класу вашого вікна (Window):

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

Тепер, у нашій події ContentRendered ми викличемо метод DrawGameArea(), який виконає всю важку роботу. Це виглядає так:

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;  
    }  
}

Як згадувалося раніше, ці статті вимагають трохи більше знань C#, ніж решта статей у цьому посібнику, тому я не буду розглядати кожен рядок окремо, але ось загальний опис того, що ми робимо: усередині циклу while ми безперервно створюємо екземпляри елемента керування Rectangle та додаємо його до Canvas (GameArea). Ми заповнюємо його білим або чорним пензлем, і він використовує нашу константу SnakeSquareSize як ширину, так і висоту, оскільки ми хочемо, щоб це був квадрат. На кожній ітерації ми використовуємо nextX та nextY, щоб контролювати, коли переходити до наступного рядка (коли ми досягаємо правої межі) та коли зупинятися (коли ми досягаємо нижньої ТА правої межі одночасно).

Ось результат:

Короткий зміст

У цій статті ми визначили XAML, який використовується для розміщення всього ігрового контенту, і "намалювали" шаховий візерунок на ігровій області, додавши до неї елементи керування WPF Rectangle чорно-білого кольору. Наступним кроком буде додавання самої змії, а також їжі, яку вона їстиме.