eaglegame

const canvas = document.getElementById('game-canvas');

const ctx = canvas.getContext('2d');

class Character {

    constructor(name, x, y, width, height, color, level, hp, attack, xp) {

        this.name = name;

        this.x = x;

        this.y = y;

        this.width = width;

        this.height = height;

        this.color = color;

        this.level = level;

        this.hp = hp;

        this.maxHp = hp;

        this.attack = attack;

        this.xp = xp;

    }

    draw() {

        ctx.fillStyle = this.color;

        ctx.fillRect(this.x, this.y, this.width, this.height);

    }

}

const player = new Character('珞甄', 100, 100, 32, 32, 'blue', 1, 100, 10, 0);

const monsters = [

    new Character('怪物', 400, 300, 32, 32, 'red', 1, 50, 5, 20)

];

const teammates = [

    new Character('梓綾', 0, 0, 32, 32, 'purple', 1, 100, 10, 0),

    new Character('小柔', 0, 0, 32, 32, 'green', 1, 100, 10, 0),

    new Character('鷹哥俠', 0, 0, 32, 32, 'yellow', 1, 100, 10, 0)

];

function drawCharacters() {

    player.draw();

    for (const monster of monsters) {

        monster.draw();

    }

}

function updateUI() {

    document.getElementById('level').innerText = `等級: ${player.level}`;

    document.getElementById('hp').innerText = `生命值: ${player.hp}`;

    document.getElementById('xp').innerText = `經驗值: ${player.xp}`;

}

function detectCollision(rect1, rect2) {

    return rect1.x < rect2.x + rect2.width &&

           rect1.x + rect1.width > rect2.x &&

           rect1.y < rect2.y + rect2.height &&

           rect1.y + rect1.height > rect2.y;

}

function battle(monster) {

    monster.hp -= player.attack;

    if (monster.hp <= 0) {

        player.xp += monster.xp;

        if (player.xp >= 100) {

            player.level++;

            player.xp = 0;

            player.hp = player.maxHp;

        }

        monster.hp = monster.maxHp;

    } else {

        player.hp -= monster.attack;

    }

    updateUI();

}

document.addEventListener('keydown', (event) => {

    const speed = 5;

    switch(event.key) {

        case 'ArrowUp':

            player.y -= speed;

            break;

        case 'ArrowDown':

            player.y += speed;

            break;

        case 'ArrowLeft':

            player.x -= speed;

            break;

        case 'ArrowRight':

            player.x += speed;

            break;

    }

    for (const monster of monsters) {

        if (detectCollision(player, monster)) {

            battle(monster);

        }

    }

    drawGame();

});

function drawGame() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawCharacters();

}

updateUI();

drawGame();