2.4: Танк ворога

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

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

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

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

import { Tank } from './Tank.js';
import { logger } from './main.js';

/**
 * 🎮 Клас Enemy - представляє ворожого танка
 * 
 * Відповідає за:
 * - Логіку ворожого танка
 * - Штучний інтелект
 */

export class Enemy extends Tank {
    constructor(options = {}) {
        // Викликаємо конструктор батьківського класу Tank
        super({
            ...options, // передаємо всі опції батьківському класу
            // червоний колір за замовчуванням
            color: options.color || '#e74c3c',
            // ворог рухається повільніше за гравця
            speed: options.speed || 1,
            // початковий напрямок дула вниз
            direction: options.direction || 'down'
        });
        
        // записуємо в лог
        logger.enemyAction('Ворог створений', `позиція: (${this.x}, ${this.y})`);
    }
    
    /**
     * Оновлення стану ворога
     * @param {number} deltaTime - Час з останнього оновлення
     */
    update(deltaTime) {
        // Поки що просто оновлюємо час (порожня функція)
        // В наступних уроках тут буде штучний інтелект ворога
    }
    
    /**
     * Малювання ворога на екрані
     * @param {CanvasRenderingContext2D} ctx - Контекст для малювання
     */
    render(ctx) {
        // якщо ворог мертвий, не малюємо
        if (!this.isAlive) return;
        
        // зберігаємо поточний стан контексту (колір, стиль тощо)
        ctx.save();
        
        // викликаємо метод render батьківського класу
        super.render(ctx);
        
        // малюємо червоний хрестик
        this.drawEnemyMark(ctx);
        
        // відновлюємо стан контексту (повертаємо попередні налаштування)
        ctx.restore();
    }
    
    /**
     * Малювання позначки ворога (червоний хрестик)
     * @param {CanvasRenderingContext2D} ctx - Контекст для малювання
     */
    drawEnemyMark(ctx) {
        // розмір позначки в пікселях
        const markSize = 6;
        // центр танка по X
        const centerX = this.x + this.width / 2;
        // центр танка по Y
        const centerY = this.y + this.height / 2;
        
        // темно-червоний колір для ліній
        ctx.strokeStyle = '#c0392b';
        // товщина ліній хрестика
        ctx.lineWidth = 2;
        
        // починаємо малювати шлях
        ctx.beginPath();
        // початкова точка
        ctx.moveTo(centerX - markSize, centerY - markSize);
        // кінцева точка
        ctx.lineTo(centerX + markSize, centerY + markSize);
        // малюємо лінію
        ctx.stroke();
        
        // починаємо малювати новий шлях
        ctx.beginPath();
        // початкова точка
        ctx.moveTo(centerX + markSize, centerY - markSize);
        // кінцева точка
        ctx.lineTo(centerX - markSize, centerY + markSize);
        // малюємо лінію
        ctx.stroke();
    }
}

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

Успадкування від Tank:

• Наслідує всі властивості базового класу танка
• Перевизначає деякі методи для специфічної поведінки ворога

Специфічні властивості ворога:

• Колір: червоний (#e74c3c) за замовчуванням
• Швидкість: 1 (повільніше за гравця)
• Напрямок: вниз за замовчуванням

Додаткові методи:

• drawEnemyMark(ctx) - малює червоний хрестик в центрі танка для ідентифікації ворога

Логування:

• Автоматичне логування створення ворога з позицією
• Використання logger.enemyAction() для запису дій ворога

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

Позначка ворога:

• Червоний хрестик в центрі танка
• Розмір: 6 пікселів
• Колір: темно-червоний (#c0392b)
• Товщина ліній: 2 пікселі

Структура хрестика:

1. Перша діагональ: від верхнього лівого до нижнього правого кута
2. Друга діагональ: від верхнього правого до нижнього лівого кута

Порядок малювання:

1. Збереження контексту (ctx.save())
2. Малювання базового танка (super.render(ctx))
3. Малювання позначки ворога (drawEnemyMark(ctx))
4. Відновлення контексту (ctx.restore())

Відмінності від гравця

Властивість	Гравець	Ворог
Колір	Жовтий (#f1c40f)	Червоний (#e74c3c)
Швидкість	2	1
Позначка	Жовтий круг	Червоний хрестик
Напрямок	Вгору	Вниз
Логування	playerAction()	enemyAction()

Використання

// Створення ворога
const enemy = new Enemy({
    x: 300,           // позиція X
    y: 200,           // позиція Y
    color: '#e74c3c', // червоний колір
    size: 32          // розмір танка
});

// Малювання ворога
enemy.render(ctx);

Результат

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

• ✅ Клас ворога з червоним кольором
• ✅ Позначка ворога (червоний хрестик)
• ✅ Автоматичне логування дій
• ✅ Готовність для додавання штучного інтелекту

Що далі?

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