Kurs JavaScript: gra w zgadywanie liczby na klasach ES6

To ćwiczenie ma pomóc Ci zastosować w praktyce podstawowe pojęcia JavaScriptu poznane w samouczku. Stworzysz grę w zgadywanie liczb, która wykorzystuje zmienne, warunki, funkcje, obiekty i klasy (ES6), manipulację stroną HTML, zdarzenia i ich obsługę, a także moduły oraz import/eksport (ES6).

To ćwiczenie jest idealne dla początkujących w JavaScripcie, którzy chcą przećwiczyć wiedzę i lepiej zrozumieć podstawowe elementy języka. Śmiało wracaj do samouczka, jeśli masz trudności: odpowiedzi tam są, z wyjątkiem klas, omówionych w artykule o klasach w JavaScripcie.

Pliki do utworzenia

• game.js (importowany moduł zawierający klasę gry)
• script.js (plik główny, który importuje moduł game.js)
• index.html (zawierający poniższy kod)

<!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>

Polecenia

1. W pliku game.js zadeklaruj klasę Game z następującymi właściwościami i metodami:

   • Właściwość randomNumber zawierającą liczbę losową z zakresu od 1 do 100 (użyj Math.random() i Math.floor())
   • Właściwość attempts zawierającą liczbę prób użytkownika
   • Właściwość found wskazującą, czy liczba została odgadnięta (wartość logiczna)
   • Metodę checkNumber, która przyjmuje liczbę jako argument i sprawdza, czy jest poprawna, porównując wartość wpisaną przez użytkownika z liczbą losową. Jeśli liczba jest poprawna, ustaw właściwość found na prawdę. Jeśli jest błędna, wyświetl komunikat mówiący, czy liczba jest większa, czy mniejsza.
   • Metodę resetGame, która przywraca właściwościom attempts i found wartości początkowe i losuje nową liczbę.

2. W pliku script.js zaimportuj moduł game.js instrukcją import. Utwórz instancję klasy Game i zapisz ją w zmiennej.

3. W pliku script.js napisz funkcję obsługującą zdarzenie wysłania formularza. Ta funkcja ma:

   • Zwiększyć licznik prób w instancji klasy Game
   • Odczytać wartość liczby wpisanej przez użytkownika
   • Użyć metody checkNumber instancji klasy Game, żeby sprawdzić, czy liczba jest poprawna
   • Jeśli odpowiedź jest poprawna, zwrócić komunikat z gratulacjami, a w przeciwnym razie wysłać komunikat z checkNumber.

4. Podepnij zdarzenie wysłania formularza pod utworzoną wcześniej funkcję.

5. Dodaj obsługę zdarzenia dla kliknięcia przycisku „Zagraj ponownie”, który znajduje się w komunikacie z gratulacjami. Ta funkcja ma użyć metody resetGame instancji klasy Game, żeby zresetować grę oraz wyczyścić komunikat z gratulacjami i formularz wpisywania liczby.

6. Podepnij właściwy plik JavaScript do swojej strony index.html

7. Przetestuj grę, otwierając plik index.html w przeglądarce. Upewnij się, że działa poprawnie i spełnia polecenia.

Rozwiązanie

Oto jedno z możliwych rozwiązań, przetestowane w przeglądarce. Klasa mieszka w 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 importuje klasę, nasłuchuje formularza i wyświetla komunikat:

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);

Pozostaje podpiąć skrypt do strony, tuż przed </body>. Atrybut type="module" jest niezbędny, aby instrukcja import działała, a moduły nie ładują się z pliku otwartego bezpośrednio (file://): udostępnij katalog małym lokalnym serwerem, na przykład npx serve albo rozszerzeniem Live Server w VS Code.

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

Ten sam język napędza znacznie bogatsze gry. W Clairbois, małe RPG napisane w JavaScripcie przez AI Codex, zagrasz bezpośrednio w naszym artykule o tym, jak stworzyć grę z ChatGPT.

Mam nadzieję, że ten kurs JavaScriptu dla początkujących okazał się pomocny. Masz już podstawy JavaScriptu w ręku, więc rozejrzyj się po serwisie: znajdziesz tam sporo kursów i artykułów o JavaScripcie, które pomogą ci podnieść umiejętności.