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

Введение

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

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

🎯 Задачи

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

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

🏆 Достижения

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

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

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

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

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

├── 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, чтобы улучшить свои навыки.