2.2: Базовий танк

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

У цьому підрозділі ми створимо базовий клас Tank.js, який буде основою для всіх танків у грі.

Створення класу Tank.js

Створіть файл Tank.js:

/**
 * 🎮 Клас Tank - базовий клас для всіх танків
 * 
 * Відповідає за:
 * - Базову логіку танка
 * - Малювання танка
 * - Фізику руху
 */

export class Tank {
    constructor(options = {}) {
        // Позиція танка на полі
        // координата X (за замовчуванням 0)
        this.x = options.x || 0;
        // координата Y (за замовчуванням 0)
        this.y = options.y || 0;
        
        // Розміри танка
        // ширина танка в пікселях
        this.width = options.size || 32;
        // висота танка в пікселях
        this.height = options.size || 32;
        
        // Властивості танка
        // колір танка (за замовчуванням білий)
        this.color = options.color || '#ffffff';
        // швидкість руху танка
        this.speed = options.speed || 1;
        // напрямок дула танка
        this.direction = options.direction || 'up';
        
        // Стан танка
        // чи живий танк
        this.isAlive = true;
        // здоров'я танка (від 0 до 100)
        this.health = 100;
    }
    
    /**
     * Оновлення стану танка
     * @param {number} deltaTime - Час з останнього оновлення
     */
    update(deltaTime) {
        // Базова логіка оновлення (поки що порожня)
        // В наступних уроках тут буде логіка руху та стрільби
    }
    
    /**
     * Малювання танка
     * @param {CanvasRenderingContext2D} ctx - Контекст для малювання
     */
    render(ctx) {
        // якщо танк мертвий, не малюємо його
        if (!this.isAlive) return;
        
        // Малюємо тіло танка (основний прямокутник)
        // встановлюємо колір танка
        ctx.fillStyle = this.color;
        // малюємо прямокутник
        ctx.fillRect(this.x, this.y, this.width, this.height);
        
        // Малюємо дуло танка (додатковий елемент)
        // викликаємо функцію малювання дула
        this.drawBarrel(ctx);
    }
    
    /**
     * Малювання дула танка
     * @param {CanvasRenderingContext2D} ctx - Контекст для малювання
     */
    drawBarrel(ctx) {
        // довжина дула (60% від ширини танка)
        const barrelLength = this.width * 0.6;
        // ширина дула (20% від ширини танка)
        const barrelWidth = this.width * 0.2;
        
        // темно-синій колір для дула
        ctx.fillStyle = '#2c3e50';
        
        // перевіряємо напрямок дула
        switch (this.direction) {
            // якщо дуло дивиться вгору
            case 'up':
                ctx.fillRect(
                    // центруємо дуло по X
                    this.x + this.width / 2 - barrelWidth / 2,
                    // розміщуємо дуло вище танка
                    this.y - barrelLength,
                    // ширина дула
                    barrelWidth,
                    // довжина дула
                    barrelLength
                );
                break;
            // якщо дуло дивиться вниз
            case 'down':
                ctx.fillRect(
                    // центруємо дуло по X
                    this.x + this.width / 2 - barrelWidth / 2,
                    // розміщуємо дуло нижче танка
                    this.y + this.height,
                    // ширина дула
                    barrelWidth,
                    // довжина дула
                    barrelLength
                );
                break;
            // якщо дуло дивиться вліво
            case 'left':
                ctx.fillRect(
                    // розміщуємо дуло лівіше танка
                    this.x - barrelLength,
                    // центруємо дуло по Y
                    this.y + this.height / 2 - barrelWidth / 2,
                    // довжина дула
                    barrelLength,
                    // ширина дула
                    barrelWidth
                );
                break;
            // якщо дуло дивиться вправо
            case 'right':
                ctx.fillRect(
                    // розміщуємо дуло правіше танка
                    this.x + this.width,
                    // центруємо дуло по Y
                    this.y + this.height / 2 - barrelWidth / 2,
                    // довжина дула
                    barrelLength,
                    // ширина дула
                    barrelWidth
                );
                break;
        }
    }
    
    /**
     * Перевірка чи танк живий
     * @returns {boolean} - true якщо танк живий
     */
    isTankAlive() {
        // танк живий якщо isAlive=true і здоров'я > 0
        return this.isAlive && this.health > 0;
    }
    
    /**
     * Вбити танк
     */
    kill() {
        // позначаємо танк як мертвий
        this.isAlive = false;
        // встановлюємо здоров'я в 0
        this.health = 0;
    }
    
    /**
     * Відродити танк
     */
    respawn() {
        // позначаємо танк як живий
        this.isAlive = true;
        // відновлюємо повне здоров'я
        this.health = 100;
    }
}

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

Основні властивості:

• Позиція: x, y - координати танка на полі
• Розміри: width, height - розміри танка
• Властивості: color, speed, direction - колір, швидкість, напрямок
• Стан: isAlive, health - чи живий танк та його здоров'я

Основні методи:

• update(deltaTime) - оновлення стану танка
• render(ctx) - малювання танка на Canvas
• drawBarrel(ctx) - малювання дула танка
• isTankAlive() - перевірка чи танк живий
• kill() - вбити танк
• respawn() - відродити танк

Особливості малювання дула

Дуло танка малюється в залежності від напрямку:

• Вгору: дуло розміщується вище танка
• Вниз: дуло розміщується нижче танка
• Вліво: дуло розміщується лівіше танка
• Вправо: дуло розміщується правіше танка

Результат

Після створення цього класу у вас буде:

• ✅ Базовий клас для всіх танків
• ✅ Система малювання танка з дулом
• ✅ Базові методи управління станом танка
• ✅ Готовість для створення специфічних типів танків

Що далі?

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