Повторно введите номер, который вы видите ниже. Эз правильно?
Идея проста. Отобразите число, а затем позвольте пользователю ввести число, которое они видят на экране. Однако есть поворот. Мы начинаем с отображения однозначного числа, а затем продолжаем добавлять количество отображаемых цифр по мере того, как пользователь переходит на более высокие уровни. Мы также вводим отображение времени ожидания для номера, так что номер будет отображаться только в течение определенного периода времени, а затем будет скрыт от пользователя. Эз правильно?
Я собираюсь пропустить часть html и css и сразу перейти к части vuejs и созданию игры.
Генерация случайного числа.
Сгенерировать случайное число в javascript довольно просто. Просто добавьте Math.random() и все готово. Однако проблема в том, что Math.random() генерирует случайное число только между 0 and 1. Мы хотим иметь возможность генерировать целые числа с n числом цифр. Код ниже позволяет нам это сделать.
Теперь, когда мы позаботились о генерации случайного числа, давайте создадим новый экземпляр vue с настройкой игры.
Давайте представим, что пользователь уже видел номер, как долго мы должны ждать, прежде чем скрыть его? Вот как я это сделал. let time = this.level * 160 . В the 160 нет ничего особенного. После тестирования с различным интервалом я пришел к выводу, что этот интервал будет довольно справедливым. Мы будем использовать setTimeout, чтобы скрыть номер, вызвав функцию hideNumber().
Последняя вещь. Нам нужно отобразить число, как только наш компонент загрузится. В vuejs это просто. Нам нужно поместить наш код в смонтированную функцию.
Собираем вместе.
Демо.
Этот пост был вдохновлен codepen Фама Микуна (версия React).
