Carrera Creador IA · Nivel 3 de 9 · 9-15 añosPRO

Programar de verdad

Variables, decisiones y bucles: tu primer mini-juego.

Tu Carrera · 0 de 9 nivelesse hacen en orden

Paso 1 de 6

El esqueleto del juego

Vas a programar un juego: el jugador escribe un número y la web le dice si le atinó. El <script> ya tiene la lógica; tú la completas.

👉 Mira el código y dale Siguiente cuando lo entiendas.

📖 Este paso es solo leer — toca “Siguiente”.

🌐 En inglés

if / else = decisión: si pasa esto, haz aquellocondition = la pregunta verdadera/falsa del ifcompare = ver si dos valores son iguales (===)

💡 Esto que vas a escribir tú, también se lo puedes pedir a una IA. Aquí aprendes cómo funciona el código por dentro — y en “De idea a app” aprendes a pedírselo bien a la IA.

tu código · index.html

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>Adivina el número</title>
  <style>
    body{font-family:system-ui,sans-serif;background:#07210f;color:#e7f6ee;min-height:100vh;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}
    h1{color:#34d399;margin:0}
    input{font-size:22px;padding:10px;width:120px;text-align:center;border-radius:10px;border:2px solid #34d399;background:#0a2a18;color:#fff}
    button{font-size:18px;font-weight:800;padding:12px 22px;border:0;border-radius:999px;background:#34d399;color:#062;cursor:pointer}
    #msg{font-size:22px;font-weight:800;min-height:30px}
  </style>
</head>
<body>
  <h1></h1>
  <input id="g" type="number">
  <button onclick="probar()"></button>
  <p id="msg">Escribe un numero y prueba</p>
  <script>
    const secreto = ;
    function probar(){
      const intento = Number(document.getElementById('g').value);
      const msg = document.getElementById('msg');
      if (intento === secreto) {
        msg.textContent = "";
        try{parent.postMessage({aik:'meta',valor:1},'*')}catch(e){}
      } else if (intento < secreto) {
        msg.textContent = "";
      } else {
        msg.textContent = "";
      }
    }
  </script>
</body>
</html>

tu web en vivo · 11 etiquetas

← Nivel 2 Nivel 4: IA en tu app →