WPF Графика — занятие 186. Игра «Щелкни по звезде»

📁 Шаг 0. Создаём проект в Visual Studio

1. Открой Visual Studio → нажми «Создать новый проект»

2. В строке поиска введи «WPF» → выбери «Приложение WPF» (C#) → нажми «Далее»

3. Назови проект «StarGame186» → выбери папку (например, Рабочий стол) → нажми «Создать»

4. Откроются два файла: MainWindow.xaml (дизайн) и MainWindow.xaml.cs (код).
Если их нет — открой в обозревателе решений (справа).

✅ Проект готов! Теперь будем добавлять графику.

⭐ Шаг 1. Рисуем звезду на Canvas

Что делаем: создаём Canvas и рисуем на нём звезду через Path.

1. Открой MainWindow.xaml (двойным кликом).

2. Удали всё, что там есть (весь код).

3. Вставь этот код целиком:

<Window x:Class="StarGame186.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Щелкни по звезде" Height="500" Width="700">
    <Grid>
        <Canvas x:Name="GameCanvas" Background="#f5f7fa" ClipToBounds="True">
            <Path x:Name="Star" Fill="gold" Stroke="#d48a00" StrokeThickness="2"
                  Data="M 50,0 L 65,30 L 100,30 L 70,50 L 80,90 L 50,65 L 20,90 L 30,50 L 0,30 L 35,30 Z" />
        </Canvas>
        <Label x:Name="ScoreLabel" Content="Счёт: 0" FontSize="24" FontWeight="Bold" 
               HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20" />
        <Button x:Name="RestartButton" Content="Заново" Width="120" Height="40"
                HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="20" Click="RestartButton_Click"/>
    </Grid>
</Window>
        

4. Нажми «Сохранить» (Ctrl+S).

5. Нажми «Запустить» (зелёная стрелка ▶️) — ты увидишь форму со звездой.

✔ Звезда готова! Но она пока не двигается и не реагирует на клик.

🌀 Шаг 2. Добавляем анимацию — звезда летает

1. В MainWindow.xaml добавь после Grid (перед закрывающим </Window>) такой блок:

<Window.Resources>
    <Storyboard x:Key="StarAnimation">
        <DoubleAnimation Storyboard.TargetName="Star" Storyboard.TargetProperty="(Canvas.Left)"
                         From="50" To="550" Duration="0:0:3" AutoReverse="True" RepeatBehavior="Forever" />
        <DoubleAnimation Storyboard.TargetName="Star" Storyboard.TargetProperty="(Canvas.Top)"
                         From="50" To="350" Duration="0:0:4" AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
</Window.Resources>
        

2. Запусти анимацию при старте. Для этого в MainWindow.xaml.cs (открой вкладку) добавь код:

using System.Windows;
using System.Windows.Media.Animation;

namespace StarGame186
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            // Запускаем анимацию при открытии окна
            Storyboard sb = (Storyboard)FindResource("StarAnimation");
            sb.Begin();
        }

        // Пока пусто — добавим позже
        private void RestartButton_Click(object sender, RoutedEventArgs e)
        {
            // Сброс игры
        }
    }
}
        

3. Запусти проект — звезда теперь двигается по экрану!

✔ Анимация работает! Следующий шаг — сделать так, чтобы по клику на звезду засчитывалось очко.

👆 Шаг 3. Добавляем реакцию на клик

1. Открой MainWindow.xaml. Внутри <Path> добавь MouseLeftButtonDown="Star_Click":

<Path x:Name="Star" Fill="gold" Stroke="#d48a00" StrokeThickness="2"
      MouseLeftButtonDown="Star_Click"
      Data="M 50,0 L 65,30 L 100,30 L 70,50 L 80,90 L 50,65 L 20,90 L 30,50 L 0,30 L 35,30 Z" />
        

2. Теперь в MainWindow.xaml.cs добавь метод Star_Click и счёт:

private int score = 0;

private void Star_Click(object sender, RoutedEventArgs e)
{
    score++;
    ScoreLabel.Content = "Счёт: " + score.ToString();
}
        

3. Запусти — кликай по звезде, счёт растёт!

✔ Уже почти игра. Осталось добавить «перезапуск» и сделать звезду «убегающей» (менять направление).

🔄 Шаг 4. Добавляем кнопку «Заново» и немного сложности

1. В MainWindow.xaml.cs замени код на полностью рабочий:

using System.Windows;
using System.Windows.Media.Animation;

namespace StarGame186
{
    public partial class MainWindow : Window
    {
        private int score = 0;
        private Storyboard starAnim;

        public MainWindow()
        {
            InitializeComponent();
            starAnim = (Storyboard)FindResource("StarAnimation");
            starAnim.Begin();
        }

        private void Star_Click(object sender, RoutedEventArgs e)
        {
            score++;
            ScoreLabel.Content = "Счёт: " + score.ToString();
            // При каждом клике звезда чуть ускоряется (для интереса)
            foreach (var anim in starAnim.Children)
            {
                if (anim is DoubleAnimation da)
                {
                    da.Duration = TimeSpan.FromSeconds(da.Duration.TimeSpan.TotalSeconds * 0.95);
                }
            }
            starAnim.Begin();
        }

        private void RestartButton_Click(object sender, RoutedEventArgs e)
        {
            score = 0;
            ScoreLabel.Content = "Счёт: 0";
            // Сбрасываем анимацию на начальную скорость
            starAnim.Stop();
            starAnim = (Storyboard)FindResource("StarAnimation");
            starAnim.Begin();
        }
    }
}
        

2. Запусти — теперь при каждом клике звезда движется быстрее. А кнопка «Заново» сбрасывает всё.

✂️ Шаг 5. Добавляем Clip — обрезаем звезду по кругу

1. В MainWindow.xaml измени <Path>, добавив обрезку:

<Path x:Name="Star" Fill="gold" Stroke="#d48a00" StrokeThickness="2"
      MouseLeftButtonDown="Star_Click"
      Data="M 50,0 L 65,30 L 100,30 L 70,50 L 80,90 L 50,65 L 20,90 L 30,50 L 0,30 L 35,30 Z">
    <Path.Clip>
        <EllipseGeometry Center="50,45" RadiusX="40" RadiusY="40" />
    </Path.Clip>
</Path>
        

2. Запусти — теперь звезда обрезана по кругу. Круто, правда?

🌀 Шаг 6. Добавляем вращение звезды (Transform)

1. В MainWindow.xaml добавь внутри <Path>:

<Path.RenderTransform>
    <RotateTransform x:Name="StarRotation" Angle="0" CenterX="50" CenterY="45" />
</Path.RenderTransform>
        

2. В MainWindow.xaml.cs внутри Star_Click добавь вращение:

private void Star_Click(object sender, RoutedEventArgs e)
{
    score++;
    ScoreLabel.Content = "Счёт: " + score.ToString();
    // Поворот на 30 градусов при клике
    StarRotation.Angle += 30;
    // Ускорение анимации (как раньше)
    foreach (var anim in starAnim.Children)
    {
        if (anim is DoubleAnimation da)
        {
            da.Duration = TimeSpan.FromSeconds(da.Duration.TimeSpan.TotalSeconds * 0.95);
        }
    }
    starAnim.Begin();
}
        

3. Запусти — при клике звезда поворачивается!

🎯 Итоговое задание на две пары

Ты уже сделал почти готовую игру «Щелкни по звезде».

Теперь доделай её по пунктам (каждый пункт — это +1 балл к оценке).

Добавь вторую звезду (или другую фигуру — круг, треугольник) которая тоже двигается. При клике на неё — добавляется 2 очка.
Сделай так, чтобы звезда меняла цвет при каждом клике (используй Fill и ColorAnimation или просто Random).
Добавь таймер — если за 10 секунд не кликнул по звезде, игра заканчивается (выводится сообщение).
Используй Clip для другой фигуры (например, обрежь круг по форме звезды).
Сделай кнопку «Пауза» — останавливает анимацию и счёт.

📌 Как сдать: Принеси папку проекта StarGame186 (целиком) на следующем занятии. В коде должны быть комментарии — что делает каждая часть.

📋 Шпаргалка — если что-то забыл

🖥️ XAML

Canvas — контейнер для рисования
Path — сложная фигура (Data = путь)
Rectangle / Ellipse / Line
Clip — обрезка
RenderTransform — поворот, масштаб
Storyboard — анимация

🧑‍💻 C#

FindResource("имя") — найти анимацию
Begin() — запустить анимацию
MouseLeftButtonDown — клик мыши
DispatcherTimer — таймер
Random — случайные числа

⭐ WPF Графика занятие 186