Kaboom.js Lab — Gaming Lab

⚠️

EXPERIMENTO ARCHIVADO — TECNOLOGÍA DESCONTINUADA

Kaboom.js v3000 ya no recibe mantenimiento. Este experimento se conserva como referencia histórica. La versión activa del juego se desarrolla con KAPLAY, el sucesor oficial.

Ir a KAPLAY →

FROG JUMPER

DEMO INTERACTIVO

ESPACIO o CLICK / TOCAR para saltar | Mantén para subir más alto | Esquiva obstáculos

👆 TOCA PARA SALTAR — MANTÉN PARA VOLAR

¿Qué es Kaboom.js?

Kaboom.js es una biblioteca JavaScript para crear juegos de forma rápida y divertida. Se basa en un sistema de componentes: cada objeto del juego se arma como una lista de piezas (sprite, posición, física, colisión) que le dan funcionalidad.

Tamaño: ~50 KB (gzip)
Render: Canvas 2D
Dependencias: Ninguna

Conceptos Clave

add([...]) — Crea un objeto con componentes
sprite("name") — Renderiza una imagen
pos(x, y) — Posición en pantalla
area() — Collider para colisiones
body() — Física y gravedad
onKeyPress() — Eventos de teclado
scene("name") — Sistema de escenas

Cómo usarlo

La forma más rápida es importar desde CDN:

import kaboom from "https://unpkg.com/kaboom@3000.0.1/dist/kaboom.mjs"

O con npm init kaboom -- mygame para un proyecto con dev server incluido.

Por qué Kaboom.js

Curva de aprendizaje muy baja
API concisa y expresiva
Perfecto para prototipos y game jams
Documentación en una sola página
Sprites built-in (bean, ghost, etc.)
Sistema de escenas integrado

📜 Código del Juego

// Frog Jumper — Demo responsive con Kaboom.js
// Title screen, high score, salto variable, audio sintético

import kaboom from "https://unpkg.com/kaboom@3000.0.1/dist/kaboom.mjs";

// Detectar orientación y configurar dimensiones
const isPortrait = window.innerHeight > window.innerWidth;
const GAME_WIDTH = isPortrait ? 400 : 800;
const GAME_HEIGHT = isPortrait ? 650 : 450;

// Constantes del juego según orientación
const FLOOR_HEIGHT = isPortrait ? 72 : 48;
const JUMP_FORCE = isPortrait ? 900 : 800;
const SPEED = isPortrait ? 306 : 389; // -20% vs original
const PLAYER_X = isPortrait ? 50 : 80;
const GRAVITY = isPortrait ? 1800 : 1600;

// Salto: presiona = salto inmediato, mantén = vuela más alto
const INITIAL_JUMP_RATIO = 0.85;
const HOLD_IMPULSE = 55;
const MAX_HOLD_TIME = 0.55;

kaboom({
    canvas: document.getElementById("game-canvas"),
    width: GAME_WIDTH,
    height: GAME_HEIGHT,
    background: [15, 15, 25],
});

// High Score en localStorage
const HS_KEY = "frog_jumper_highscore";
function getHighScore() {
    const val = localStorage.getItem(HS_KEY);
    return val ? parseInt(val, 10) : 0;
}
function saveHighScore(score) {
    const current = getHighScore();
    if (score > current) localStorage.setItem(HS_KEY, String(score));
}
            