🎮ArcadeLab

BURBUJA - VideojuCan

by CosmicCobra59
227 lines6.1 KB
▶ Play
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>BURBUJA - VideojuCan</title>
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        body {
            background:#000; overflow:hidden;
            font-family:'Courier New',monospace;
            touch-action:manipulation;
            user-select:none; -webkit-user-select:none;
            height:100vh; display:flex;
            justify-content:center; align-items:center;
        }
        #game {
            position:relative; width:100vw; height:100vh;
            max-width:500px; max-height:750px;
            background:linear-gradient(180deg, #1a0a2e 0%, #0a1a2e 100%);
            overflow:hidden;
        }
        canvas { display:block; width:100%; height:100%; }
        #score {
            position:absolute; top:20px; left:50%;
            transform:translateX(-50%);
            color:#fff; font-size:2rem; font-weight:bold;
            text-shadow:2px 2px 0 rgba(0,0,0,0.5);
            pointer-events:none;
        }
        #gameOver {
            position:absolute; top:50%; left:50%;
            transform:translate(-50%,-50%);
            color:#fff; font-size:2rem; font-weight:bold;
            text-align:center; display:none;
            pointer-events:none;
        }
    </style>
</head>
<body>
<div id="game">
    <canvas id="c"></canvas>
    <div id="score">0</div>
    <div id="gameOver">
        ¡OH, NO!<br>
        <small style="font-size:1rem;">Toca para intentarlo otra vez</small>
    </div>
</div>

<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');

let W, H;
let bubble = { x:0, y:0, r:20, vy:0 };
let spikes = [];
let stars = [];
let score = 0;
let gameOver = false;
let time = 0;

function resize() {
    const g = document.getElementById('game');
    W = g.clientWidth; H = g.clientHeight;
    canvas.width = W; canvas.height = H;
    bubble.x = W/4;
    bubble.y = H/2;
}
window.addEventListener('resize', resize);

function resetGame() {
    bubble.x = W/4;
    bubble.y = H/2;
    bubble.vy = 0;
    spikes = [];
    stars = [];
    score = 0;
    gameOver = false;
    time = 0;
    document.getElementById('score').textContent = '0';
    document.getElementById('gameOver').style.display = 'none';
}

function spawnSpike() {
    const y = Math.random() * (H - 50) + 25;
    spikes.push({ x: W + 20, y, w: 20, h: Math.random() * 60 + 30 });
}

function spawnStar() {
    const y = Math.random() * (H - 50) + 25;
    stars.push({ x: W + 10, y, r: 8 });
}

// Control: mantener pulsado sube, soltar baja
let isPressed = false;
canvas.addEventListener('pointerdown', () => {
    if (gameOver) {
        resetGame();
        return;
    }
    isPressed = true;
});
canvas.addEventListener('pointerup', () => { isPressed = false; });
canvas.addEventListener('pointerleave', () => { isPressed = false; });

function update() {
    if (gameOver) return;
    time++;
    
    // Movimiento de la burbuja
    if (isPressed) {
        bubble.vy -= 0.3;
    } else {
        bubble.vy += 0.3;
    }
    bubble.vy = Math.max(-3, Math.min(3, bubble.vy));
    bubble.y += bubble.vy;
    
    // Límites
    if (bubble.y < bubble.r) { bubble.y = bubble.r; bubble.vy = 0; }
    if (bubble.y > H - bubble.r) { bubble.y = H - bubble.r; bubble.vy = 0; }
    
    // Spawnear obstáculos
    if (time % 50 === 0) spawnSpike();
    if (time % 30 === 0) spawnStar();
    
    // Mover obstáculos
    spikes.forEach(s => { s.x -= 3; });
    stars.forEach(s => { s.x -= 3; });
    
    // Colisiones
    spikes.forEach(s => {
        const dx = bubble.x - (s.x + s.w/2);
        const dy = bubble.y - (s.y + s.h/2);
        if (Math.abs(dx) < (s.w/2 + bubble.r) && Math.abs(dy) < (s.h/2 + bubble.r)) {
            gameOver = true;
            document.getElementById('gameOver').style.display = 'block';
        }
    });
    
    stars.forEach(s => {
        const dx = bubble.x - s.x;
        const dy = bubble.y - s.y;
        if (Math.sqrt(dx*dx + dy*dy) < s.r + bubble.r) {
            s.x = -100;
            score++;
            document.getElementById('score').textContent = score;
        }
    });
    
    // Limpiar
    spikes = spikes.filter(s => s.x > -50);
    stars = stars.filter(s => s.x > -50);
}

function draw() {
    // Fondo
    ctx.clearRect(0, 0, W, H);
    
    // Estrellas de fondo
    ctx.fillStyle = 'rgba(255,255,255,0.3)';
    for (let i = 0; i < 30; i++) {
        const x = (i * 73) % W;
        const y = (i * 47) % H;
        ctx.fillRect(x, y, 2, 2);
    }
    
    // Estrellas recogibles
    stars.forEach(s => {
        ctx.fillStyle = '#f1c40f';
        ctx.beginPath();
        ctx.arc(s.x, s.y, s.r, 0, Math.PI*2);
        ctx.fill();
        ctx.fillStyle = '#ff0';
        ctx.beginPath();
        ctx.arc(s.x - 2, s.y - 2, s.r/3, 0, Math.PI*2);
        ctx.fill();
    });
    
    // Pinchos
    spikes.forEach(s => {
        ctx.fillStyle = '#e74c3c';
        ctx.beginPath();
        ctx.moveTo(s.x, s.y + s.h);
        ctx.lineTo(s.x + s.w/2, s.y);
        ctx.lineTo(s.x + s.w, s.y + s.h);
        ctx.fill();
    });
    
    // Burbuja
    const glow = ctx.createRadialGradient(bubble.x, bubble.y, 0, bubble.x, bubble.y, bubble.r*2);
    glow.addColorStop(0, 'rgba(100,200,255,0.8)');
    glow.addColorStop(1, 'transparent');
    ctx.fillStyle = glow;
    ctx.fillRect(bubble.x-bubble.r*2, bubble.y-bubble.r*2, bubble.r*4, bubble.r*4);
    ctx.fillStyle = 'rgba(100,200,255,0.6)';
    ctx.beginPath();
    ctx.arc(bubble.x, bubble.y, bubble.r, 0, Math.PI*2);
    ctx.fill();
    ctx.strokeStyle = 'rgba(255,255,255,0.6)';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(bubble.x, bubble.y, bubble.r, 0, Math.PI*2);
    ctx.stroke();
    // Brillo
    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    ctx.beginPath();
    ctx.arc(bubble.x - 5, bubble.y - 5, 5, 0, Math.PI*2);
    ctx.fill();
    
    if (gameOver) {
        ctx.fillStyle = 'rgba(0,0,0,0.5)';
        ctx.fillRect(0, 0, W, H);
    }
}

function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}
resize();
resetGame();
loop();
</script>
</body>
</html>

Game Source: BURBUJA - VideojuCan

Creator: CosmicCobra59

Libraries: none

Complexity: complex (227 lines, 6.1 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: burbuja-videojucan-cosmiccobra59" to link back to the original. Then publish at arcadelab.ai/publish.