2.8: Головний файл гри

Що ми будемо робити?

У цьому підрозділі ми оновимо файл main.js, який буде головним файлом гри, що імпортує всі класи та запускає гру.

Оновлення main.js

Оновіть файл main.js:

/**
 * 🎮 Танчики - Урок 2: Малювання поля та танків
 * 
 * У цьому файлі ми запускаємо гру з:
 * - Ігровим полем та сіткою
 * - Танком гравця (жовтий квадрат)
 * - Ворожим танком (червоний квадрат)
 * - Стінами та перешкодами
 */

// Отримуємо Canvas елемент з HTML
// знаходимо Canvas по ID
const canvas = document.getElementById('gameCanvas');

// Отримуємо контекст для малювання (2D)
// отримуємо 2D контекст для малювання
const ctx = canvas.getContext('2d');

// Базові константи гри
const GAME_CONFIG = {
    // ширина Canvas в пікселях
    CANVAS_WIDTH: 800,
    // висота Canvas в пікселях
    CANVAS_HEIGHT: 600,
    // розмір однієї клітинки в пікселях
    TILE_SIZE: 32,
    // кількість кадрів за секунду
    FPS: 60
};

// Імпортуємо класи
// імпортуємо головний клас гри
import { Game } from './Game.js';
// імпортуємо клас логування
import { GameLogger } from './GameLogger.js';

// Створюємо екземпляри
// екземпляр гри (поки що не створений)
let game;
// екземпляр логера (поки що не створений)
let logger;

/**
 * Функція ініціалізації гри
 * Викликається один раз при запуску
 */
function initGame() {
    // Ініціалізуємо логер
    // створюємо новий екземпляр логера
    logger = new GameLogger();
    
    // записуємо початок ініціалізації
    logger.gameEvent('Ініціалізація гри "Танчики" - Урок 2');
    // інформація про розміри
    logger.info(`📐 Розмір Canvas: ${GAME_CONFIG.CANVAS_WIDTH} x ${GAME_CONFIG.CANVAS_HEIGHT}`);
    // інформація про клітинки
    logger.info(`🔲 Розмір клітинки: ${GAME_CONFIG.TILE_SIZE} пікселів`);
    
    // Створюємо нову гру
    // створюємо новий екземпляр гри
    game = new Game();
    
    // Ініціалізуємо гру
    // ініціалізуємо всі компоненти гри
    game.init();
    
    // Запускаємо гру
    // запускаємо ігровий цикл
    game.start();
    
    // записуємо успішний запуск
    logger.success('Гра запущена успішно!');
}

// Запускаємо гру після завантаження сторінки
document.addEventListener('DOMContentLoaded', () => {
    // викликаємо ініціалізацію гри
    initGame();
});

// Функція очищення логу
function clearLog() {
    // знаходимо контейнер логу
    const logContent = document.getElementById('logContent');
    // очищаємо весь вміст
    logContent.innerHTML = '';
}

// Експортуємо основні змінні для використання в інших файлах
// експортуємо для використання в інших модулях
export { canvas, ctx, GAME_CONFIG, logger };

Що робить цей файл?

Основні змінні:

• canvas - HTML Canvas елемент
• ctx - контекст для малювання
• GAME_CONFIG - конфігурація гри
• game - екземпляр головного класу гри
• logger - екземпляр системи логування

Основні функції:

• initGame() - ініціалізація всієї гри
• clearLog() - очищення логу подій

Імпорти:

• Game - головний клас гри
• GameLogger - система логування

Конфігурація гри

GAME_CONFIG:

{
    CANVAS_WIDTH: 800,   // ширина Canvas
    CANVAS_HEIGHT: 600,  // висота Canvas
    TILE_SIZE: 32,       // розмір клітинки
    FPS: 60             // частота кадрів
}

Розрахунки:

• Клітинок по горизонталі: 800 ÷ 32 = 25
• Клітинок по вертикалі: 600 ÷ 32 = 18.75 (18 повних)

Послідовність ініціалізації

Порядок запуску:

1. Завантаження DOM - DOMContentLoaded
2. Створення логера - new GameLogger()
3. Логування початку - gameEvent('Ініціалізація...')
4. Створення гри - new Game()
5. Ініціалізація гри - game.init()
6. Запуск гри - game.start()
7. Логування успіху - success('Гра запущена...')

Логування подій

Автоматичні записи:

• Початок ініціалізації - з назвою уроку
• Розміри Canvas - ширина та висота
• Розмір клітинки - в пікселях
• Успішний запуск - підтвердження роботи

Приклад логу:

[12:34:56] Ініціалізація гри "Танчики" - Урок 2
[12:34:56] 📐 Розмір Canvas: 800 x 600
[12:34:56] 🔲 Розмір клітинки: 32 пікселів
[12:34:56] Гра ініціалізована успішно!
[12:34:56] Гра запущена успішно!

Експорти

Файл експортує основні змінні для використання в інших модулях:

export { canvas, ctx, GAME_CONFIG, logger };

Це дозволяє іншим класам отримувати доступ до:

• Canvas елемента для малювання
• Контексту для операцій малювання
• Конфігурації для налаштувань
• Логера для запису подій

Функція очищення логу

function clearLog() {
    const logContent = document.getElementById('logContent');
    logContent.innerHTML = '';
}

Ця функція викликається кнопкою "Очистити" в HTML.

Структура файлів

Після створення всіх файлів структура буде:

📁 battle_city_js_course
├── 📄 index.html          # HTML сторінка
├── 📄 main.js             # Головний файл (цей файл)
├── 📄 Tank.js             # Базовий клас танка
├── 📄 Player.js           # Клас гравця
├── 📄 Enemy.js            # Клас ворога
├── 📄 GameField.js        # Клас ігрового поля
├── 📄 GameLogger.js       # Система логування
└── 📄 Game.js             # Головний клас гри

Результат

Після оновлення цього файлу у вас буде:

• ✅ Повноцінна гра з усіма компонентами
• ✅ Автоматичний запуск при завантаженні
• ✅ Система логування подій
• ✅ Модульна архітектура
• ✅ Готовність для розширення

Як запустити?

1. Відкрийте файл index.html у браузері
2. Перевірте консоль (F12) на наявність помилок
3. Подивіться на Canvas - повинно бути ігрове поле з сіткою
4. Перевірте панель логування - повинні з'явитися записи подій
5. Знайдіть танки - жовтий (гравець) та червоний (ворог)

Що далі?

У наступному уроці ми додамо:

• ✅ Рух гравця за допомогою клавіш
• ✅ Стрільбу та кулі
• ✅ Базову фізику руху
• ✅ Зіткнення між об'єктами

---

🎉 Вітаю! Ви успішно створили гру з модульною архітектурою!

ДЕМО - Урок 2