Master King: Arena

by LuckyFlare17

73 lines2.2 KB

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Master King: Arena</title>
    <style>
        body { margin: 0; background: #020617; color: #22c55e; font-family: 'Segoe UI', sans-serif; overflow: hidden; }
        #gameCanvas { display: block; cursor: crosshair; }
        .ui { position: absolute; top: 20px; left: 20px; z-index: 10; }
        .skin-panel { position: absolute; bottom: 20px; left: 20px; display: flex; gap: 10px; }
        button { background: #1e293b; border: 1px solid #22c55e; color: #22c55e; padding: 10px; border-radius: 8px; cursor: pointer; }
    </style>
</head>
<body>

<div class="ui">
    <h1 style="margin:0;">MASTER KING</h1>
    <div id="hp-bar" style="width: 200px; height: 10px; background: red; border: 1px solid #fff;"></div>
</div>

<div class="skin-panel">
    <button onclick="setSkin('👑')">König</button>
    <button onclick="setSkin('🥷')">Ninja</button>
    <button onclick="setSkin('🤖')">Cyborg</button>
</div>

<canvas id="gameCanvas"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    let player = { x: 400, y: 300, skin: '👑', size: 40 };
    let monster = { x: 100, y: 100, hp: 100 };

    function setSkin(s) { player.skin = s; }

    // Steuerung: Bewegung Richtung Maus/Touch
    window.addEventListener('mousemove', (e) => {
        player.x = e.clientX - 20;
        player.y = e.clientY - 20;
    });

    function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Monster KI: Verfolgt Spieler
        let dx = player.x - monster.x;
        let dy = player.y - monster.y;
        monster.x += dx * 0.02;
        monster.y += dy * 0.02;

        // Zeichnen
        ctx.font = "40px Arial";
        ctx.fillText(player.skin, player.x, player.y);
        ctx.fillText("👾", monster.x, monster.y);
        
        // Kollision (Angriff)
        if(Math.hypot(dx, dy) < 50) {
            monster.hp -= 0.5;
            document.getElementById('hp-bar').style.width = monster.hp * 2 + "px";
        }

        requestAnimationFrame(update);
    }

    update();
</script>
</body>
</html>

Game Source: Master King: Arena

Creator: LuckyFlare17

Libraries: none

Complexity: moderate (73 lines, 2.2 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: master-king-luckyflare17" to link back to the original. Then publish at arcadelab.ai/publish.