2.3: Танк гравця

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

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

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

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

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

/**
 * 🎮 Клас Player - представляє гравця
 * 
 * Відповідає за:
 * - Специфічну логіку гравця
 * - Керування гравцем
 */

export class Player extends Tank {
    constructor(options = {}) {
        // Викликаємо конструктор батьківського класу Tank
        super({
            ...options, // передаємо всі опції батьківському класу
            // жовтий колір за замовчуванням
            color: options.color || '#f1c40f',
            // гравець рухається швидше за ворога
            speed: options.speed || 2,
            // початковий напрямок дула вгору
            direction: options.direction || 'up'
        });
        
        // записуємо в лог
        logger.playerAction('Гравець створений', `позиція: (${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.drawPlayerMark(ctx);
        
        // відновлюємо стан контексту (повертаємо попередні налаштування)
        ctx.restore();
    }
    
    /**
     * Малювання позначки гравця (жовтий круг)
     * @param {CanvasRenderingContext2D} ctx - Контекст для малювання
     */
    drawPlayerMark(ctx) {
        // розмір позначки в пікселях
        const markSize = 4;
        // центр танка по X
        const centerX = this.x + this.width / 2;
        // центр танка по Y
        const centerY = this.y + this.height / 2;
        
        // помаранчево-жовтий колір
        ctx.fillStyle = '#f39c12';
        // починаємо малювати шлях
        ctx.beginPath();
        // малюємо коло
        ctx.arc(centerX, centerY, markSize, 0, 2 * Math.PI);
        // заповнюємо коло кольором
        ctx.fill();
    }
}

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

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

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

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

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

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

• drawPlayerMark(ctx) - малює жовтий круг в центрі танка для ідентифікації гравця

Логування:

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

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

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

• Жовтий круг в центрі танка
• Розмір: 4 пікселі
• Колір: помаранчево-жовтий (#f39c12)

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

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

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

// Створення гравця
const player = new Player({
    x: 100,           // позиція X
    y: 100,           // позиція Y
    color: '#f1c40f', // жовтий колір
    size: 32          // розмір танка
});

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

Результат

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

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

Що далі?

У наступному підрозділі ми створимо клас ворожого танка з червоним кольором та хрестиком.