Привет, я снова вернулся с другой технической историей на «dev» на основе современного JavaScript & Немного HTML.
Мы будем строить игру под названием «Книжный крикет», которую я играл в моих учебных днях. Для тех, кто не знает об этой игре, я дам вам весь краткий обзор этого.
«Книга Крикет» играет среди 2 игроков, и в качестве второй половины имени «Крикет» предполагает, что игрок с большей займетю выигрывает игру.
Как мы играли в «школьные дни»?
- Мы использовали для выбора «книги» (толще, тем лучше!) И «Общее количество калиток» для каждого игрока.
- Каждый игрок на его/ее очередь, используемый для открытия книги на «номер случайных страниц».
- Затем мы использовали, чтобы отметить последнюю цифру этого «случайно выбранного номера страницы». Например, если я случайно открыл книгу к номеру страницы «102», поэтому мои прогоны для этого определенного поворота будут рассчитаны как «2 прогона».
- После замедления забитых прогонов книга «закрыта» и снова «открывается» на «номер случайных страниц» и следует за шагами 2 и 3 ‘.
- Если игрок получает «номер страницы», с его последней цифрой как «0» (например, 120 или 40), затем проигрыватель проигрывает 1 калиту.
- В каждом повороте пробеги «добавляются» на прогоны, забитые игроком в его/ее «предыдущих» поворотах. Это продолжается до тех пор, пока игрок потери все его/ее «калитки» или «пробежки» забили этот игрок, превосходит пробежки, забитые другими игроками.
- «Единственная цель» – «выиграть» игру, забивая «больше бега», чем ваш противник, прежде чем потерять все ваши «калитки».
Я знаю, к некоторым это может звучать знакомым и немного запутанным. Но мы должны смотреть на «Большую картинку», который является логическим кодом для создания этой игры.
Итак, давайте начнем с кодировки сейчас !!
Мы будем декодировать нашу игру в 2 частях:
Первая часть для HTML,
Мы построим «пользовательский интерфейс» нашей игры, используя базовые компоненты HTML, такие как:
- «H2» и «этикетки» теги для заголовков
- 2 поля ввода для ввода информации о «Размер книги» и «Всего калита».
- 3 «Кнопка» Теги для «Player 1», «Player 2 ‘&’ Новый матч» с обработчиками событий.
Вторая часть для JavaScript,
Мы будем кодировать «Mainjsss» в подпэптах в соответствии с их функциональными возможностями индивидуально:
- В Первый Субрезка, мы будем инициализации наших «глобальных переменных».
- В Второй Определена функция суб-части, Playerwin (), которая сравнила бы окончательные оценки как игроков, чтобы решить победителя.
- В Третий Подразделение, мы определим кнопку «Слушатель событий», связанные с «Player 1». Этот «слушатель событий» пожарит две функции. Первая функция – «CalPlayerscore ()», которая рассчитывает прогоны, набранные игроком на каждый ход, используя «математические функции» JavaScript. Вторая функция – «PlayerturnUrn1 ()», которая будет отслеживать забитые прогоны, а калитки остались на «Player 1».
- В Четвертый Подразделение, мы определим кнопку «Прослушатель событий», связанные с «Player 2». Этот «слушатель событий» пожарит две функции. Первая функция – «CalPlayerscore ()», которая рассчитывает прогоны, набранные игроком на каждый ход, используя «математические функции» JavaScript. Вторая функция – «Playerturn2 ()», которая будет отслеживать забитые прогоны, а калитки остались на «Player 2».
- В Пятый Подпункта, мы определим «слушатель события» для «нового матча». Этот «прослушиватель событий» очистит консоль и позволит «Player 1 ‘&’ Player 2 ‘кнопки для нового совпадения. Он также сбросит глобальные переменные в их значениях по умолчанию.
Наконец, пришло время увидеть код в действии ниже:
Прикрепление под кодом с помощью общественного GitHub Gist Link.
Если вам понравились мои усилия, чтобы поощрить этот пост через отзывы и комментарии. Я ценю поддержку. Спасибо !
Гитаншу Choudhary
Gitanshu-Choudhary.
Оригинал: “https://dev.to/gitanshu_choudhary/the-book-cricket-game-built-via-modern-javascript-html-4bhf”