2 marzo, 2026
Articulos Recientes
Cloud RenderingComputación GráficadispersiónNiixer

Code Climb: aprender Ingeniería de Sistemas escalando un edificio pixelado

jloaizap 9 Views

En un entorno donde la educación compite con la distracción digital, Code Climb propone una idea sencilla pero poderosa: convertir los fundamentos de la Ingeniería de Sistemas en un videojuego retro estilo 8-bits. El resultado es una experiencia educativa interactiva donde el conocimiento literalmente te hace subir… y los errores te hacen caer.

¿De qué trata el juego?

Code Climb es un videojuego web en formato 2D donde el jugador debe escalar un edificio de 10 pisos respondiendo preguntas básicas de Ingeniería de Sistemas. Cada piso representa un nivel. La mecánica es clara:

  • ✅ Respuesta correcta → el personaje sube un piso.
  • ❌ Respuesta incorrecta → cae un piso.
  • ❤️ El jugador comienza con 3 vidas.
  • ⭐ Hay 3 pisos especiales con preguntas bonus que otorgan vidas extra.
  • 🧑‍🏫 En la terraza lo espera un mini jefe: un profesor calvo con barba de candado que enseña IA generativa.

El objetivo final es llegar al último piso, derrotar al profesor respondiendo correctamente tres preguntas sobre inteligencia artificial generativa y obtener un diploma digital como reconocimiento.

Inspiración académica

El juego está inspirado directamente en el estudio de la Ingeniería de Sistemas y la codificación. Los temas que aparecen en los niveles incluyen conceptos fundamentales como:

  • CPU y RAM
  • HTML y protocolos como HTTP
  • Algoritmos y sistemas binarios
  • Bases de datos
  • Sistemas operativos
  • Computación en la nube
  • Fundamentos de ingeniería de sistemas
  • Conceptos básicos de IA generativa

En lugar de memorizar definiciones de manera tradicional, el jugador se enfrenta a situaciones dinámicas donde el conocimiento tiene consecuencias inmediatas. La presión de no caer de piso genera una experiencia de aprendizaje activa.

Mecánicas que refuerzan el aprendizaje

El juego no solo plantea preguntas. También incorpora sistemas que aumentan la motivación:

🔥 Sistema de Combo

  • 2 respuestas correctas seguidas → multiplicador de puntos.
  • 3 respuestas seguidas → obtienes un escudo que evita una caída.
  • 5 respuestas seguidas → se activa el “Code Master Mode”, que permite un salto doble.

Este sistema recompensa la consistencia y refuerza la concentración, simulando cómo en programación la lógica encadenada construye resultados más complejos.

🛡️ Escudo

Si el jugador falla pero tiene escudo activo, evita la caída. Es una metáfora interesante del aprendizaje: el conocimiento acumulado protege frente al error.

⚔️ Mini Jefe Final

En el piso 10, el profesor de IA generativa pone a prueba al jugador con tres preguntas avanzadas. Cada respuesta correcta reduce su barra de vida. Esta dinámica introduce un clímax narrativo que representa el paso de fundamentos básicos a conceptos más actuales como la inteligencia artificial.

¿Cómo se puede jugar?

El juego funciona directamente en el navegador mediante HTML, CSS y JavaScript. No requiere instalación ni herramientas externas. Basta con abrir el archivo en un navegador moderno.

El jugador solo debe leer la pregunta y seleccionar una de las opciones. El sistema actualiza automáticamente:

  • Piso actual
  • Vidas restantes
  • Puntaje
  • Combo activo
  • Escudo
  • Vida del jefe

Todo se maneja en tiempo real, con una interfaz limpia y clara.

Estilo y estética

Aunque la versión funcional es minimalista, el concepto general está pensado con inspiración retro 8-bits. Este estilo no es casual: conecta con la cultura clásica de videojuegos arcade, evocando la sensación de superación progresiva nivel por nivel.

El mini jefe final añade un elemento narrativo que humaniza el aprendizaje: el profesor no es un enemigo, sino una representación del desafío académico.

Impacto educativo

Code Climb demuestra que la gamificación puede ser una herramienta poderosa en la educación tecnológica. Al integrar preguntas técnicas con mecánicas de juego, se logra:

  • Mayor retención de conceptos
  • Participación activa
  • Retroalimentación inmediata
  • Motivación intrínseca

El juego convierte la teoría en acción y la evaluación en desafío.

Desarrollo con apoyo de IA

El desarrollo del juego contó con apoyo de herramientas de inteligencia artificial como Claude, que permitió optimizar la estructura del código, organizar la lógica de preguntas y mejorar la coherencia del sistema de niveles. La IA facilitó la corrección de errores y la mejora del flujo del programa, demostrando cómo las tecnologías actuales pueden convertirse en aliadas del aprendizaje y la creación de proyectos académicos.

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Code Climb (Android)</title>
<style>
  body{margin:0;background:#0f1220;color:#e9ecff;font-family:system-ui,-apple-system,Segoe UI,Arial}
  .wrap{max-width:920px;margin:0 auto;padding:16px}
  .card{background:#171a2e;border:1px solid #2b2f55;border-radius:14px;padding:14px}
  .hud{display:flex;gap:12px;flex-wrap:wrap;justify-content:space-between;align-items:center}
  .big{font-size:18px;font-weight:700}
  .small{font-size:13px;opacity:.85}
  .mono{font-family:ui-monospace,Menlo,Consolas,monospace}
  button{width:100%;text-align:left;margin:8px 0;padding:12px 12px;border-radius:12px;border:1px solid #3a4180;background:#2a2f5a;color:#fff}
  button:active{transform:scale(.99)}
  .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
  .col{flex:1;min-width:280px}
  .bar{height:10px;background:#2b2f55;border-radius:999px;overflow:hidden}
  .bar > div{height:100%;background:#7cf7a2;width:0%}
  .pill{display:inline-block;padding:4px 10px;border:1px solid #2b2f55;border-radius:999px;margin-top:6px}
  .ok{color:#7cf7a2}
  .bad{color:#ff7a7a}
</style>
</head>
<body>
<div class="wrap">

  <div class="card hud">
    <div>
      <div class="big">🏢 Piso: <span id="floor">1</span> / 10</div>
      <div class="small">❤️ Vidas: <span id="lives">3</span> | ⭐ Puntaje: <span id="score">0</span></div>
      <div class="small">🔥 Combo: <span id="streak">0</span> | 🛡️ Escudo: <span id="shield">0</span></div>
      <div class="small mono" id="mode"></div>
    </div>
    <div>
      <button id="resetBtn" style="width:auto;text-align:center">🔁 Reiniciar</button>
    </div>
  </div>

  <div class="row">
    <div class="card col">
      <div class="small mono" id="tag"></div>
      <div class="big" id="question" style="margin-top:6px"></div>
      <div id="choices"></div>
      <div class="small" id="feedback" style="margin-top:6px"></div>
    </div>

    <div class="card col">
      <div class="big">⚔️ Terraza: Mini Jefe</div>
      <div class="small">Aparece en el piso 10. Profesor calvito con barba de candado que enseña IA generativa.</div>
      <div class="pill small">HP del jefe</div>
      <div class="bar" style="margin-top:8px"><div id="bossbar"></div></div>
      <div class="small" id="bossinfo" style="margin-top:8px"></div>
      <hr style="border:0;border-top:1px solid #2b2f55;margin:12px 0">
      <div class="small">
        Reglas: ✅ subes 1 piso. ❌ caes 1 piso (si tienes escudo, no caes y se consume).<br>
        Bonus: +1 vida. Combo: 2 seguidas x2 puntos, 3 seguidas +1 escudo, 5 seguidas “Code Master” (salto doble).
      </div>
    </div>
  </div>

</div>

<script>
(function(){
  const baseQuestions = [
    {q:"¿Qué significa CPU?", a:["Central Process Unit","Central Processing Unit","Computer Personal Unit","Control Processing User"], c:1},
    {q:"¿Qué lenguaje se usa principalmente para estructurar páginas web?", a:["Python","Java","HTML","C++"], c:2},
    {q:"¿Qué es un algoritmo?", a:["Un programa físico","Secuencia de pasos para resolver un problema","Un tipo de hardware","Un servidor"], c:1},
    {q:"¿Qué es una base de datos?", a:["Un sistema operativo","Conjunto organizado de información","Un antivirus","Un lenguaje de programación"], c:1},
    {q:"¿Cuál es el sistema binario?", a:["Base 10","Base 8","Base 2","Base 16"], c:2},
    {q:"¿Qué significa HTTP?", a:["HyperText Transfer Protocol","High Transfer Text Process","Hyper Terminal Protocol","Host Transfer Text Program"], c:0},
    {q:"¿Qué es la nube (cloud computing)?", a:["Un disco duro externo","Servicios y almacenamiento en internet","Una red local","Un software físico"], c:1},
    {q:"¿Qué es un lenguaje de programación?", a:["Un idioma humano","Instrucciones para comunicarse con una computadora","Un sistema operativo","Un antivirus"], c:1},
    {q:"¿Qué hace un sistema operativo?", a:["Edita imágenes","Gestiona hardware y software","Solo conecta internet","Programa videojuegos"], c:1},
    {q:"¿Qué es la ingeniería de sistemas?", a:["Reparar computadores","Diseñar, desarrollar y gestionar sistemas tecnológicos","Solo programar","Instalar redes"], c:1},
  ];

  const bonusQuestions = [
    {q:"⭐ BONUS: ¿Qué significa RAM?", a:["Random Access Memory","Rapid Access Machine","Read Active Memory","Real Algorithm Module"], c:0},
    {q:"⭐ BONUS: ¿Qué es un servidor?", a:["Un mouse","Equipo que da servicios a otros dispositivos","Software de dibujo","Navegador"], c:1},
    {q:"⭐ BONUS: ¿Qué significa IA?", a:["Internal Access","Intelligent Algorithm","Inteligencia Artificial","Internet Access"], c:2},
  ];

  const bossQuestions = [
    {q:"Jefe IA: ¿Qué es un 'prompt'?", a:["Un virus","Una instrucción para guiar a un modelo","Un tipo de RAM","Una IP"], c:1},
    {q:"Jefe IA: ¿Qué es un modelo generativo?", a:["Solo clasifica","Genera contenido nuevo","Solo comprime datos","Es un servidor"], c:1},
    {q:"Jefe IA: ¿Qué es alucinación en IA?", a:["Mejor rendimiento","Cuando inventa info no verificada","Un error de red","Un bug del navegador"], c:1},
  ];

  // Bonus “de por medio”
  const bonusFloors = new Set([3,6,9]);

  let floor = 1, lives = 3, score = 0, streak = 0, shield = 0, codeMaster = false;
  let bossHP = 3, bossIndex = 0;

  const el = id => document.getElementById(id);
  const floorEl = el("floor"), livesEl = el("lives"), scoreEl = el("score");
  const streakEl = el("streak"), shieldEl = el("shield"), modeEl = el("mode");
  const tagEl = el("tag"), qEl = el("question"), choicesEl = el("choices");
  const fbEl = el("feedback"), bossBar = el("bossbar"), bossInfo = el("bossinfo");
  el("resetBtn").onclick = resetGame;

  function clamp(x,min,max){ return Math.max(min,Math.min(max,x)); }

  function updateHUD(){
    floorEl.textContent = floor;
    livesEl.textContent = lives;
    scoreEl.textContent = score;
    streakEl.textContent = streak;
    shieldEl.textContent = shield;
    modeEl.textContent = codeMaster ? "⚡ Code Master Mode ACTIVO" : "";
    bossBar.style.width = (bossHP/3*100) + "%";
    bossInfo.textContent = (floor === 10)
      ? 👨‍🏫 Prof. IA: HP ${bossHP}/3 | Pregunta ${bossIndex+1}/3
      : "Se desbloquea al llegar al piso 10.";
  }

  function currentQuestion(){
    if(floor === 10) return bossQuestions[bossIndex];
    if(bonusFloors.has(floor)){
      const idx = [...bonusFloors].sort((a,b)=>a-b).indexOf(floor);
      return bonusQuestions[idx];
    }
    return baseQuestions[floor-1];
  }

  function renderQuestion(){
    updateHUD();
    fbEl.textContent = "";
    const cq = currentQuestion();
    tagEl.textContent = (floor === 10) ? "⚔️ Terraza - Boss Fight"
      : (bonusFloors.has(floor) ? "⭐ Piso bonus (vida extra)" : "📘 Piso normal");

    qEl.textContent = cq.q;
    choicesEl.innerHTML = "";
    cq.a.forEach((opt,i)=>{
      const b = document.createElement("button");
      b.textContent = String.fromCharCode(65+i)+") "+opt;
      b.onclick = ()=> answer(i);
      choicesEl.appendChild(b);
    });
  }

  function applyComboRewards(){
    if(streak === 3) shield += 1;
    if(streak >= 5) codeMaster = true;
  }

  function pointsForCorrect(){
    let mult = 1;
    if(streak >= 2) mult = 2;
    if(codeMaster) mult = 3;
    return 100 * mult;
  }

  function moveUp(steps=1){ floor = clamp(floor + steps, 1, 10); }
  function moveDown(steps=1){ floor = clamp(floor - steps, 1, 10); }

  function win(){
    tagEl.textContent = "📜 DIPLOMA";
    qEl.textContent = "🎉 ¡Llegaste a la terraza y venciste al profe de IA!";
    choicesEl.innerHTML = "";
    fbEl.innerHTML =
      `<div class="card" style="margin-top:10px">
        <div class="big">Certificado de Fundamentos en Ingeniería de Sistemas</div>
        <div class="small">Otorgado a: <b>Code Climb Champion</b></div>
        <div class="small">Puntaje final: <b>${score}</b></div>
        <div class="small">Firma: Prof. IA (calvito + barba de candado) ✅</div>
      </div>`;
    updateHUD();
  }

  function resetGame(){
    floor = 1; lives = 3; score = 0; streak = 0; shield = 0; codeMaster = false;
    bossHP = 3; bossIndex = 0;
    renderQuestion();
  }

  function answer(choiceIndex){
    const cq = currentQuestion();
    const correct = (choiceIndex === cq.c);

    // Boss fight
    if(floor === 10){
      if(correct){
        streak += 1; applyComboRewards();
        score += 200;
        bossHP -= 1; bossIndex += 1;
        fbEl.innerHTML = <span class="ok">✅ Correcto.</span> Le bajaste vida al profe IA.;
        if(bossHP <= 0) return win();
        return renderQuestion();
      } else {
        lives -= 1; streak = 0; codeMaster = false;
        fbEl.innerHTML = <span class="bad">❌ Incorrecto.</span> Rayo IA: pierdes 1 vida.;
        if(lives <= 0) return resetGame();
        return updateHUD();
      }
    }

    // Normal floors
    if(correct){
      streak += 1; applyComboRewards();
      score += pointsForCorrect();

      if(bonusFloors.has(floor)){
        lives += 1;
        fbEl.innerHTML = <span class="ok">⭐ BONUS correcto:</span> +1 vida y subes.;
        moveUp(1);
      } else if(codeMaster){
        fbEl.innerHTML = <span class="ok">⚡ Code Master:</span> salto doble.;
        moveUp(2);
        codeMaster = false; // se consume
      } else {
        fbEl.innerHTML = <span class="ok">✅ Correcto:</span> subes 1 piso.;
        moveUp(1);
      }
      return renderQuestion();
    } else {
      lives -= 1; streak = 0; codeMaster = false;

      if(shield > 0){
        shield -= 1;
        fbEl.innerHTML = <span class="bad">❌ Incorrecto,</span> pero el <b>escudo</b> te salvó: no caes.;
        if(lives <= 0) return resetGame();
        return updateHUD();
      }

      fbEl.innerHTML = <span class="bad">❌ Incorrecto:</span> caes 1 piso.;
      moveDown(1);
      if(lives <= 0) return resetGame();
      return renderQuestion();
    }
  }

  renderQuestion();
})();
</script>
</body>
</html>

Conclusión

Code Climb no es solo un juego de preguntas. Es una representación interactiva del camino que recorre un estudiante de Ingeniería de Sistemas: comenzar desde lo básico, enfrentar errores, aprender de ellos, mantener consistencia y finalmente superar retos más complejos como la inteligencia artificial.

Escalar el edificio simboliza el crecimiento académico. Derrotar al profesor en la terraza simboliza dominar los fundamentos. Y el diploma final no es solo un premio visual, sino una metáfora del aprendizaje logrado.

En esencia, Code Climb transforma el estudio de la codificación en una aventura retro donde cada respuesta correcta es un paso más hacia la cima.

Créditos

Autor: Cristopher Soto Viloria, Juan David Loaiza

Editor: Magister Ingeniero Carlos Pinzón

Código: UCIAG-9

Universidad: Universidad Central

Fuentes

Rosebud AI. (2026) “Create from Scratch”. Rosebud AI. https://rosebud.ai/#create-from-scratch-section
Claude AI. (2026) “Claude AI by Antrhopic”. Claude AI. https://claude.ai/