Editor HTML + CSS + JS

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pixel Survivor: Boss Battle</title>
    <style>
        body {
            margin: 0;
            background: #1a1a1a;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: hidden;
        }
        canvas {
            border: 4px solid #333;
            background: #222;
            image-rendering: pixelated;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
        .ui {
            position: absolute;
            top: 20px;
            left: 20px;
            pointer-events: none;
        }
        .boss-ui {
            position: absolute;
            top: 20px;
            width: 100%;
            text-align: center;
        }
        .bar {
            height: 20px;
            background: #444;
            border: 2px solid #fff;
            margin-bottom: 5px;
        }
        .hp { height: 100%; background: #ff4d4d; transition: width 0.2s; }
        .boss-hp { height: 100%; background: #9900ff; transition: width 0.1s; }
        .controls { color: #888; font-size: 0.8em; margin-top: 10px; }
    </style>
</head>
<body>

<div class="ui">
        <div>VIDAS: <span id="lives">3</span></div>
        <div class="bar" style="width: 200px;"><div id="playerHpBar" class="hp" style="width: 100%;"></div></div>
        <div id="powerLabel">PODER: BÁSICO</div>
    </div>

<div class="boss-ui">
        <div id="bossName">EL GUARDIÁN DEL PIXEL</div>
        <div class="bar" style="width: 60%; margin: 0 auto;"><div id="bossHpBar" class="boss-hp" style="width: 100%;"></div></div>
    </div>

<div class="controls">WASD: Mover | E: Atacar | Atraviesa los obstáculos y derrota al Jefe</div>

// --- CONFIGURACIÓN DEL PERSONAJE (PIXEL ART) ---
        // 0: Transparente, 1: Piel, 2: Ropa, 3: Ojos/Detalle, 4: Pelo
        const pixelArt = [
            [0, 0, 4, 4, 4, 0, 0],
            [0, 4, 4, 4, 4, 4, 0],
            [0, 1, 1, 1, 1, 1, 0],
            [0, 1, 3, 1, 3, 1, 0],
            [0, 1, 1, 1, 1, 1, 0],
            [0, 0, 2, 2, 2, 0, 0],
            [0, 2, 2, 2, 2, 2, 0],
            [0, 2, 2, 2, 2, 2, 0],
            [0, 0, 1, 0, 1, 0, 0]
        ];
        const pixelSize = 4;

// --- ESTADOS DEL JUEGO ---
        let player = {
            x: 50, y: 300, w: 28, h: 36, speed: 4, 
            hp: 100, maxHp: 100, lives: 3, power: 0
        };

let boss = {
            x: 400, y: 300, w: 80, h: 80, 
            hp: 1000, maxHp: 1000, speed: 1.5,
            attackTimer: 0
        };

const powers = [
            {name: "Básico", color: "#fff", speed: 7, dmg: 10},
            {name: "Fuego", color: "#ff6600", speed: 9, dmg: 25},
            {name: "Hielo", color: "#00ffff", speed: 6, dmg: 15},
            {name: "Plasma", color: "#cc00ff", speed: 12, dmg: 20},
            {name: "Veneno", color: "#33ff33", speed: 5, dmg: 40}
        ];

// --- INPUTS ---
        window.onkeydown = (e) => {
            keys[e.key.toLowerCase()] = true;
            if(e.key.toLowerCase() === 'e') shoot();
        };
        window.onkeyup = (e) => keys[e.key.toLowerCase()] = false;

function shoot() {
            const p = powers[player.power];
            projectiles.push({
                x: player.x + player.w, y: player.y + player.h/2,
                vx: p.speed, vy: 0, color: p.color, dmg: p.dmg
            });
        }

function spawnItem() {
            items.push({
                x: Math.random() * (canvas.width - 50),
                y: Math.random() * (canvas.height - 50),
                type: Math.floor(Math.random() * 4) + 1 // No básico
            });
        }

function spawnEnemy() {
            enemies.push({
                x: Math.random() > 0.5 ? 0 : canvas.width,
                y: Math.random() * canvas.height,
                hp: 20, speed: 2
            });
        }

// --- LOGICA DE DIBUJO ---
        function drawPixelArt(data, x, y, size, flip = false) {
            data.forEach((row, rowIndex) => {
                row.forEach((pixel, colIndex) => {
                    if (pixel !== 0) {
                        if (pixel === 1) ctx.fillStyle = "#ffdbac";
                        if (pixel === 2) ctx.fillStyle = "#3366ff";
                        if (pixel === 3) ctx.fillStyle = "#000";
                        if (pixel === 4) ctx.fillStyle = "#4b2c20";
                        ctx.fillRect(x + colIndex * size, y + rowIndex * size, size, size);
                    }
                });
            });
        }

// --- BUCLE PRINCIPAL ---
        function update() {
            // Movimiento Jugador
            if (keys['w'] && player.y > 0) player.y -= player.speed;
            if (keys['s'] && player.y < canvas.height - player.h) player.y += player.speed;
            if (keys['a'] && player.x > 0) player.x -= player.speed;
            if (keys['d'] && player.x < canvas.width - player.w) player.x += player.speed;

// IA Jefe (Seguir al jugador)
            if (boss.hp > 0) {
                let dx = player.x - boss.x;
                let dy = player.y - boss.y;
                let dist = Math.sqrt(dx*dx + dy*dy);
                boss.x += (dx/dist) * boss.speed;
                boss.y += (dy/dist) * boss.speed;

// Ataque Jefe
                boss.attackTimer++;
                if (boss.attackTimer > 60) {
                    bossProjectiles.push({
                        x: boss.x + boss.w/2, y: boss.y + boss.h/2,
                        vx: (dx/dist) * 5, vy: (dy/dist) * 5
                    });
                    boss.attackTimer = 0;
                }
            }

// Obstáculos (Daño)
            obstacles.forEach(o => {
                if (player.x < o.x + o.w && player.x + player.w > o.x &&
                    player.y < o.y + o.h && player.y + player.h > o.y) {
                    player.hp -= 0.5;
                }
            });

// Ítems
            items.forEach((it, i) => {
                if (player.x < it.x + 20 && player.x + player.w > it.x &&
                    player.y < it.y + 20 && player.y + player.h > it.y) {
                    player.power = it.type;
                    document.getElementById('powerLabel').innerText = "PODER: " + powers[it.type].name;
                    items.splice(i, 1);
                }
            });

// Colisiones Proyectiles -> Jefe
            projectiles.forEach((p, i) => {
                p.x += p.vx;
                if (p.x > canvas.width) projectiles.splice(i, 1);
                if (p.x > boss.x && p.x < boss.x + boss.w && p.y > boss.y && p.y < boss.y + boss.h) {
                    boss.hp -= p.dmg;
                    projectiles.splice(i, 1);
                }
            });

// Colisiones Jefe -> Jugador
            bossProjectiles.forEach((p, i) => {
                p.x += p.vx; p.y += p.vy;
                if (player.x < p.x && player.x + player.w > p.x && player.y < p.y && player.y + player.h > p.y) {
                    player.hp -= 15;
                    player.power = 0; // Pierde el poder
                    document.getElementById('powerLabel').innerText = "PODER: BÁSICO";
                    bossProjectiles.splice(i, 1);
                    if (items.length === 0) spawnItem();
                }
            });

// Enemigos pequeños
            if (Math.random() < 0.02) spawnEnemy();
            enemies.forEach((en, i) => {
                let dx = player.x - en.x;
                let dy = player.y - en.y;
                let dist = Math.sqrt(dx*dx + dy*dy);
                en.x += (dx/dist) * en.speed;
                en.y += (dy/dist) * en.speed;
                if (player.x < en.x + 20 && player.x + player.w > en.x && player.y < en.y + 20 && player.y + player.h > en.y) {
                    player.hp -= 5;
                    enemies.splice(i, 1);
                }
            });

// Lógica de Muerte/Reinicio
            if (player.hp <= 0) {
                player.lives--;
                player.hp = 100;
                player.x = 50;
                if (player.lives <= 0) {
                    alert("¡GAME OVER! Reiniciando desde el Nivel 1");
                    location.reload();
                }
            }

if (boss.hp <= 0) {
                alert("¡VICTORIA! Has derrotado al Guardián.");
                location.reload();
            }

updateUI();
            draw();
            requestAnimationFrame(update);
        }

function updateUI() {
            document.getElementById('lives').innerText = player.lives;
            document.getElementById('playerHpBar').style.width = (player.hp / player.maxHp * 100) + "%";
            document.getElementById('bossHpBar').style.width = (boss.hp / boss.maxHp * 100) + "%";
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Dibujar Obstáculos
            ctx.fillStyle = "#555";
            obstacles.forEach(o => ctx.fillRect(o.x, o.y, o.w, o.h));

// Dibujar Items
            items.forEach(it => {
                ctx.fillStyle = powers[it.type].color;
                ctx.beginPath();
                ctx.arc(it.x + 10, it.y + 10, 8, 0, Math.PI*2);
                ctx.fill();
            });

// Dibujar Jugador (Pixel Art)
            drawPixelArt(pixelArt, player.x, player.y, pixelSize);

// Dibujar Jefe
            ctx.fillStyle = "#9900ff";
            ctx.fillRect(boss.x, boss.y, boss.w, boss.h);
            ctx.fillStyle = "white";
            ctx.fillRect(boss.x + 15, boss.y + 20, 15, 15);
            ctx.fillRect(boss.x + 50, boss.y + 20, 15, 15);

// Dibujar Enemigos
            ctx.fillStyle = "red";
            enemies.forEach(en => ctx.fillRect(en.x, en.y, 20, 20));

// Dibujar Proyectiles
            projectiles.forEach(p => {
                ctx.fillStyle = p.color;
                ctx.fillRect(p.x, p.y, 10, 4);
            });
            bossProjectiles.forEach(p => {
                ctx.fillStyle = "yellow";
                ctx.beginPath(); ctx.arc(p.x, p.y, 5, 0, Math.PI*2); ctx.fill();
            });
        }

Editor Web

HTML

CSS

JavaScript

Vista Previa