2.8Lección 2.8: Proyecto: publica tu juego

La idea

El juego de la 1.14 vivía en la consola. Ahora tendrá su página, con un botón para jugar, y una dirección que puedes mandar a quien quieras.

Dos archivos:

• juego.js: el juego, dentro de una función.
• index.html: la página, con el botón que la llama.

El juego, en una función

Crea juego.js. Es el juego de la 1.14, con el arreglo de Cancelar, dentro de una función jugar():

function azar(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function jugar() {
  const secreto = azar(1, 100);
  let intentos = 0;
  let intento = 0;

  while (intento !== secreto) {
    const respuesta = prompt("Adivina el número (1-100):");

    if (respuesta === null) {
      break;
    }

    intento = Number(respuesta);
    intentos = intentos + 1;

    if (intento < secreto) {
      alert("Más alto");
    } else if (intento > secreto) {
      alert("Más bajo");
    }
  }

  if (intento === secreto) {
    alert("¡Acertaste en " + intentos + " intentos!");
  }
}

Al ir en una función, el juego no empieza solo: empieza cuando alguien llama a jugar(). Y cada partida tiene sus propias variables, así que se puede volver a jugar sin recargar.

La página

Sustituye el index.html de la 2.7 por este:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Adivina el número</title>
  </head>
  <body>
    <h1>Adivina el número</h1>
    <p>He pensado un número del 1 al 100.</p>
    <button onclick="jugar()">Jugar</button>

    <script src="juego.js"></script>
  </body>
</html>

• script carga juego.js en la página.
• onclick="jugar()" llama a la función al pulsar el botón.

Probar y publicar

1. Doble clic en index.html y juega una partida.
2. Si funciona, súbelo:

$ git add .
$ git commit -m "feat(juego): añade el juego"
$ git push

GitHub Pages ya estaba activado en la 2.7: en un par de minutos, el juego está en https://TU-USUARIO.github.io/mi-juego/.

Pruébalo

$ git switch -c hasta-mil

$ git add .
$ git commit -m "feat(juego): amplía el rango hasta 1000"
$ git switch main
$ git merge hasta-mil
$ git push

En resumen

• Una función hace que el juego empiece cuando tú digas.
• script carga el JavaScript en la página; onclick lo llama desde un botón.
• Probar en local, commit, push: y la web se actualiza.
• Tienes un juego publicado, con su historial, en un repositorio tuyo.