C# WPF игра: Дизайн и расстановка объектов (Урок 2)

Интерфейс среды разработки

При первом открытии программы интерфейс может показаться сложным из-за большого количества окон. Рассмотрим основные элементы:

Панель элементов: содержит различные виджеты и объекты, которые можно перетаскивать на основную страницу для формирования дизайна.
Конструктор: разделён на две части: визуальное представление дизайна окна (формируется через панель элементов или код) и область для написания кода (XAML и C#). XAML-код описывает дизайн, а C#-код – логику и функциональность.
Обозреватель решений: отображает иерархию элементов проекта.

Добавление изображений в проект

Добавим в проект папку для хранения изображений:

Щёлкните правой кнопкой мыши по названию проекта.
Выберите «Добавить» -> «Новая папка».
Назовите папку images.

Перетащите подготовленное изображение (картинка с едой) в проект. В свойствах изображения убедитесь, что тип установлен как Resource. Это позволит легко подключать картинку через код.

Дизайн игры (XAML)

Дизайн проекта будет простым. Большинство элементов будут генерироваться через код. В XAML-коде опишем:

Основное окно (Window): уже существует по умолчанию.
Canvas: объект для рисования. Добавим ему ID GameCanvas, установим чёрный фон (Background="Black") и Focusable="True" для управления фокусом.

Пример XAML-кода:

<Window ...>
  <Canvas x_Name="GameCanvas" Background="Black" Focusable="True"/>
</Window>

Логика игры (C#)

Опишем функциональность игры в C#-коде.

Создание полей

Создадим поля для хранения параметров игры:

SnakeSquareSize (константа int): размер квадрата, представляющего змейку (значение по умолчанию – 20).
SnakeColor (SolidColorBrush): цвет змейки (зелёный).
FoodColor (SolidColorBrush): цвет еды (красный).
SnakeHead (Rectangle): объект, представляющий голову змейки.
FoodPosition (Point): координаты еды.

Пример C#-кода:

private const int SnakeSquareSize = 20;
private readonly SolidColorBrush SnakeColor = Brushes.Green;
private readonly SolidColorBrush FoodColor = Brushes.Red;
private Rectangle SnakeHead;
private Point FoodPosition;

Создание сегмента змейки

Создадим функцию CreateSnakeSegment, которая создаёт прямоугольник (сегмент змейки) с заданными координатами:

private Rectangle CreateSnakeSegment(Point position)
{
    return new Rectangle
    {
        Width = SnakeSquareSize,
        Height = SnakeSquareSize,
        Fill = SnakeColor
    };
}

Добавление сегмента змейки на Canvas:

GameCanvas.Children.Add(SnakeHead);
Canvas.SetLeft(SnakeHead, position.X * SnakeSquareSize);
Canvas.SetTop(SnakeHead, position.Y * SnakeSquareSize);

Размещение еды

Создадим функцию PlaceFood для случайного размещения еды на игровом поле:

private static readonly Random RandomPositionFood = new Random();

private void PlaceFood()
{
    int maxX = (int)(GameCanvas.ActualWidth / SnakeSquareSize);
    int maxY = (int)(GameCanvas.ActualHeight / SnakeSquareSize);
    int foodX = RandomPositionFood.Next(maxX);
    int foodY = RandomPositionFood.Next(maxY);
    FoodPosition = new Point(foodX, foodY);
    // ... создание и добавление изображения еды на Canvas ...
}

Использование события Loaded для Canvas

Чтобы гарантировать, что еда размещается после загрузки Canvas, подпишемся на событие Loaded:

GameCanvas.Loaded += GameCanvasLoaded;

private void GameCanvasLoaded(object sender, RoutedEventArgs e)
{
    PlaceFood();
}

Отображение изображения еды

Заменим отображение еды красным квадратом на изображение:

private void PlaceFood()
{
    // ... (код для вычисления координат еды) ...
    Image foodImage = new Image
    {
        Width = SnakeSquareSize,
        Height = SnakeSquareSize,
        Source = new BitmapImage(new Uri("pack://application:,,,/images/food.png")) // Замените на путь к вашему изображению
    };
    GameCanvas.Children.Add(foodImage);
    Canvas.SetLeft(foodImage, FoodPosition.X * SnakeSquareSize);
    Canvas.SetTop(foodImage, FoodPosition.Y * SnakeSquareSize);
}

В этом уроке мы выполнили базовую расстановку объектов на игровом поле. В следующих уроках мы добавим динамику и реализуем игровой процесс.