Разработайте игру "Угадай, где монета"

JavaScriptJavaScriptBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом проекте вы научитесь создавать простую игру "Угадай, где монета". В игре случайным образом выбираются три из девяти чашек, в которые кладутся монеты, и игрок должен угадать правильные чашки, введя соответствующие номера.

👀 Предпросмотр

Предпросмотр игры "Угадай, где монета"

🎯 Задачи

В этом проекте вы научитесь:

  • Реализовать функцию findNum для извлечения уникальных чисел из ввода пользователя.
  • Реализовать функцию randomCoin для генерации трех неповторяющихся случайных чисел в диапазоне от 1 до 9.
  • Разобраться с структурой каталога проекта и предоставленными файлами.

🏆 Достижения

После завершения этого проекта вы сможете:

  • Работать с функциями и массивами JavaScript.
  • Использовать регулярные выражения для извлечения конкретных данных из строки.
  • Генерировать случайные числа и обеспечивать их уникальность.
  • Следовать пошаговым инструкциям для завершения проекта.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/str_manip("String Manipulation") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/arith_ops -.-> lab-299865{{"Разработайте игру #quot;Угадай, где монета#quot;"}} javascript/loops -.-> lab-299865{{"Разработайте игру #quot;Угадай, где монета#quot;"}} javascript/str_manip -.-> lab-299865{{"Разработайте игру #quot;Угадай, где монета#quot;"}} javascript/array_methods -.-> lab-299865{{"Разработайте игру #quot;Угадай, где монета#quot;"}} javascript/dom_select -.-> lab-299865{{"Разработайте игру #quot;Угадай, где монета#quot;"}} javascript/dom_manip -.-> lab-299865{{"Разработайте игру #quot;Угадай, где монета#quot;"}} javascript/dom_traverse -.-> lab-299865{{"Разработайте игру #quot;Угадай, где монета#quot;"}} end

Настройка структуры проекта

В этом шаге вы настроите файлы и структуру проекта. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте папку проекта. Структура каталога выглядит так:

├── css
├── images
├── index.html
└── js
    ├── findCoin.js
    └── index.js

где:

  • css - папка для файлов стилей.
  • images - папка для файлов изображений.
  • index.html - главная страница.
  • js/index.js - JavaScript-файл для отображения и анимации монет.
  • js/findCoin.js - JavaScript-файл, который необходимо завершить.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Реализация функции findNum

В этом шаге вы реализуете функцию findNum в файле js/findCoin.js.

  1. Откройте файл js/findCoin.js.

  2. Найдите функцию findNum:

    // Составьте массив из входных значений от 1 до 9
    function findNum(input_values) {
      // TODO
      const reg = /\d/g;
      const uniqueNumbers = [];
      const nums = input_values.match(reg) || [];
      nums.forEach((num) => {
        const parsedNum = parseInt(num);
        if (!isNaN(parsedNum) && !uniqueNumbers.includes(parsedNum)) {
          uniqueNumbers.push(parsedNum);
        }
      });
      return uniqueNumbers;
    }
  3. Функция findNum принимает параметр input_values и возвращает массив уникальных чисел (от 1 до 9), найденных в вводе.

  4. Реализуйте функцию findNum по следующим шагам:

    • Используйте регулярное выражение /\d/g, чтобы найти все цифры в строке input_values.
    • Создайте пустой массив uniqueNumbers, чтобы хранить уникальные числа.
    • Пройдитесь по найденным числам и преобразуйте их в целые числа с использованием parseInt.
    • Проверьте, является ли преобразованное число допустимым (не NaN) и не находится ли уже в массиве uniqueNumbers.
    • Если число допустимо и уникально, добавьте его в массив uniqueNumbers.
    • Верните массив uniqueNumbers.

Реализация функции randomCoin

В этом шаге вы реализуете функцию randomCoin в файле js/findCoin.js.

  1. Найдите функцию randomCoin:

    let randomCoin = () => {
      let randomNumArr = [];
      // TODO
      while (randomNumArr.length < 3) {
        const randomNumber = Math.floor(Math.random() * 9) + 1;
        if (!randomNumArr.includes(randomNumber)) {
          randomNumArr.push(randomNumber);
        }
      }
      return randomNumArr;
    };
  2. Функция randomCoin должна генерировать массив из 3 неповторяющихся случайных чисел в диапазоне от 1 до 9.

  3. Реализуйте функцию randomCoin по следующим шагам:

    • Создайте пустой массив randomNumArr, чтобы хранить случайные числа.
    • Используйте цикл while, чтобы сгенерировать 3 уникальных случайных числа в диапазоне от 1 до 9.
    • Внутри цикла сгенерируйте случайное число с использованием Math.floor(Math.random() * 9) + 1.
    • Проверьте, не находится ли сгенерированное число уже в массиве randomNumArr.
    • Если число уникально, добавьте его в массив randomNumArr.
    • Как только в массиве randomNumArr появятся 3 уникальных числа, верните массив.

После завершения этих шагов игра "Угадай, где монета" должна быть полностью функциональной. GIF с выполнением всех функций выглядит так:

Завершенный эффект
✨ Проверить решение и практиковаться

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.