Урок 2. Первый герой: рисуем и двигаем квадрат

УЧЕБНИК КУРСА: «PYTHON ЧЕРЕЗ СОЗДАНИЕ ИГР»

УРОК 2. Первый герой: рисуем и двигаем квадрат

Время на изучение: 1.5-2 часа (включая практику и домашнее задание)

ЦЕЛИ УРОКА

После изучения этой главы ты сможешь:

• Понимать разницу между типами данных int (числа) и str (текст).

• Использовать переменные для хранения характеристик игрока (позиция, скорость, цвет).

• Разбираться в системе координат экрана (почему Y растёт вниз).

• Нарисовать прямоугольник (игрока) на экране.

• Заставить игрока двигаться автоматически.

• Подготовить код к управлению с клавиатуры (на следующем уроке).

СВЯЗЬ С ПРОШЛЫМ УРОКОМ

💡 НАПОМИНАНИЕ: Если ты пропустил Урок 1 или что-то забыл — открой предыдущую главу учебника. Особенно раздел про игровой цикл и переменные.

2.1. ВВЕДЕНИЕ: ОТ ОКНА К ИГРЕ

Привет! В прошлый раз ты создал игровое окно — прямоугольник, который открывается и закрывается. Это как построить театральную сцену: занавес, свет, декорации готовы.

Но где же актёры?

Сцена без актёров — это просто помещение. Игра без героя — это просто окно.

Задачи второго урока: Добавить на сцену главного героя. Пока это будет простой квадрат, но уже на этом этапе ты научишься:

1. Рисовать объекты.

2. Хранить их характеристики в переменных.

3. Двигать их по экрану.

К концу урока у тебя будет анимация: квадрат перемещается по экрану самостоятельно. А на Уроке 3 ты добавишь управление с клавиатуры!

2.2. ПОДГОТОВКА ПРОЕКТА

Не начинай с нуля! Мы будем развивать код из Главы 1.

Шаг 1. Создай копию файла

1. Открой папку Lesson1 в VS Code.

2. Найди файл main.py.

3. Нажми на него правой кнопкой мыши → Copy (Копировать).

4. Нажми правой кнопкой на пустое место → Paste (Вставить).

5. Переименуй новый файл в main.py (если спросит — замени старый) ИЛИ создай новую папку Lesson2 и скопируй файл туда.

ПРАВИЛО БЕЗОПАСНОСТИ: Всегда сохраняй рабочую версию кода перед внесением изменений. Называй копию main_backup.py.

Шаг 2. Проверь запуск

1. Открой main.py в VS Code.

2. Нажми F5 или кнопку ▶️.

3. Убедись, что окно открывается и закрывается без ошибок.

Если что-то не работает — вернись к Главе 1, раздел «Частые ошибки».

2.3. ТИПЫ ДАННЫХ: ЧИСЛА И ТЕКСТ

В Главе 1 мы использовали переменные, но не говорили о типах данных. Пора это исправить.

Что такое тип данных?

Компьютер должен понимать, что именно хранится в переменной. От этого зависит, что можно делать с этой переменной.

Пример в коде:

# int - целые числа
player_x = 100
player_speed = 5

# str - строки (всегда в кавычках!)
player_name = "Hero"
game_title = "Моя Игра"

# float - дробные числа
gravity = 9.8

# bool - истина/ложь
is_alive = True

Важное правило:

# ПРАВИЛЬНО:
name = "Alex"      # Текст в кавычках
age = 12           # Число без кавычек

# НЕПРАВИЛЬНО:
name = Alex        # Ошибка! Компьютер подумает, что Alex это какая-то другая переменная
age = "12"         # Работает, но это текст, а не число (нельзя умножать)

💡 ЗАПОМНИ: Если хочешь хранить текст — используй кавычки. Если число — не используй кавычки.

2.4. СИСТЕМА КООРДИНАТ: ГДЕ НАХОДИТСЯ ИГРОК?

В математике ты привык, что ось Y в системе координат идёт вверх. В играх всё наоборот!

Почему так?

Это исторически сложилось в компьютерной графике. Память экрана заполняется сверху вниз, строка за строкой. Поэтому (0, 0) — это начало памяти, то есть верхний левый угол.

2.5. РИСУЕМ ПЕРВОГО ИГРОКА

Добавим квадрат в наше окно. Для этого используем функцию pygame.draw.rect().

Код игрока:

Открой main.py и найди место после screen.fill(COLOR) и до pygame.display.flip().

Добавь эти строки:

# ------- НАСТРОЙКИ ИГРОКА -------
player_x = 100              # Позиция по X
player_y = 100              # Позиция по Y
player_width = 50           # Ширина квадрата
player_height = 50          # Высота квадрата
player_color = (255, 0, 0)  # Красный цвет (RGB)
player_speed = 5            # Скорость движения (пикселей за кадр)
# --------------------------------

# ... (код внутри цикла while) ...

    # Закрашивание экрана цветом
    screen.fill(COLOR)
    
    # === РИСУЕМ ИГРОКА ===
    player_rect = pygame.Rect(player_x, player_y, player_width, player_height)
    pygame.draw.rect(screen, player_color, player_rect)
    # =====================
    
    # Обновление экрана (показываем новый кадр)
    pygame.display.flip()

Разбор кода:

Небольшое задание:

1. Измени player_color на (0, 255, 0) — квадрат станет зелёным.

2. Измени player_width на 100 — квадрат станет шире.

3. Измени player_x на 400 — квадрат сместится вправо.

Запусти код после каждого изменения! Так ты почувствуешь, как переменные влияют на результат.

2.6. ДВИЖЕНИЕ: ЗАСТАВЛЯЕМ КВАДРАТ ДВИГАТЬСЯ

Пока квадрат стоит на месте. Добавим движение!

Логика движения:

Чтобы объект двигался, нужно менять его координаты каждый кадр.

player_x = player_x + player_speed

Это читается как: «Возьми текущий player_x, прибавь к нему player_speed, и положи результат обратно в player_x».

Добавляем движение в код:

Вставь эту строку перед отрисовкой игрока (но после screen.fill(COLOR)):

    # Закрашивание экрана цветом
    screen.fill(COLOR)
    
    # === ОБНОВЛЯЕМ ПОЗИЦИЮ ===
    player_x = player_x + player_speed
    # =========================
    
    # === РИСУЕМ ИГРОКА ===
    player_rect = pygame.Rect(player_x, player_y, player_width, player_height)
    pygame.draw.rect(screen, player_color, player_rect)
    # =====================
    
    # Обновление экрана
    pygame.display.flip()

Что произойдёт:

• Каждый кадр (60 раз в секунду) player_x увеличивается на 5.

• Квадрат движется вправо.

• Когда достигнет края экрана — исчезнет! (потому что уйдёт за пределы видимой области)

Проблема: квадрат улетает за экран

Это нормально для этого урока. На Уроке 3 мы добавим проверку границ и возврат игрока.

2.7. ПОЛНЫЙ КОД УРОКА 2

Скопируй этот код, если что-то не работает:

import pygame
import sys

# ------- НАСТРОЙКИ ИГРЫ -------
WIDTH = 800
HEIGHT = 600
TITLE = "Моя Первая Игра"
COLOR = (135, 206, 235)
# ------------------------------

# ------- НАСТРОЙКИ ИГРОКА -------
player_x = 100
player_y = 100
player_width = 50
player_height = 50
player_color = (255, 0, 0)
player_speed = 5
# --------------------------------

# Инициализация движка
pygame.init()
screen = pygame.display.set_mode((WIDTH, HEIGHT))
pygame.display.set_caption(TITLE)

# Игровой цикл
running = True
while running:
    # Проверка событий
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            running = False
    
    # Закрашивание экрана
    screen.fill(COLOR)
    
    # Обновление позиции игрока
    player_x = player_x + player_speed
    
    # Рисуем игрока
    player_rect = pygame.Rect(player_x, player_y, player_width, player_height)
    pygame.draw.rect(screen, player_color, player_rect)
    
    # Обновление экрана
    pygame.display.flip()

# Завершение работы
pygame.quit()
sys.exit()

2.8. ПРАКТИЧЕСКИЕ ЗАДАНИЯ

Выполни эти задания, чтобы закрепить материал.

Задание 1. «Дизайнер»

• Измени player_color на синий (0, 0, 255).

• Измени player_width и player_height на 80.

• Вопрос: Что будет, если сделать ширину 0? Попробуй!

Задание 2. «Гонщик»

• Измени player_speed на 10.

• Запусти игру — квадрат движется быстрее.

• Измени player_speed на -5.

• Вопрос: Куда движется квадрат теперь? Почему?

Задание 3. «Стартовая позиция»

• Измени player_x на 400 (центр экрана по горизонтали).

• Измени player_y на 300 (центр экрана по вертикали).

• Вопрос: Почему квадрат не ровно в центре? (Подсказка: учти размер квадрата!)

Задание 4. «Двойной игрок» (для продвинутых)

• Создай второго игрока с переменными player2_x, player2_y, player2_color.

• Нарисуй второй квадрат другим цветом.

• Запусти — оба квадрата движутся!

2.9. ДОМАШНЕЕ ЗАДАНИЕ

Как сдать:

1. Сделай скриншот окна с движущимся квадратом:

   • Windows: Win + Shift + S

   • Mac: Command + Shift + 4

2. Сохрани файл как Lesson2_ТвоёИмя.png.

3. Отправь файл в чат группы.

4. Если возникла ошибка — сделай скриншот текста ошибки и отправь с вопросом.

🏆 БОНУС: Если выполнишь Задание 4 («Двойной игрок») — получишь +3 балла сверх нормы!

2.10. ПРОВЕРЬ СЕБЯ

Ответь на вопросы перед выполнением ДЗ.

1. Какой тип данных у переменной player_speed = 5?

2. Где находится точка (0, 0) на игровом экране?

3. Что означает player_x = player_x + 1?

4. В какую сторону движется квадрат при player_speed = -3?

5. Что будет, если убрать screen.fill(COLOR)?

Нажми, чтобы увидеть ответы

1. int (целое число)

2. В левом верхнем углу

3. Увеличить позицию игрока на 1 пиксель вправо

4. Влево (X уменьшается)

5. На экране останется «шлейф» от предыдущих кадров

2.11. ЧАСТЫЕ ОШИБКИ И ИХ РЕШЕНИЕ

2.12. ГЛОССАРИЙ ГЛАВЫ

Тип данных (Data Type) — категория значения (число, текст, истина/ложь).

int (integer) — целое число (5, 100, -3).

str (string) — строка текста ("Привет", "Hero"). Всегда в кавычках.

Координаты (Coordinates) — пара чисел (X, Y), определяющая позицию на экране.

pygame.Rect — объект прямоугольника (используется для отрисовки и столкновений).

pygame.draw.rect() — функция для рисования прямоугольника на экране.

Скорость (Speed) — насколько меняется позиция объекта за один кадр.

ЗАКЛЮЧЕНИЕ: ЧТО ДАЛЬШЕ?

Ты сделал это! Теперь у тебя есть:

• Игровое окно.

• Игрок (квадрат).

• Движение по экрану.

Но есть проблема: игрок движется сам по себе и улетает за экран. Ты не можешь им управлять.

В Главе 3 мы исправим это:

💡 СОВЕТ: Не удаляй файл main.py. Создай копию Lesson2_backup.py. В программировании всегда полезно иметь резервную версию рабочего кода!

До встречи на Уроке 3! Там начнётся настоящая магия — ты сможешь управлять игрой своими руками. 🎮

📌 ГЛАВНОЕ С УРОКА 2

1. Типы данных: Числа (int) без кавычек, текст (str) в кавычках.

2. Координаты: (0, 0) — левый верхний угол, Y растёт вниз.

3. Движение: Меняй координаты каждый кадр (x = x + speed).

4. Порядок в цикле: fill() → обновление позиции → отрисовка → flip().

Учебник подготовлен для курса «Python через создание игр».