Pig Game Design с использованием JavaScript

Опубликовано: 5 Января, 2022

В этой статье мы объясним шаги и различную логику, необходимые для создания знаменитой игры «Свинья», которая представляет собой виртуальную игру в кости.

Об игре: В этой игре пользовательский интерфейс (UI) содержит пользователя / игрока, который может делать три вещи, а именно:

В этой игре будет два игрока. В начале игры игрок 1 будет текущим игроком, а игрок 2 - неактивным .

  1. Бросьте кости: текущий игрок должен бросить кости, после чего будет сгенерировано случайное число. Если текущий игрок получает на кубиках любое число, кроме 1, то это число будет добавлено к текущему счету ( изначально текущий счет будет 0 ), а затем новый счет будет отображаться в разделе « Текущий счет ». Примечание: если текущий игрок получает 1 на кубике, игроки меняются местами, т.е. текущий игрок становится неактивным и наоборот.
  2. Удерживать: если текущий игрок нажимает « УДЕРЖАТЬ» , текущий счет будет добавлен к общему счету . Когда активный игрок нажимает кнопку «Удержать», оценивается общий счет. Если общий счет> = 100, то побеждает текущий игрок, в противном случае игроки меняются местами.
  3. Сброс: все очки устанавливаются на 0, и игрок 1 устанавливается как первый игрок (текущий игрок).

Создание игры: будучи игрой, визуализируемой веб-браузером, она создается с помощью HTML, CSS (для Front-end) и JavaScript (для Back-end). Основная логика игры заключается в файле JS, тогда как внешний вид и пользовательский интерфейс отображаются с помощью HTML и CSS. В этом проекте есть четыре основных типа файлов:

  • HTML-файл (index.html)
  • CSS-файл (style.css)
  • Файл JavaScript (файл script.js)
  • Изображения (файл dice.png)

Мы проанализируем все эти файлы и таким образом поможем вам понять их работу / вклад в эту игру. Итак, сначала давайте начнем с файла index.html:

Файл HTML: файл Index.html - это файл, который позволяет веб-браузерам понимать и, таким образом, интерпретировать тип документа, который мы создаем. Это означает язык гипертекстовой разметки , наши веб-браузеры читают этот файл и понимают его компонент через механизм V8 (который анализирует код на языке, чтобы браузер мог его понять). Ниже представлен HTML-код этой игры:

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
< link rel = "stylesheet" href = "style.css" />
< title >Pig Game Design using JavaScript</ title >
</ head >
< body >
< div class = "container" >
< section class = "player player--0 player--active" >
< div class = "tscore" >
< h2 class = "name" id = "name--0" >
Total Score< br >
< span class = "pl" >Player 1</ span >
</ h2 >
< p class = "score" id = "score--0" >43</ p >
</ div >
< div class = "current" >
< p class = "current-label" >Current Score</ p >
< p class = "current-score" id = "current--0" >0</ p >
</ div >
</ section >
< section class = "player player--1" >
< div class = "tscore" >
< h2 class = "name" id = "name--1" >
Total Score< br >
< span class = "pl" >Player 2</ span >
</ h2 >
< p class = "score" id = "score--1" >24</ p >
</ div >
< div class = "current" >
< p class = "current-label" >Current Score</ p >
< p class = "current-score" id = "current--1" >0</ p >
</ div >
</ section >
< img src = "dice-5.png"
alt = "Playing dice" class = "dice" />
< button class = "btn btn--new" >Start Game</ button >
< button class = "btn btn--roll" >Roll dice</ button >
< button class = "btn btn--hold" >Hold</ button >
</ div >
< script src = "gfg.js" ></ script >
</ body >
</ html >

В приведенном выше коде мы использовали различные классы (например, btn btn – roll, rte), они будут использоваться для стилизации в файле CSS и обсудим их в файлах CSS.

Файл CSS: для форматирования и стилизации разметки, созданной HTML, нам нужны каскадные таблицы стилей, чтобы разметка (код) выглядела лучше. Ниже приведен код CSS для игры. Перед тем, как погрузиться в код, просто посмотрите, какие классы и идентификаторы используются для каких целей:

  1. Для всей HTML-страницы и элементов: * повлияет на каждый элемент и тег в разметке. Мы использовали еще два тега, чтобы обеспечить определенный стиль, который представляет собой стиль тега html и тега body.
  2. Элементы макета: там определены основной тег и стиль класса игрока. Мы определили атрибут позиции для основного тега и установили его свойство относительным.
  3. Самостоятельные классы: общий стиль, необходимый для того, чтобы страница была более привлекательной.
  4. Абсолютно позиционированные классы: я установил атрибут position для btn и других классов и установил его значение в absolute, поскольку мы должны убедиться, что кнопки и другие элементы всегда находятся в нужном месте на странице. Абсолютная позиция будет определять расположение этого конкретного элемента в соответствии с элементом, который позиционируется относительно (в данном случае это основной тег).

CSS

* {
margin : 0 ;
padding : 0 ;
}
body {
height : 100 vh;
display : flex;
justify- content : center ;
align-items: center ;
}
.container {
position : relative ;
width : 80% ;
height : 90% ;
background-color : lightgreen;
overflow : hidden ;
display : flex;
}
.player {
flex: 50% ;
padding : 150px ;
display : flex;
flex- direction : column;
align-items: center ;
transition: all 0.75 s;
}
.name {
position : relative ;
font-weight : bold ;
font-size : 38px ;
text-align : center ;
}
.pl {
font-size : 24px ;
}
.tscore {
background-color : #fff ;
border-radius: 9px ;
width : 65% ;
padding : 2 rem;
text-align : center ;
transition: all 0.75 s;
}
.score {
font-size : 38px ;
font-weight : bold ;
margin-bottom : auto ;
padding-top : 10px ;
}
.player--active {
background-color : green ;
}
.player--active .current {
opacity: 1 ;
}
.current {
margin-top : 10 rem;
background-color : #fff ;
border-radius: 9px ;
width : 65% ;
padding : 2 rem;
text-align : center ;
transition: all 0.75 s;
}
.current-label {
text-transform : uppercase ;
margin-bottom : 1 rem;
font-size : 1.7 rem;
color : #ddd ;
}
.current-score {
font-size : 3.5 rem;
}
.btn {
position : absolute ;
left : 50% ;
transform: translateX( -50% );
color : rgb ( 7 , 124 , 69 );
border : none ;
font-size : 30px ;
cursor : pointer ;
font-weight : bold ;
background-color : rgba( 255 , 255 , 255 , 0.6 );
backdrop-filter: blur( 10px );
padding : 10px 30px ;
border-radius: 10px ;
}
.btn--new {
top : 4 rem;
}
.btn--roll {
top : 39.3 rem;
}
.btn--hold {
top : 46.1 rem;
}
.dice {
position : absolute ;
left : 50% ;
top : 24 rem;
transform: translateX( -50% );
}
.player--winner {
background-color : #003612 ;
}
.player--winner .name {
font-weight : 700 ;
color : #c7365f ;
}
. hidden {
display : none ;
}

В HTML-коде мы предоставили имена различных классов. В этом файле мы представили их различные функции. Файл CSS играет важную роль в улучшении внешнего вида веб-страницы или игры (только в случае веб-браузеров).

До сих пор пользовательский интерфейс игры создавался идеально, теперь самое сложное. Итак, давайте погрузимся в игровую логику ...

Файл JavaScript: есть несколько переменных JavaScript, мы можем использовать два типа переменных, а именно let и константу. Можно изменить переменные, объявленные с помощью let, в то время как переменные, объявленные с помощью константы, изменить нельзя. В файле JavaScript мы в основном выполняем манипуляции с DOM (все в JavaScript является типом объектов, поэтому мы называем пользовательский интерфейс объектной моделью документа). Итак, document.querySelector () это способ выбора элементов из DOM.

Чтобы понять рабочий процесс логики, мы должны сначала понять концепцию слушателей событий. Слушатели событий - это функции, которые выполняют действие на основе определенных событий. Они ждут, когда произойдет конкретное событие. Всего у нас есть 03 слушателя событий для этой игры: btnRoll, btnHold, btnNew. Мы разберемся с функциями всех этих слушателей событий:

Примечание: прежде чем перейти к разделу обработчиков событий, мы должны объявить некоторые переменные в файле, чтобы мы могли использовать их позже в нашей игровой логике.

Javascript

'use strict' ;
// Selecting elements
const player0El = document.querySelector( '.player--0' );
const player1El = document.querySelector( '.player--1' );
const score0El = document.querySelector( '#score--0' );
const score1El = document.getElementById( 'score--1' );
const current0El = document.getElementById( 'current--0' );
const current1El = document.getElementById( 'current--1' );
const diceEl = document.querySelector( '.dice' );
const btnNew = document.querySelector( '.btn--new' );
const btnRoll = document.querySelector( '.btn--roll' );
const btnHold = document.querySelector( '.btn--hold' );
let scores, currentScore, activePlayer, playing;

В самом начале файла JavaScript есть строка use strict. Цель «use strict» - указать, что код должен выполняться в «строгом режиме». Все современные браузеры поддерживают «строгое использование», кроме Internet Explorer 9 и ниже.

Теперь давайте посмотрим на код для каждого из трех обработчиков событий.

1. Обработчик событий btnRoll:

Javascript

// Rolling dice functionality
btnRoll.addEventListener( 'click' , function () {
if (playing) {
// 1. Generating a random dice roll
const dice = Math.trunc(Math.random() * 6) + 1;
// 2. Display dice
diceEl.classList.remove( 'hidden' );
diceEl.src = `dice-${dice}.png`;
// 3. Check for rolled 1
if (dice !== 1) {
// Add dice to current score
currentScore += dice;
document.getElementById(
`current--${activePlayer}`
).textContent = currentScore;
} else {
// Switch to next player
switchPlayer();
}
}
});

Этот обработчик событий работает всякий раз, когда игрок нажимает кнопку Roll (поэтому мы использовали там событие click). Затем есть функция обратного вызова, которая начинается с блока if-else . Поскольку мы объявили переменную play = true , блок if этого обработчика события будет иметь значение true и, следовательно, будет выполнен код блока if. Следующие шаги впереди:

  1. Шаг 1: после того, как игрок нажимает кнопку броска кубика, этот обработчик событий генерирует случайное число с помощью функции Math.trunc (). Мы использовали функцию Math.trunc (), потому что эта функция возвращает целую часть случайно сгенерированной функции и добавила к ней 1, потому что функция random () может генерировать любое число от 0 до 1, но в нашем случае мы только нужны числа от 1 до 6. <br> Что такое переменная игральных костей: Переменная игральных костей будет хранить случайно сгенерированное число. Скажем, функция Math.random () генерирует число 0,02. Согласно коду, первые 0,02 будут умножены на 6. Таким образом, переменная dice теперь будет иметь значение 0,12. Затем в игру вступит функция Math.trunc (), которая сделает переменную кубика равной 0. Теперь к переменной будет добавлено 1, что сделает кубик = 1 (это то, что нам нужно в качестве числа для наших кубиков).
  2. Шаг 2: Теперь у нас есть счет для кубиков, мы должны отобразить кубики, соответствующие количеству кубиков. (В файле CSS мы создали класс с именем hidden, который сделает кубики скрытыми изначально в начале игры). Но поскольку теперь у нас есть номер кубика, который будет отображаться в виде изображения кубика, мы должны удалить скрытый класс. Это достигается с помощью строки diceE1.classList.remove ('hidden'), а затем правильное изображение игральных костей отображается в пользовательском интерфейсе.
  3. Шаг 3. Теперь, согласно правилам игры, мы должны проверить число на кубиках. Таким образом, если число кубиков не равно 1, текущий счет обновляется . Если число игральных костей равно 1, вызывается switchPlayer () .

Javascript

const switchPlayer = function () {
document.getElementById(`current--${activePlayer}`).textContent = 0;
currentScore = 0;
activePlayer = activePlayer === 0 ? 1 : 0;
player0El.classList.toggle( 'player--active' );
player1El.classList.toggle( 'player--active' );
};

Согласно правилам: «Если игрок выбрасывает 1, он теряет все свои текущие очки» . Та же функциональность достигается за счет этой функции.

activePlayer = activePlayer === 0? 1: 0 {Это тернарный оператор, в котором мы говорим, что если activeplayer равен 0, то сделайте его 1, а если он сделал, то измените его на 0.

2. btnHold обработчик событий

Javascript

btnHold.addEventListener( 'click' , function () {
if (playing) {
// 1. Add current score to active player's score
scores[activePlayer] += currentScore;
// scores[1] = scores[1] + currentScore
document.getElementById(`score--${activePlayer}`)
.textContent = scores[activePlayer];
// 2. Check if player's score is >= 100
if (scores[activePlayer] >= 100) {
// Finish the game
playing = false ;
diceEl.classList.add( 'hidden' );
document
.querySelector(`.player--${activePlayer}`)
.classList.add( 'player--winner' );
document
.querySelector(`.player--${activePlayer}`)
.classList.remove( 'player--active' );
} else {
// Switch to the next player
switchPlayer();
}
}
});

Этот обработчик событий запускается всякий раз, когда игрок нажимает кнопку HOLD. Ниже приведены этапы работы этого обработчика:

  1. Шаг 1: Как только игрок нажимает кнопку «Удерживать», текущий счет добавляется к общему счету этого игрока.
  2. Шаг 2: После этого шага производится оценка общих баллов. Если общее количество очков превышает 100, то игра завершается, а затем класс игрока-победителя (который делает цвет фона: черный и меняет цвет и вес шрифта) и удаляет класс активного игрока.

3. Обработчик событий btnNew:

btnNew.addEventListener ('click', init): всякий раз, когда инициализируется новая игра, этот обработчик событий запускается. Он только инициализирует функцию Init (). Init () сбрасывает игру до старта, то есть выполняет следующие действия:

  • Делает счет обоих игроков 0.
  • Делает Player 1 активным / текущим игроком.
  • Скрывает кости скрытым классом.
  • Удаляет класс игрока-победителя у обоих игроков.
  • Добавляет игрок-активный класс к Игроку 1

Javascript

// Starting conditions
const init = function () {
scores = [0, 0];
currentScore = 0;
activePlayer = 0;
playing = true ;
score0El.textContent = 0;
score1El.textContent = 0;
current0El.textContent = 0;
current1El.textContent = 0;
diceEl.classList.add( 'hidden' );
Technical Scripter JavaScript Вопросы о Web технологиях HTML CSS-Misc HTML-Misc JavaScript-Misc CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ

Что такое тернарный оператор?
23 Января, 2024
Trovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Количество чисел между L и R, взаимно простых с P
27 Февраля, 2023
Постройте матрицу, каждая строка и столбец которой содержат N и M единиц соответственно.
27 Февраля, 2023
Максимизируйте сумму трех чисел, выполнив побитовое XOR
27 Февраля, 2023
Проверьте, совпадает ли набор первых элементов X одного массива с набором первых элементов Y другого
27 Февраля, 2023