Угадай число…
Внимание, внимание !!! Эта статья включает в себя базовые знания HTML, CSS, JS и немного юмора.
ИНГРЕДИЕНТЫ
- 1 кусок, менее закодированный, файл HTML
- 1 штука, очень приятная для глаз таблица стилей CSS. Будьте смелыми в своих удовольствиях.
- JS файл с тремя функциями. Найти на рынке такой рецепт с небольшим ингредиентом очень сложно :).
Перед написанием кода игры я настоятельно рекомендую вам написать код самостоятельно. Даже если вы проиграете, вы приобретете аналитическое мышление, а это очень важно на пути к тому, чтобы стать разработчиком.
После того, как вы создали HTML-страницу и стилизовали ее с помощью CSS, я хочу упомянуть незаменимые функции. Без этого ваша игра будет выглядеть как еда без соли и растительного масла.
Функции, которые необходимо использовать;
- document.getElementById («заданный идентификатор»): используется для получения элемента со страницы HTML с #id, заданным пользователем.
- Math.random (): функция random () используется для генерации случайного числа от 0 (включительно) до 1 (исключая). Вам нужно умножить и добавить 1 в том интервале, в котором вы хотите сгенерировать число.
- Math.floor (): Функция floor () используется для возврата числа к ближайшему целому (вниз). Значение не будет округлено, если переданный аргумент является целым числом.
На заднем плане мы должны сравнить два числа. Первый - это случайное число, сгенерированное JavaScript. Второй - это номер, сгенерированный пользователем. Для каждого несоответствия мы должны сообщить, сколько раз игрок пытается. Сравнивая числа, мы будем использовать, как вы догадались, операторы if.
Присваиваем переменные. Для генерации случайного числа мы используем функцию Math.random (). Подробности упомянуты выше.
С помощью Javascript мы можем обращаться к элементам в HTML с помощью идентификаторов, классов или атрибутов и т. Д. Если вы проверили мою HTML-страницу, то уже видели, что я дал идентификатор во входном элементе «number». Чтобы достичь элемента с идентификатором, мы используем «document.getElementById (« given id »)». Нам нужно получить число из HTML, чтобы мы могли использовать его в нашей функции для сравнения с операторами if. Затем мы назначаем событие с помощью метода onclick для запуска созданной нами функции.
Чтобы было легче сравнивать, я использовал ‹input type =« number »›, чтобы игрок не мог вставлять никакие значения, кроме числа.
После этого, если два числа равны друг другу. Предупреждаем, что игрок выигрывает игру.
Если числа не равны друг другу, есть два условия. Либо введенное игроком число меньше или больше сгенерированного числа. В любом случае мы увеличиваем счетчик на единицу, и нам нужно отправить игроку сообщение в HTML. С помощью JS мы можем отправлять, изменять или удалять элементы в HTML. Как я упоминал выше, мы достигаем элемента с помощью идентификатора. Чтобы отправить значение в HTML, мы используем метод innerHTML. Если число меньше, мы должны сказать игроку, чтобы он угадал большее число, в противном случае - меньшее число.
Теперь наш алгоритм готов. Мы должны снова дойти до ‹input type =« number »› с его идентификатором внизу, чтобы после вставки числа игрок не пытался удалить вставленное число снова и снова. И если вы зададите для своей кнопки стиль «cursor: pointer;», игрок не будет пытаться каждый раз нажимать на поле ввода, чтобы вставить значение.
Теперь игра готова, но что будет, если игрок захочет сыграть снова? Нам нужно спросить игрока, хочет ли он играть снова. В этом случае мы можем использовать метод Window confirm (). Этот метод отображает диалоговое окно с указанным сообщением, а также кнопки ОК и Отмена, а окно подтверждения часто используется, если вы хотите, чтобы пользователь что-то подтвердил или принял. Он возвращает логическое значение, указывающее, была ли нажата кнопка «ОК» или «Отмена» в диалоговом окне.
По методу подтверждения вы можете написать в кавычках то, что хотите спросить у игрока. Если ответ вернет True, нам нужно сгенерировать новое случайное число и сбросить счетчик и значения сообщений, которые мы отправили проигрывателю в HTML. Вы также можете сбросить значение ‹input type =« number »›.
Чтобы начать игру, нажмите здесь.
