Теория

Холст и фигуры

Холст — это картинка из пикселей

Для игр в браузере есть элемент <canvas> — прямоугольник пикселей, на котором рисуют из JavaScript. В отличие от обычных элементов страницы, на холсте нет «объектов»: нарисовал прямоугольник — и это просто раскрашенные пиксели. Чтобы что-то сдвинуть, кадр стирают и рисуют заново. Именно так работают почти все 2D-игры.

<canvas id="game" width="400" height="300"></canvas>

Размер холста задают атрибутами width и height — это размер в пикселях. (Если растянуть холст через CSS, картинка просто масштабируется и станет размытой.)

Контекст рисования

Рисуют не на самом элементе, а через его контекст — объект со всеми командами рисования:

const canvas = document.querySelector("#game");
const ctx = canvas.getContext("2d");

ctx — короткое и общепринятое имя. Дальше все команды вызываются у него.

Координаты

Начало координат (0, 0) — левый верхний угол холста. x растёт вправо, y — вниз (не вверх, как в школьной математике!). Правый нижний пиксель холста 400×300 — (399, 299).

(0,0) ──────────► x
  │
  │      • (100, 50)
  ▼
  y

Прямоугольники и цвет

ctx.fillStyle = "orange";           // цвет заливки для следующих фигур
ctx.fillRect(20, 30, 120, 80);      // x, y, ширина, высота — закрашенный

ctx.strokeStyle = "#1e88e5";        // цвет линий
ctx.lineWidth = 4;                  // толщина линий
ctx.strokeRect(200, 30, 120, 80);   // только рамка

ctx.clearRect(0, 0, canvas.width, canvas.height);   // стереть всё (прозрачные пиксели)

Цвет можно задать как в CSS: имя "red", "#ff0000", "rgb(255, 0, 0)", с прозрачностью "rgba(0, 0, 0, 0.5)". fillStyle действует на все следующие фигуры, пока его не сменят — забыл поменять цвет, и всё рисуется прежним.

Линии и пути

Сложные фигуры рисуют путём: начинают путь, ведут «перо», а потом обводят или заливают:

ctx.beginPath();
ctx.moveTo(50, 250);     // поставить перо, не рисуя
ctx.lineTo(150, 150);    // провести линию
ctx.lineTo(250, 250);
ctx.closePath();         // замкнуть к началу — получился треугольник
ctx.fillStyle = "green";
ctx.fill();              // залить
ctx.stroke();            // и обвести

beginPath() важен: без него новая фигура «приклеится» к старому пути, и при fill() перекрасится всё сразу.

Круги

Круг — это дуга arc(x, y, радиус, начальныйУгол, конечныйУгол). Углы в радианах: полный круг — Math.PI * 2.

ctx.beginPath();
ctx.arc(300, 200, 40, 0, Math.PI * 2);
ctx.fillStyle = "gold";
ctx.fill();

x, y у круга — это центр, а у прямоугольника — левый верхний угол. Это частая путаница в столкновениях, вернёмся к ней позже.

Текст

ctx.font = "24px sans-serif";
ctx.fillStyle = "black";
ctx.fillText("Счёт: 120", 10, 30);    // x, y — левый край базовой линии текста
ctx.textAlign = "center";             // теперь x — середина текста
ctx.fillText("GAME OVER", canvas.width / 2, 150);

Порядок важен

Холст — как бумага: то, что нарисовано позже, закрывает нарисованное раньше. Поэтому каждый кадр игры рисуют от дальнего к ближнему: фон → объекты → интерфейс (счёт, жизни).

Проверка цвета пикселя

Узнать цвет пикселя можно через getImageData: он возвращает массив [красный, зелёный, синий, прозрачность], каждое от 0 до 255. Так проверяются задачи этого курса:

const [r, g, b, a] = ctx.getImageData(100, 70, 1, 1).data;
console.log(r, g, b, a);   // 255 0 0 255 — непрозрачный красный

Прозрачный (ещё не закрашенный) пиксель — 0 0 0 0.

Итог

canvas.getContext("2d") — контекст с командами рисования.
(0, 0) — левый верхний угол, y растёт вниз.
fillStyle + fillRect, strokeStyle + strokeRect, clearRect — стереть.
Пути: beginPath → moveTo / lineTo / arc → fill / stroke.
Нарисованное позже лежит сверху; кадр игры — стереть и нарисовать всё заново.