«Танчики» на HTML5

Разные виды врагов и бонусы

Игра почти готова, но не хватает ещё парочки нюансов)

Сразу смотрим результат, а я пока распишу, что же тут происходит

1. Я добавил разные типы врагов. Как и в оригинале, это базовые, быстроходные и бронированные. Последние плюсом ко всему имеют бронебойные патроны.

2. Я добавил новый вид бонуса: «Строитель». Поднимая мастерок игрок может построить несколько бетонных и несколько кирпичных блоков. Именно для баланса этого бонуса и введены вражеские танки, которые могут уничтожать в том числе и бетонные стены.

Давайте смотреть

    export class Bonus {
    /**
     * По всему коду натыкал как можно больше комментов, чтоб понятно было куда собака зарыта
     *
     * @param {number} x - Логическая координата X
     * @param {number} y - Логическая координата Y
     * @param {string} type - Тип бонуса (BonusType.STAR, BonusType.GRENADE, etc.)
     */
    constructor(x, y, type) {
        this.x = x;
        this.y = y;
        this.type = type;

        // Время жизни бонуса
        this.lifetime = Duration.BONUS_LIFETIME;
        this.blinkTime = Duration.BONUS_BLINK_TIME;

        // Состояние
        this.collected = false;
        this.expired = false;

        // Анимация
        this.animationFrame = 0;
        this.animationTimer = 0;
        this.animationSpeed = 6; // Кадров игры между сменой кадра анимации

        // Мигание перед исчезновением
        this.blinkTimer = 0;
        this.blinkSpeed = 4; // Быстрое мигание
        this.visible = true;
    }

    /**
     * Обновление состояния бонуса
     */
    update() {
        if (this.collected || this.expired) return;

        // Уменьшаем время жизни
        this.lifetime--;

        // Проверка истечения времени
        if (this.lifetime <= 0) {
            this.expired = true;
            return;
        }

        // Анимация спрайта
        this.animationTimer++;
        if (this.animationTimer >= this.animationSpeed) {
            this.animationTimer = 0;
            this.animationFrame = (this.animationFrame + 1) % BONUS_SPRITE.frameCount;
        }

        // Мигание перед исчезновением
        if (this.lifetime <= (Duration.BONUS_LIFETIME - this.blinkTime)) {
            this.blinkTimer++;
            if (this.blinkTimer >= this.blinkSpeed) {
                this.blinkTimer = 0;
                this.visible = !this.visible;
            }
        }
    }

    /**
     * Сбор бонуса игроком
     */
    collect() {
        this.collected = true;
    }

    /**
     * Проверка, истёк ли бонус
     */
    isExpired() {
        return this.expired || this.collected;
    }

    /**
     * Получить bounding box в логических координатах
     */
    getBounds() {
        return {
            x: this.x,
            y: this.y,
            width: BONUS_SIZE,
            height: BONUS_SIZE
        };
    }

    /**
     * Отрисовка бонуса
     */
    render() {
        if (this.collected || this.expired) return;
        if (!this.visible) return; // Мигание

        const ctx = foregroundCtx;

        // Конвертация логических координат в физические
        const px = GAME_FIELD_X + this.x * GAME_SCALE;
        const py = GAME_FIELD_Y + this.y * GAME_SCALE;
        const size = BONUS_SIZE * GAME_SCALE;

        const sprite = getBonusSprite(this.type);

        if (sprite) {
            const frameX = this.animationFrame * BONUS_SPRITE.frameWidth;

            ctx.drawImage(
                sprite,
                frameX, 0,
                BONUS_SPRITE.frameWidth, BONUS_SPRITE.frameHeight,
                px, py,
                size, size
            );
        } else {
            // Fallback: цветной квадрат
            this.renderFallback(ctx, px, py, size);
        }
    }

    /**
     * Fallback отрисовка (цветной квадрат с буквой)
     */
    renderFallback(ctx, px, py, size) {
        // Цвета для разных типов бонусов
        const colors = {
            [BonusType.STAR]: '#FFFF00',
            [BonusType.GRENADE]: '#FF4500',
            [BonusType.TIMER]: '#00BFFF',
            [BonusType.SHOVEL]: '#8B4513',
            [BonusType.TANK]: '#00FF00',
            [BonusType.HELMET]: '#C0C0C0',
            [BonusType.GUN]: '#FF00FF',
            [BonusType.BUILDER]: '#334455'
        };

        const letters = {
            [BonusType.STAR]: 'S',
            [BonusType.GRENADE]: 'G',
            [BonusType.TIMER]: 'T',
            [BonusType.SHOVEL]: 'L',
            [BonusType.TANK]: '+',
            [BonusType.HELMET]: 'H',
            [BonusType.GUN]: 'P',
            [BonusType.BUILDER]: 'B'
        };

        ctx.fillStyle = colors[this.type] || '#FFFFFF';
        ctx.fillRect(px + 2, py + 2, size - 4, size - 4);

        ctx.fillStyle = '#000000';
        ctx.font = `bold ${size * 0.6}px Arial`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        ctx.fillText(letters[this.type] || '?', px + size / 2, py + size / 2);
    }
}

Где и как учитываются бонусы?

Во-первый в main.js я сразу создаю бонус для строительства

    // DEBUG: Тестовый бонус Builder рядом с игроком
    const testBonus = new Bonus(PLAYER_SPAWN_POINT.x + 32, PLAYER_SPAWN_POINT.y - 32, BonusType.BUILDER);
    bonuses.push(testBonus);

Это сделано для тестов, но, возможно, я даже оставлю в конечном варианте

Дальше в кор геймплее

    const collectedBonus = checkTankBonusCollision(player, bonuses);
        if (collectedBonus) {
            applyBonusEffect(collectedBonus);
        }
// И дальше по коду сам метод
function applyBonusEffect(bonus) {
    switch (bonus.type) {
        case BonusType.STAR:
            // Апгрейд оружия (до уровня 3 максимум)
            if (player && player.bulletLevel < 3) {
                player.bulletLevel++;
                // Уровень 1+ даёт 2 пули
                if (player.bulletLevel >= 1) {
                    player.bulletCount = 2;
                }
            }
            break;

        case BonusType.GUN:
            // Мгновенный максимальный апгрейд
            if (player) {
                player.bulletLevel = 3;
                player.bulletCount = 2;
            }
            break;

        case BonusType.TANK:
            // Дополнительная жизнь
            playerLives++;
            break;

        case BonusType.HELMET:
            // Временная неуязвимость
            if (player) {
                player.hasShield = true;
                player.shieldDuration = Duration.EFFECT_SHIELD;
            }
            break;

        case BonusType.TIMER:
            // Заморозка врагов
            freezeTimer = Duration.EFFECT_TIMER;
            break;

        case BonusType.GRENADE:
            // Уничтожение всех врагов на экране
            for (const enemy of enemies) {
                if (!enemy.destroyed) {
                    enemy.destroyed = true;
                    // Создаём взрывы
                    const centerX = enemy.x + TANK_SIZE / 2;
                    const centerY = enemy.y + TANK_SIZE / 2;
                    effects.push(createBigExplosion(centerX, centerY));
                }
            }
            break;

        case BonusType.SHOVEL:
            // Укрепление базы
            shovelTimer = Duration.EFFECT_SHOVEL;
            fortifyBase();
            break;

        case BonusType.BUILDER:
            // Режим строителя: даёт блоки для размещения
            if (player) {
                player.builderBricks += 8;
                player.builderSteel += 4;
            }
            break;
    }

    bonus.collect();
}

Далее все таймеры эффекты глобальные сбрасываются вот тут

    function updateGlobalEffects() {
    // Таймер заморозки
    if (freezeTimer > 0) {
        freezeTimer--;
    }

    // Таймер укрепления базы
    if (shovelTimer > 0) {
        shovelTimer--;
        if (shovelTimer <= 0 && baseFortified) {
            restoreBase();
        }
    }
}

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

Следующий этап уже не про новые фичи, а про полировку, оптимизацию и доработку.

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

---

Всем хороших игр!

Клон Divinity на Unity

Выпуск 8 | Диалоги

«Танчики» на HTML5

Состояния игры и графика

Изначально этим этапом должны были быть только состояния (начало пауза, геймовер), но так как два из трёх состояний я сделал ещё в прошлом этапе, то тут я добавил паузу, заготовку для главного меню и решил, что этого мало и перешёл сразу к следующему этапу, а именно замена временных квадратов на спрайты. Я решил не использовать то, что выдаёт там интернет, но постарался сам нарисовать близко по стилистике

По спецификациям спрайтов: сделал по два кадра на все танки, чтоб сделать анимацию гусениц. три кадра на воду. остальные по одному кадру

Вообще вот столько спрайтшитов отрисовал:

Результат сейчас выглядит вот так

Для водички отдельная функция появилась:

    export function updateWaterAnimation() {
  waterAnimationFrame = (waterAnimationFrame + 1) % WATER_SPRITE.frameCount;
}
//Ну и в рисовании фона вода теперь принимает непосредственное участие в отрисовки фона
renderBackground(gameMap, getWaterAnimationFrame());
//И внутри рендера ещё добавлен фолбек, чтобы в случае чего рисовать квадратики, как раньше.
//Чтоб не получилось что и-за какой-то ошибки на экране будет пустой квадрат
// Попробуем отрисовать спрайт
      const spriteDrawn = renderTileSprite(
        ctx, tileId, x, y, px, py, size,
        gameMap, wallsSprite, waterSprite, forestIceSprite, waterFrame
      );

      // Если спрайт не нарисован - fallback на цветной квадрат
      if (!spriteDrawn) {
        renderTileFallback(ctx, tileDef, x, y, px, py, size, gameMap);
      }

Конфигурация эффектов так же содержит фолбэк

    /**
 * Конфигурация эффектов
 */
const EFFECT_CONFIG = {
    [EffectType.EXPLOSION_SMALL]: {
        maxFrames: EXPLOSION_SMALL_SPRITE.frameCount,  // 3 кадра
        frameTime: 3,  // 3 игровых кадра на кадр анимации (100ms при 30 FPS)
        size: TANK_SIZE,  // 16x16
        colors: ['#FFFF00', '#FFA500', '#FF4500']  // Fallback: Жёлтый → оранжевый → красный
    },
    [EffectType.EXPLOSION_BIG]: {
        maxFrames: EXPLOSION_BIG_SPRITE.frameCount,  // 4 кадра
        frameTime: 3,
        size: TANK_SIZE,  // 16x16
        colors: ['#FFFFFF', '#FFFF00', '#FFA500', '#FF4500']  // Fallback
    },
    [EffectType.SPAWN]: {
        maxFrames: SPAWN_SPRITE.frameCount,  // 5 кадров
        frameTime: 4,
        size: TANK_SIZE,  // 16x16
        colors: ['#FFFFFF', '#AAAAAA', '#FFFFFF', '#AAAAAA', '#FFFFFF']  // Fallback: Мигание
    }
};

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

Дальше по состояниям. В main.js появился метод и много его вызовов:

    if (uiActions.pause) {
        setState(GameState.PAUSED);
}
export function setState(newState) {
    if (currentState === newState) return;

    const oldState = currentState;
    console.log(`State: ${oldState} -> ${newState}`);
    currentState = newState;
    stateTimer = 0;

    // Вызываем callback если установлен
    if (onStateChangeCallback) {
        onStateChangeCallback(newState, oldState);
    }
}

export function setOnStateChange(callback) {
    onStateChangeCallback = callback;
}

// Последний метод вызывается один раз при инициализации:
setOnStateChange(handleStateChange);

function handleStateChange(newState, oldState) {
  // При переходе из STAGE_COMPLETE в STAGE_INTRO (по таймеру) — инициализируем уровень
  if (oldState === GameState.STAGE_COMPLETE && newState === GameState.STAGE_INTRO) {
    initializeLevel(getCurrentStage());
  }
}
// это нам пригодится в будущем

План действий

Клон Divinity на Unity

Выпуск 7 | Перетаскивание объектов

«Танчики» на HTML5

Уничтожение базы

Что сделано и как.

Ну во-первых появилась сущность Базы

    class Base {
    constructor(x, y, gameMap = null) {
        this.x = x;
        this.y = y;
        this.width = BASE_SIZE;
        this.height = BASE_SIZE;

        // Состояние
        this.destroyed = false;

        // Временная защита бетоном (бонус "лопата")
        this.fortified = false;
        this.fortifyTimeLeft = 0;

        // Ссылка на карту
        this.gameMap = gameMap;
    }
}

Там на самом деле много служебных методов, типа рендера и получить границы. Но их сюда не пихаю, так как там ничего интересного. Есть ещё метод takeDamage, который просто удаляет визуальное отображение базы с экрана и помечает базу как уничтоженную.

В main.js появились такие нюансы:

    for (const bullet of bullets) {
    if (!bullet.active) continue;

    bullet.update(gameMap, allTanks);

    // Создаём эффекты при попадании
    if (bullet.hitResult === 'base') {
      // Попадание в базу - большой взрыв и мгновенный Game Over
      if (base && !base.destroyed) {
        const baseCenterX = base.x + base.width / 2;
        const baseCenterY = base.y + base.height / 2;
        effects.push(createBigExplosion(baseCenterX, baseCenterY));

        base.takeDamage();
        gameOver = true;
      }
    } else if (bullet.hitResult === 'tank' && bullet.hitTarget) {
      // Попадание в танк - большой взрыв в центре танка
      ...
    } else if (bullet.hitResult === 'wall') {
      // Попадание в стену - маленький взрыв в позиции пули
      ...
    }
  }
//Не очень мне нравится это, скорее всего на финальном этапе полировки, перепишу

Внутри "коллизии" появился новый метод

    export function checkBulletBaseCollision(bullet, base) {
    if (!base || base.destroyed) return false;

    const bulletBox = {
        x: bullet.x,
        y: bullet.y,
        width: BULLET_SIZE,
        height: BULLET_SIZE
    };
    const baseBox = base.getBounds();

    return checkAABBCollision(bulletBox, baseBox);
}

В оригинальной игре квадратики справа от игрового поля показывали, сколько танков ещё должно родиться, я решил сделать, чтоб отображалось сколько танков ещё осталось убить для завершения уровня. Ну а сам спавн сделан вот таким образом:

    function updateEnemySpawn() {
    // Не спавним если игра окончена или уровень пройден
    if (gameOver || stageComplete) return;

    // Не спавним если больше нет врагов
    if (enemiesRemaining <= 0) return;

    // Не спавним если на экране максимум врагов
    if (enemies.length >= SpawnSettings.MAX_ON_SCREEN) return;

    // Уменьшаем таймер
    spawnCooldown--;

    // Если таймер истёк - спавним врага
    if (spawnCooldown <= 0) {
        // Получаем текущую точку спавна
        const spawnPoint = ENEMY_SPAWN_POINTS[spawnPointIndex];

        // Спавним врага
        spawnEnemy(spawnPoint.x, spawnPoint.y);

        // Уменьшаем счётчик оставшихся врагов
        enemiesRemaining--;

        // Переключаемся на следующую точку (по кругу)
        spawnPointIndex = (spawnPointIndex + 1) % ENEMY_SPAWN_POINTS.length;

        // Сбрасываем таймер
        spawnCooldown = SpawnSettings.SPAWN_COOLDOWN;

        // Обновляем ссылки на танки
        updateAllTanksReferences();
    }
}

Я, честно признаться, не помню как там оно было на дэнди, поэтому решил, что начиная с этого этапа уже не буду пытаться повторить танки какими они были на самом деле, а буду делать такими, какими я их помню/вижу в своей голове. Так что тут могут начаться расхождения с каноном. Но, учитывая, что я в итоге собираюсь сделать с игрой, это меньшее зло))

Клон Divinity на Unity

Выпуск 6 | Взаимодействие с объектами и инвентарь

«Танчики» на HTML5

Уничтожение врагов

Что ж. Намеченный план был выполнен полностью.

Было три итерации, сначала сделал так, чтоб танки могли крошить всех (в том числе и враги уничтожали друг друга).

Потом я запретил им убивать друг друга, а на третьем этапе ещё добавил взаимоуничтожение снарядов игрока и врага при попадании.

Давайте посмотрим, что там по коду интересного и не очень.

Из нового: появился файлик effects.js, который отвечает за всякие красивости, из самого заметного: взрывы)

    const EFFECT_CONFIG = {
    [EffectType.EXPLOSION_SMALL]: {
        maxFrames: 3,
        frameTime: 3,  // 3 игровых кадра на кадр анимации (100ms при 30 FPS)
        size: BULLET_SIZE * 2,
        colors: ['#FFFF00', '#FFA500', '#FF4500']  // Жёлтый → оранжевый → красный
    },
    [EffectType.EXPLOSION_BIG]: {
        maxFrames: 5,
        frameTime: 3,
        size: TANK_SIZE * 1.5,
        colors: ['#FFFFFF', '#FFFF00', '#FFA500', '#FF4500', '#8B0000']  // Белый → жёлтый → оранжевый → красный → тёмно-красный
    },
    [EffectType.SPAWN]: {
        maxFrames: 4,
        frameTime: 4,
        size: TANK_SIZE,
        colors: ['#FFFFFF', '#888888', '#FFFFFF', '#888888']  // Мигание
    }
};

И сам класс эффекта:

    export class Effect {
    /**
     * @param {number} x - Логическая координата X (центр эффекта)
     * @param {number} y - Логическая координата Y (центр эффекта)
     * @param {string} type - Тип эффекта (EffectType)
     */
    constructor(x, y, type = EffectType.EXPLOSION_SMALL) {
        this.x = x;
        this.y = y;
        this.type = type;

        // Получаем конфигурацию для этого типа эффекта
        const config = EFFECT_CONFIG[type] || EFFECT_CONFIG[EffectType.EXPLOSION_SMALL];

        this.maxFrames = config.maxFrames;
        this.frameTime = config.frameTime;
        this.size = config.size;
        this.colors = config.colors;

        // Состояние анимации
        this.frame = 0;
        this.age = 0;
    }

    /**
     * Обновление состояния эффекта
     * @param {number} dt - Время кадра (не используется при fixed timestep)
     */
    update(dt) {
        this.age++;

        // Переход к следующему кадру анимации
        if (this.age >= this.frameTime) {
            this.frame++;
            this.age = 0;
        }
    }

    /**
     * Проверка завершения анимации
     * @returns {boolean} true если анимация закончилась
     */
    isDone() {
        return this.frame >= this.maxFrames;
    }

    /**
     * Отрисовка эффекта
     */
    render() {
        if (this.isDone()) return;

        const ctx = foregroundCtx;

        // Конвертация логических координат в физические
        const px = GAME_FIELD_X + this.x * GAME_SCALE;
        const py = GAME_FIELD_Y + this.y * GAME_SCALE;

        // Размер эффекта меняется в зависимости от кадра
        const progress = this.frame / (this.maxFrames - 1);
        const currentSize = this.size * GAME_SCALE * (0.5 + progress * 0.5);

        // Цвет из массива цветов
        const colorIndex = Math.min(this.frame, this.colors.length - 1);
        const color = this.colors[colorIndex];

        // Рисуем взрыв как круг
        ctx.beginPath();
        ctx.arc(px, py, currentSize / 2, 0, Math.PI * 2);
        ctx.fillStyle = color;
        ctx.fill();

        // Внутренний круг (ядро взрыва)
        if (this.type === EffectType.EXPLOSION_BIG && this.frame < this.maxFrames - 1) {
            ctx.beginPath();
            ctx.arc(px, py, currentSize / 4, 0, Math.PI * 2);
            ctx.fillStyle = '#FFFFFF';
            ctx.fill();
        }
    }
}

Часть этого кода перепишется, когда я переведу игру на спрайты, оставив только смену кадров и "возраст", а все остальные визуальности удалив.

В файле коллизий появилась ещё пара новых методов:

    export function checkBulletTankCollision(bullet, tanks) {
    const bulletBox = {
        x: bullet.x,
        y: bullet.y,
        width: BULLET_SIZE,
        height: BULLET_SIZE
    };

    // Определяем, является ли владелец пули врагом
    const ownerIsEnemy = bullet.owner && bullet.owner.type !== TankType.PLAYER;

    for (const tank of tanks) {
        // Пропускаем владельца пули и уничтоженных
        if (tank === bullet.owner || tank.destroyed) continue;

        // Вражеские пули пролетают сквозь других врагов (как в оригинале)
        if (ownerIsEnemy && tank.type !== TankType.PLAYER) continue;

        const tankBox = tank.getBounds();
        if (checkAABBCollision(bulletBox, tankBox)) {
            return tank; // Попадание в танк
        }
    }

    return null;
}

export function checkBulletBulletCollisions(bullets) {
    const collisions = [];

    for (let i = 0; i < bullets.length; i++) {
        const bullet1 = bullets[i];
        if (!bullet1.active) continue;

        const box1 = {
            x: bullet1.x,
            y: bullet1.y,
            width: BULLET_SIZE,
            height: BULLET_SIZE
        };

        // Определяем, принадлежит ли пуля игроку
        const isPlayer1 = bullet1.owner && bullet1.owner.type === TankType.PLAYER;

        for (let j = i + 1; j < bullets.length; j++) {
            const bullet2 = bullets[j];
            if (!bullet2.active) continue;

            const isPlayer2 = bullet2.owner && bullet2.owner.type === TankType.PLAYER;

            // Сталкиваются только пули разных команд (игрок vs враг)
            if (isPlayer1 === isPlayer2) continue;

            const box2 = {
                x: bullet2.x,
                y: bullet2.y,
                width: BULLET_SIZE,
                height: BULLET_SIZE
            };

            if (checkAABBCollision(box1, box2)) {
                collisions.push({ bullet1, bullet2 });
            }
        }
    }

    return collisions;
}

В целом, тут можно было бы выбрать и иные решения, коллизия и методы их проверки могли бы стать более универсальными, как это сделано, скажем, в Unity. Навесить на все объекты box collider'ы и просто проверять их столкновения без отдельных методов (проверить ТанкТанк, проверить ТанкПуля, проверить ПуляПуля). В таком случае логичнее было бы добавить возможность делать коллизии триггерными, для отработки логики уже внутри самих объектов. Но в таком случае для такой простой игры значительно усложнилась бы архитектура. Поэтому в жертву универсальности я пошёл по более прямолинейному пути.

План на следующий этап:

---

Всем хороших игр!

Клон Divinity На Unity

Выпуск 5 | Инвентарь

«Танчики» на HTML5

Примитивный ИИ врагов

Всем причастных с праздником!

Я тут вспомнил, что в прошлом посте забыл добавить планы на будущее. Планами было: добавить врагов.

Соответственно: точки спавна, их перемещение по карте, стрельба.

Давайте посмотрим на результат.

Появился новый класс, отвечающий за поведение врагов

    export class EnemyAI {
    constructor(tank) {
        this.tank = tank;

        // Таймер смены направления
        this.changeDirectionTimer = 0;
        this.changeDirectionInterval = 60; // ~2 сек при 30 FPS

        // Cooldown стрельбы
        this.shootCooldown = 0;
        this.shootInterval = 30; // ~1 сек при 30 FPS

        // Флаг застревания (для смены направления при коллизии)
        this.wasBlocked = false;
    }

    randomDirection() {
        const directions = [Direction.UP, Direction.RIGHT, Direction.DOWN, Direction.LEFT];
        return directions[Math.floor(Math.random() * 4)];
    }

    update(allTanks, gameMap, bullets) {
        const tank = this.tank;

        if (tank.destroyed) return;

        // === 1. Логика смены направления ===
        this.changeDirectionTimer++;

        // Смена направления по таймеру
        if (this.changeDirectionTimer >= this.changeDirectionInterval) {
            tank.direction = this.randomDirection();
            this.changeDirectionTimer = 0;
            // Рандомизируем интервал (40-80 кадров)
            this.changeDirectionInterval = 40 + Math.floor(Math.random() * 40);
        }

        // === 2. Попытка движения ===
        const prevX = tank.x;
        const prevY = tank.y;

        tank.move(tank.direction);

        // Проверка: застрял ли танк (не сдвинулся)
        const stuck = (tank.x === prevX && tank.y === prevY && !tank.moving);

        if (stuck && !this.wasBlocked) {
            // Танк только что застрял — меняем направление
            tank.direction = this.randomDirection();
            this.wasBlocked = true;
            this.changeDirectionTimer = 0;
        } else if (!stuck) {
            this.wasBlocked = false;
        }

        // === 3. Автоматическая стрельба ===
        this.shootCooldown--;

        if (this.shootCooldown <= 0 && tank.canShoot()) {
            const bullet = tank.shoot();
            if (bullet) {
                bullets.push(bullet);
                // Рандомизируем cooldown (20-50 кадров)
                this.shootCooldown = 20 + Math.floor(Math.random() * 30);
            }
        }
    }
}

Он простой как три рубля, так что, думаю, можно обойтись без объяснений (тем более что комментариев в коде и так предостаточно).

К файле main появились коллекции врагов и их "мозгов"

    /** @type {Array<Tank>} */
let enemies = [];

/** @type {Array<EnemyAI>} */
let enemyAIs = [];

Спавн врагов при старте игры

    spawnEnemy(0, 0);           // Левый угол
spawnEnemy(12 * 8, 0);      // Центр (96px)
spawnEnemy(24 * 8 - 16, 0); // Правый угол (176px, учитываем размер танка)
// Пока спавню сразу все три, а не по очереди, как в оригинале
function spawnEnemy(x, y) {
    const enemy = new Tank(x, y, TankType.ENEMY_BASIC);
    enemy.direction = Direction.DOWN; // Враги всегда смотрят вниз
    enemy.setMap(gameMap);

    // Создаём AI для врага
    const ai = new EnemyAI(enemy);

    enemies.push(enemy);
    enemyAIs.push(ai);

    console.log(`Enemy spawned at (${x}, ${y})`);
}

И рисуем это

    for (const enemy of enemies) {
    if (!enemy.destroyed) {
      enemy.render();
    }
  }

Там ещё есть обновление ссылок чтоб чистить из памяти уничтоженные танки, но в целом ничего больше интересного.

Оптимистичный план на следующий этап вот такой:

Всем хороших игр!

Клон Divinity на Unity

Выпуск 4 | Прототип Локации