Урок 2

Квадрат на сетке

Что ты увидишь Один зелёный квадрат на тёмном фоне. Файл: step2_square.py

🔍 Сначала разберёмся: клетки и пиксели

Экран измеряется в пикселях — крошечных точках. Но думать об игре в пикселях неудобно. Поэтому мы делим поле на клетки, как тетрадь в клеточку. Одна клетка у нас 20 пикселей:

CELL = 20          # размер одной клетки
COLS = 30          # 30 клеток в ширину
ROWS = 20          # 20 клеток в высоту

Змейка «думает» в клетках: квадрат стоит в клетке (5, 10) — это колонка 5, строка 10. А рисовать надо в пикселях. Чтобы перевести клетку в пиксели — умножаем на размер клетки:

клетка (0, 0) → пиксель (0, 0) клетка (1, 0) → пиксель (20, 0) ← 1 × 20 клетка (5, 10) → пиксель (100, 200) ← 5 × 20 и 10 × 20

💡 Запомни это навсегда Клетки — для логики игры. Пиксели — для рисования. Мостик между ними — умножение на CELL.

🔮 Сначала подумай, потом запусти В коде ниже x = 5, y = 10, а клетка — 20 пикселей. В какой точке экрана окажется левый край квадрата? Посчитай в уме (x * CELL), скажи ответ вслух — потом запусти и проверь.

📝 Код урока (только новое)

# Координаты квадрата В КЛЕТКАХ (не в пикселях!)
x = 5
y = 10

while True:
    # ... события и screen.fill(BLACK) как в уроке 1 ...

    # Превращаем клетки в пиксели: умножаем на размер клетки
    rect = pygame.Rect(x * CELL, y * CELL, CELL, CELL)
    pygame.draw.rect(screen, GREEN, rect)

    pygame.display.flip()
    clock.tick(60)

🔍 Что такое Rect

Rect (от английского rectangle — прямоугольник) — это рамка, которая говорит pygame где и какого размера нарисовать квадрат. У неё ровно четыре числа:

pygame.Rect(  x,        y,        ширина,  высота )
pygame.Rect( x*CELL,   y*CELL,   CELL,    CELL  )

Число	Что значит	Для клетки (5, 10)
`x * CELL`	левый край в пикселях	5 × 20 = 100
`y * CELL`	верхний край в пикселях	10 × 20 = 200
`CELL`	ширина	20
`CELL`	высота	20

А рисует квадрат уже следующая строка:

pygame.draw.rect(screen, GREEN, rect)
#            куда     цвет   рамка

🎮 Попробуй сам 1. Поставь квадрат в угол: x = 0, y = 0.
2. Поставь в правый нижний угол. Подсказка: последняя колонка — это COLS - 1, последняя строка — ROWS - 1.
3. Сделай клетку крупнее: CELL = 40. Что изменилось?

🧠 Проверь себя

Выбери ответ. Ошибёшься — 30 секунд на то, чтобы вернуться в урок и перечитать.

Как перевести клетку в пиксели?

✅ Клетка (5, 10) — это пиксели (5*CELL, 10*CELL). Мостик между клетками и пикселями — умножение.

Для чего клетки, а для чего пиксели?

✅ Змейка «думает» в клетках, а рисуем в пикселях. Запомни это навсегда.