Разработка Pac-Man на ванильном JavaScript: ностальгия, «Пиксели» и механика тумана войны

1. Пролог: когда кино пробуждает ностальгию

В процессе подготовки материала о «Тетрисе» в моей памяти всплыли не только падающие тетрамино, но и другой легендарный символ гейминга — желтый сектор, неустанно ускользающий от разноцветных фантомов. Вспомнилась и лента «Пиксели» (2015) с ее специфическим юмором. Там есть момент, где создатель Pac-Man, Тору Иватани, пытается по-отцовски вразумить свое гигантское творение: 

«Пакман, я твой создатель. Я понимаю, как ты голоден. Но хватит разрушений. Будь хорошим мальчиком», — произносит герой Дениса Акиямы (в роли Тору Иватани).

Ответ Пакмана был лаконичен — он просто лишил своего «родителя» руки.

Эта сцена подтолкнула меня к мысли: а почему бы не реализовать собственную версию Pac-Man? Мой проект задумывался куда более миролюбивым. Успех с «Тетрисом» раззадорил интерес, и захотелось развить навыки на примере еще одной классики.

Даже если вы пропустили «Пиксели», суть ясна: это легкое развлекательное кино, пропитанное тоской по эпохе восьмибитных героев. Просмотр таких фильмов наводит на размышления о том, что старые игры стали неотъемлемой частью нашего культурного кода.

Образы Пакмана, захватчиков из Space Invaders и Донки Конга не уходят в небытие. Они остаются в памяти как символы детства, где мерилом успеха было количество набранных очков. Впрочем, если вдуматься, с годами изменились лишь декорации, а стремление к достижению целей осталось прежним.

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

---

2. Истоки легенды: как желтый персонаж покорил планету

История началась в 1980 году. Молодой дизайнер Тору Иватани создал проект, ставший иконой индустрии. Легенда гласит, что очертания персонажа родились во время ланча, когда Иватани отрезал кусок пиццы. Его целью было создать игру, которая привлекла бы в залы аркадных автоматов не только мужскую аудиторию, но и женщин.

Любопытен факт трансформации названия. Изначально игра именовалась Puck Man — от японского звукоподражания «паку-паку» (движение рта). Однако для американского рынка название изменили на Pac-Man: маркетологи опасались, что вандалы легко превратят букву «P» в «F», превратив название в нечто нецензурное.

Разработка игр часто берет начало с игры слов. Я начал с набросков в блокноте. В то время индустрия была переполнена агрессивными «стрелялками» и военными симуляторами. Не хватало проектов для широкой аудитории, особенно для прекрасного пола. Я стремился создать нечто забавное и дружелюбное.

История с пиццей — моя любимая: будучи очень голодным, я заказал целую пиццу, и оставшаяся часть круга без одного ломтика стала прообразом героя, — делился воспоминаниями Иватани (источник).

Расчет оказался верным. Пакман превратился в культурный феномен, породив шквал мерчандайза и мультсериалов. А в 2010 году мир увидел первый интерактивный дудл от Google, приуроченный к юбилею игры.

---

3. Авторская интерпретация: Пакман и «туман войны»

Вдохновившись классикой, я решил не ограничиваться простым копированием. Чтобы выделить проект, я внедрил механику «тумана войны», характерную для стратегий. Это добавило игровому процессу напряжения и новизны.

3.1. Задачи и миссия

Моей целью не было создание безупречного с точки зрения архитектуры кода. Скорее, это творческий эксперимент, попытка воссоздать атмосферу прошлого и обсудить с коллегами нюансы реализации искусственного интеллекта противников и логику завершения уровней.

В приоритете стояли плавность анимации, корректная обработка коллизий и специфический визуальный эффект, ограничивающий обзор игрока. Кажется, задумка удалась.

Проект доступен в открытом доступе на GitHub. Это промежуточная итерация, впереди — расширение функционала, но изучить структуру и предложить улучшения можно уже сейчас.

3.2. Технологический стек

Я придерживался минимализма, используя стандартные возможности современных браузеров:

• HTML — каркас игрового поля, интерфейс и элементы управления.

• CSS — визуальные эффекты, динамические трансформации и свечение.

• JavaScript — движок игры и вся управляющая логика.

Файловая структура выглядит так:

├── index.html               # Точка входа и верстка
├── style.css                # Стилизация и анимационные эффекты
├── game-constants.js        # Глобальные параметры (скорость, карта)
├── game.js                  # Сердце игры: логика героя
├── ghosts.js                # Алгоритмы поведения призраков
└── controls.js              # Обработка ввода (клавиатура и тач)

3.3. Архитектура лабиринта

Игровое пространство представлено двумерным массивом, где каждый символ кодирует определенный объект:

const MAZE = [
  "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  "X...o..X................o......X",
  "XX.XX.XXX.XXX.XXX.XXXXXX.XXXX.XX",
  // формирование сетки продолжается...
];

Условные обозначения:

• X — непроходимый блок (стена).

• . — стандартная точка.

• o — бонусный энерджайзер.

• B, P, I, C — стартовые позиции призраков.

Сетка построена на ячейках 15×15 пикселей, что упрощает расчет координат путем простого умножения индекса на размер шага.

3.4. Механика перемещения и коллизий

Перед каждым сдвигом объекта система анализирует возможность маневра, чтобы исключить прохождение сквозь стены.

За это отвечает компактная функция проверки соседних ячеек:

function canMoveInDirection(dir, row, col) {
    if (dir === 0) return col + 1 < MAZE_COLS && MAZE[row][col + 1] !== 'X';
    if (dir === 1) return col - 1 >= 0 && MAZE[row][col - 1] !== 'X';
    if (dir === 2) return row - 1 >= 0 && MAZE[row - 1][col] !== 'X';
    if (dir === 3) return row + 1 < MAZE_ROWS && MAZE[row + 1][col] !== 'X';
    return false;
}

Эта простая логика гарантирует, что Пакман будет следовать строго по коридорам лабиринта.

3.5. Ограниченная видимость: эффект погружения

Ключевое отличие моей версии — отсутствие полного обзора карты. Игрок видит лишь ближайшее окружение в радиусе шести клеток.

Реализация строится на динамическом изменении прозрачности элементов в зависимости от их дистанции до Пакмена:

function updateVisibility() {
    const allCells = [walls, dots, energizers];
    
    for (let t = 0; t < allCells.length; t++) {
        for (let i = 0; i < allCells[t].length; i++) {
            const cell = allCells[t][i];
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);
            const distance = Math.max(Math.abs(row - gridPosition.row), 
                                      Math.abs(col - gridPosition.col));
            
            if (distance <= VISIBLE_RADIUS) {
                cell.style.opacity = '1';
                cell.style.filter="none";
            } else {
                const opacity = Math.max(0.1, 1 - (distance - VISIBLE_RADIUS) * 0.2);
                cell.style.opacity = opacity;
                cell.style.filter="brightness(0.5)";
            }
        }
    }
}

Такой подход создает атмосферу неизвестности и заставляет игрока быть осторожнее, ведь угроза может скрываться за ближайшим поворотом.

3.6. Плавность движения

Для отрисовки используется метод requestAnimationFrame, обеспечивающий стабильную частоту кадров.

position.x += MOVE_SPEED * deltaTime;
if (position.x >= targetX) {
    position.x = targetX;
    // фиксация в целевой точке
}
pacman.style.left = position.x + 'px';

Ориентация спрайта меняется через CSS-трансформации, привязанные к направлению движения:

[data-direction="0"] { transform: scaleX(1) rotate(0deg); }  // вправо
[data-direction="1"] { transform: scaleX(-1) rotate(0deg); } // влево
[data-direction="2"] { transform: rotate(-90deg); }          // вверх
[data-direction="3"] { transform: rotate(90deg); }           // вниз

3.7. Интеллект противников

Я постарался воспроизвести уникальные паттерны поведения четверки призраков:

• Blinky (красный) — агрессивный преследователь, идущий по пятам.

• Pinky (розовый) — стратег, пытающийся перехватить игрока на опережение.

• Inky (голубой) — непредсказуемый тактик, чей маршрут зависит от позиций других участников.

• Clyde (оранжевый) — колеблется между атакой и отступлением в свой угол.

Циклы поведения сменяются по расписанию:

const MODE_TIMINGS = [
  { mode: 'scatter', duration: 7 },
  { mode: 'chase', duration: 20 },
  // ... последовательная смена фаз
  { mode: 'chase', duration: Infinity } 
];

В состоянии испуга (после поедания энерджайзера) призраки меняют цвет и стремятся избежать контакта, становясь уязвимыми для игрока.

3.8. Универсальное управление

Игра адаптирована под разные устройства: реализована поддержка клавиатуры (стрелки, WASD) и экранный джойстик для мобильных платформ.

const keyMap = {
  'w': 2, 's': 3, 'a': 1, 'd': 0,
  'arrowup': 2, 'arrowdown': 3, 'arrowleft': 1, 'arrowright': 0
};

---

4. Резюме и планы

4.1. Достигнутый результат

В итоге получилась рабочая браузерная версия Pac-Man с самобытной механикой видимости.

Опробовать игру можно по ссылке.

Игрок начинает путь в углу лабиринта, погруженного во мрак, в то время как призраки покидают центр и начинают свою охоту.

4.2. Дальнейшее развитие и вопросы к аудитории

Проект не завершен, и я открыт для предложений. Весь исходный код доступен на GitHub — форкайте, изучайте, предлагайте свои идеи.

Базовая механика отлажена, но игре не хватает разнообразия на поздних этапах. Простое повторение уровней с ускорением — классика, но сегодня этого кажется недостаточно.

Как насчет процедурной генерации лабиринтов? Или введения новых типов противников с иммунитетом к бонусам?

Буду признателен за любые свежие идеи в комментариях. Если найдете технические огрехи или предложите интересную фичу — это обязательно найдет отражение в будущих обновлениях. Возможно, стоит добавить тематические «пасхалки» из фильма «Пиксели»?

© 2026 ООО «МТ ФИНАНС»

 

Источник