Ejercicio de JavaScript: juego de adivinar un número con clases ES6

Este ejercicio está diseñado para ayudarle a poner en práctica los conceptos básicos de JavaScript que aprendió en el tutorial. Va a crear un juego de adivinar números que moviliza las variables, las condiciones, las funciones, los objetos y las clases (ES6), la manipulación de la página HTML, los eventos y los gestores de eventos, así como los módulos y las importaciones/exportaciones (ES6).

Este ejercicio es ideal para los principiantes en JavaScript que quieren practicar y mejorar su comprensión de los distintos elementos básicos del lenguaje. No dude en volver al tutorial si tiene dificultades: las respuestas están ahí, salvo las clases, presentadas en el artículo sobre las clases en JavaScript.

Archivos que hay que crear

• game.js (el módulo importado que contiene la clase del juego)
• script.js (el archivo principal, que importa el módulo game.js)
• index.html (con el código de abajo)

<!DOCTYPE html>
<html>
<head>
    <title>Jeu de devinette de nombres</title>
    <style>
        body {
            background-color: #e0e0e0;
        }

h1 {
            font-size: 24px;
            text-align: center;
            color: #333;
        }

#form {
            display: flex;
            justify-content: center;
        }

#number {
            width: 50px;
            margin-right: 10px;
            font-size: 16px;
            text-align: center;
        }

button {
            font-size: 16px;
            padding: 10px;
            border: none;
            background-color: #333;
            color: #fff;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>Jeu de devinette de nombres</h1>
<p id="message"></p>
<form id="form">
    <input type="number" id="number">
    <button type="submit">Deviner</button>
</form>
</body>
</html>

Instrucciones

1. En el archivo game.js, declara una clase Game con las propiedades y los métodos siguientes:

   • Una propiedad randomNumber que contiene un número aleatorio entre 1 y 100 (usa Math.random() y Math.floor())
   • Una propiedad attempts que contiene el número de intentos del usuario
   • Una propiedad found que indica si se ha acertado el número o no (un booleano)
   • Un método checkNumber que recibe un número como argumento y comprueba si es correcto, comparando el valor introducido por el usuario con el número aleatorio. Si el número es correcto, pon la propiedad found a true. Si es incorrecto, muestra un mensaje que diga si el número es mayor o menor.
   • Un método resetGame que reinicia las propiedades attempts y found a su valor inicial y elige un nuevo número aleatorio.

2. En el archivo script.js, importa el módulo game.js con la instrucción import. Crea una instancia de la clase Game y guárdala en una variable.

3. En el archivo script.js, escribe una función para gestionar el evento de envío del formulario. Esa función tendrá que:

   • Incrementar el contador de intentos de la instancia de la clase Game
   • Recuperar el valor del número introducido por el usuario
   • Usar el método checkNumber de la instancia de la clase Game para comprobar si el número es correcto
   • Si la respuesta es correcta, devolver un mensaje de felicitación, si no, enviar el mensaje de checkNumber.

4. Asocia el evento de envío del formulario a la función que acabas de escribir.

5. Añade un manejador de eventos para el clic en el botón «Jugar otra vez» que hay dentro del mensaje de felicitación. Esa función tendrá que usar el método resetGame de la instancia de la clase Game para reiniciar el juego y borrar el mensaje de felicitación y el formulario de entrada del número.

6. Enlaza el archivo JavaScript correcto en tu página index.html

7. Prueba tu juego abriendo el archivo index.html en un navegador. Asegúrate de que funciona bien y de que cumple las instrucciones.

Solución

Esta es una solución posible, probada en un navegador. La clase vive en game.js:

export default class Game {
  constructor() {
    this.resetGame();
  }

  resetGame() {
    this.randomNumber = Math.floor(Math.random() * 100) + 1;
    this.attempts = 0;
    this.found = false;
  }

  checkNumber(number) {
    if (number === this.randomNumber) {
      this.found = true;
      return 'Bravo, vous avez trouvé !';
    }
    return number < this.randomNumber ? 'Le nombre est plus grand.' : 'Le nombre est plus petit.';
  }
}

script.js importa la clase, escucha el formulario y muestra el mensaje:

import Game from './game.js';

const game = new Game();
const form = document.getElementById('form');
const input = document.getElementById('number');
const message = document.getElementById('message');

function replay() {
  game.resetGame();
  message.textContent = '';
  form.hidden = false;
  input.focus();
}

function handleSubmit(event) {
  event.preventDefault();
  game.attempts += 1;
  const result = game.checkNumber(Number(input.value));
  input.value = '';

  if (game.found) {
    message.innerHTML = `Bravo, trouvé en ${game.attempts} tentative(s) ! <button type="button" id="replay">Jouer à nouveau</button>`;
    form.hidden = true;
    document.getElementById('replay').addEventListener('click', replay);
  } else {
    message.textContent = result;
  }
}

form.addEventListener('submit', handleSubmit);

Solo queda enlazar el script a la página, justo antes de </body>. El atributo type="module" es indispensable para que la instrucción import funcione, y los módulos no se cargan desde un archivo abierto directamente (file://): sirva la carpeta con un pequeño servidor local, por ejemplo npx serve o la extensión Live Server de VS Code.

<script type="module" src="script.js"></script>

El mismo lenguaje mueve juegos mucho más completos. Clairbois, un pequeño RPG escrito en JavaScript por la IA Codex, se puede jugar directamente en nuestro artículo sobre cómo crear un juego con ChatGPT.

Espero que este tutorial de JavaScript para principiantes te haya servido. Ya deberías tener las bases del lenguaje, date una vuelta por el sitio, donde encontrarás bastantes tutoriales y artículos sobre JavaScript para seguir mejorando.