Создаем игру “Камень, Ножницы, Бумага” на JavaScript: Пошаговое руководство

Игра “Камень, Ножницы, Бумага” – это классическая игра, известная во всем мире. Она проста в освоении, но может быть довольно увлекательной. В этой статье мы шаг за шагом разработаем игру “Камень, Ножницы, Бумага” на JavaScript. Мы пройдем через весь процесс, от создания структуры HTML до написания логики JavaScript и стилизации CSS. Независимо от того, являетесь ли вы начинающим разработчиком или опытным программистом, это руководство поможет вам улучшить свои навыки и создать функциональную игру.

Содержание

1. Введение
2. Настройка окружения
3. Создание HTML-структуры
4. Стилизация с помощью CSS
5. Написание логики JavaScript
   • Получение элементов DOM
   • Обработка выбора игрока
   • Генерация выбора компьютера
   • Определение победителя
   • Обновление пользовательского интерфейса
   • Сброс игры
6. Полный код JavaScript
7. Тестирование игры
8. Возможные улучшения
9. Заключение

Введение

В этом руководстве мы создадим простую, но функциональную игру “Камень, Ножницы, Бумага”. Цель состоит в том, чтобы продемонстрировать основы JavaScript, работу с DOM и логику игры. Мы будем использовать HTML для структуры, CSS для стилизации и JavaScript для интерактивности.

Настройка окружения

Для начала вам понадобится текстовый редактор (например, VS Code, Sublime Text, Atom) и веб-браузер (например, Chrome, Firefox, Safari). Создайте новый каталог для вашего проекта и создайте три файла: index.html, style.css и script.js.

Создание HTML-структуры

Откройте файл index.html и добавьте следующую структуру:

html

Этот код создает базовую структуру HTML для нашей игры. Он включает заголовок, отображение счета, кнопки для выбора, отображение результатов и кнопку для сброса игры.

Стилизация с помощью CSS

Теперь откройте файл style.css и добавьте следующий код, чтобы стилизовать нашу игру:

css
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}

.score {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}

.choices button {
padding: 10px 20px;
margin: 0 10px;
font-size: 16px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.choices button:hover {
background-color: #0056b3;
}

.result {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}

#reset-button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #dc3545;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin-top: 20px;
}

#reset-button:hover {
background-color: #c82333;
}

Этот код стилизует основные элементы нашей игры, чтобы она выглядела привлекательно и удобно для пользователя.

Написание логики JavaScript

Теперь самая интересная часть – написание логики JavaScript. Откройте файл script.js и добавьте следующий код:

javascript
// Получение элементов DOM
const playerScoreEl = document.getElementById(‘player-score’);
const computerScoreEl = document.getElementById(‘computer-score’);
const rockBtn = document.getElementById(‘rock’);
const paperBtn = document.getElementById(‘paper’);
const scissorsBtn = document.getElementById(‘scissors’);
const resultTextEl = document.getElementById(‘result-text’);
const resetButton = document.getElementById(‘reset-button’);

let playerScore = 0;
let computerScore = 0;

// Функция для генерации выбора компьютера
function getComputerChoice() {
const choices = [‘Камень’, ‘Ножницы’, ‘Бумага’];
const randomIndex = Math.floor(Math.random() * choices.length);
return choices[randomIndex];
}

// Функция для определения победителя
function determineWinner(playerChoice, computerChoice) {
if (playerChoice === computerChoice) {
return ‘Ничья!’;
} else if (
(playerChoice === ‘Камень’ && computerChoice === ‘Ножницы’) ||
(playerChoice === ‘Ножницы’ && computerChoice === ‘Бумага’) ||
(playerChoice === ‘Бумага’ && computerChoice === ‘Камень’)
) {
playerScore++;
playerScoreEl.textContent = playerScore;
return ‘Вы выиграли!’;
} else {
computerScore++;
computerScoreEl.textContent = computerScore;
return ‘Вы проиграли!’;
}
}

// Функция для обновления пользовательского интерфейса
function updateUI(playerChoice, computerChoice, result) {
resultTextEl.textContent = `Вы выбрали ${playerChoice}, компьютер выбрал ${computerChoice}. ${result}`;
}

// Обработчики событий для кнопок
rockBtn.addEventListener(‘click’, () => {
const computerChoice = getComputerChoice();
const result = determineWinner(‘Камень’, computerChoice);
updateUI(‘Камень’, computerChoice, result);
});

paperBtn.addEventListener(‘click’, () => {
const computerChoice = getComputerChoice();
const result = determineWinner(‘Ножницы’, computerChoice);
updateUI(‘Ножницы’, computerChoice, result);
});

scissorsBtn.addEventListener(‘click’, () => {
const computerChoice = getComputerChoice();
const result = determineWinner(‘Бумага’, computerChoice);
updateUI(‘Бумага’, computerChoice, result);
});

// Обработчик события для кнопки сброса
resetButton.addEventListener(‘click’, () => {
playerScore = 0;
computerScore = 0;
playerScoreEl.textContent = playerScore;
computerScoreEl.textContent = computerScore;
resultTextEl.textContent = ‘Сделайте свой выбор!’;
});

Этот код выполняет следующие действия:

1. Получение элементов DOM

   Получает ссылки на элементы HTML, которые нам нужны для обновления (счет, кнопки, результат).

2. Обработка выбора игрока

   Добавляет обработчики событий для каждой кнопки выбора игрока (Камень, Ножницы, Бумага).

3. Генерация выбора компьютера

   Функция getComputerChoice() генерирует случайный выбор для компьютера.

4. Определение победителя

   Функция determineWinner() определяет победителя на основе выбора игрока и компьютера.

5. Обновление пользовательского интерфейса

   Функция updateUI() обновляет текст результата и счет в пользовательском интерфейсе.

6. Сброс игры

   Обработчик события для кнопки сброса обнуляет счет и текст результата.

Полный код JavaScript

javascript
const playerScoreEl = document.getElementById(‘player-score’);
const computerScoreEl = document.getElementById(‘computer-score’);
const rockBtn = document.getElementById(‘rock’);
const paperBtn = document.getElementById(‘paper’);
const scissorsBtn = document.getElementById(‘scissors’);
const resultTextEl = document.getElementById(‘result-text’);
const resetButton = document.getElementById(‘reset-button’);

let playerScore = 0;
let computerScore = 0;

function getComputerChoice() {
const choices = [‘Камень’, ‘Ножницы’, ‘Бумага’];
const randomIndex = Math.floor(Math.random() * choices.length);
return choices[randomIndex];
}

function determineWinner(playerChoice, computerChoice) {
if (playerChoice === computerChoice) {
return ‘Ничья!’;
} else if (
(playerChoice === ‘Камень’ && computerChoice === ‘Ножницы’) ||
(playerChoice === ‘Ножницы’ && computerChoice === ‘Бумага’) ||
(playerChoice === ‘Бумага’ && computerChoice === ‘Камень’)
) {
playerScore++;
playerScoreEl.textContent = playerScore;
return ‘Вы выиграли!’;
} else {
computerScore++;
computerScoreEl.textContent = computerScore;
return ‘Вы проиграли!’;
}
}

function updateUI(playerChoice, computerChoice, result) {
resultTextEl.textContent = `Вы выбрали ${playerChoice}, компьютер выбрал ${computerChoice}. ${result}`;
}

rockBtn.addEventListener(‘click’, () => {
const computerChoice = getComputerChoice();
const result = determineWinner(‘Камень’, computerChoice);
updateUI(‘Камень’, computerChoice, result);
});

paperBtn.addEventListener(‘click’, () => {
const computerChoice = getComputerChoice();
const result = determineWinner(‘Ножницы’, computerChoice);
updateUI(‘Ножницы’, computerChoice, result);
});

scissorsBtn.addEventListener(‘click’, () => {
const computerChoice = getComputerChoice();
const result = determineWinner(‘Бумага’, computerChoice);
updateUI(‘Бумага’, computerChoice, result);
});

resetButton.addEventListener(‘click’, () => {
playerScore = 0;
computerScore = 0;
playerScoreEl.textContent = playerScore;
computerScoreEl.textContent = computerScore;
resultTextEl.textContent = ‘Сделайте свой выбор!’;
});

Тестирование игры

Откройте файл index.html в своем веб-браузере. Вы должны увидеть игру “Камень, Ножницы, Бумага” с кнопками, отображением счета и текстом результата. Попробуйте поиграть и убедитесь, что все работает правильно.

Возможные улучшения

Вот несколько идей для улучшения игры:

• Добавить анимацию для отображения выбора игрока и компьютера.
• Добавить звуковые эффекты.
• Реализовать систему выбора количества раундов.
• Сохранять счет в локальном хранилище, чтобы он не сбрасывался при перезагрузке страницы.
• Добавить возможность играть против другого игрока.

Заключение

В этой статье мы создали игру “Камень, Ножницы, Бумага” на JavaScript. Мы прошли через весь процесс, от создания структуры HTML до написания логики JavaScript и стилизации CSS. Надеюсь, это руководство было полезным и помогло вам улучшить свои навыки веб-разработки. Не стесняйтесь экспериментировать и добавлять свои собственные улучшения, чтобы сделать игру еще более интересной и увлекательной!

Теперь вы можете поделиться своей игрой с друзьями и семьей. Удачи в ваших будущих проектах веб-разработки!

Дополнительные ресурсы:

• MDN Web Docs: JavaScript
• W3Schools: JavaScript Tutorial
• Bootstrap (для стилизации)

Спасибо за чтение! Не забудьте поделиться этой статьей с другими, кому это может быть интересно.