Игра «Камень, ножницы, бумага» – это популярное развлечение, которое можно легко реализовать с использованием языка программирования JavaScript. В этой статье мы рассмотрим, как создать эту игру, шаг за шагом. Мы разработаем HTML-приложение с использованием JavaScript, чтобы пользователи могли сразиться с компьютером в этой классической игре.

Инструкция

Шаг 1: настройка проекта

Прежде чем мы начнем, давайте создадим структуру проекта. Нам понадобятся следующие файлы:

  1. index.html: основная страница для отображения.
  2. style.css: файл стилей для улучшения внешнего вида.
  3. script.js: JavaScript-код, который управляет логикой.

Создадим `index.html`:

«`html

<!DOCTYPE html>

<html>

<head>

<title> «Камень, ножницы, бумага»</title>

<link rel=»stylesheet» type=»text/css» href=»style.css»>

</head>

<body>

<h1> «Камень, ножницы, бумага»</h1>

<div id=»game»>

<button id=»rock»>Камень</button>

<button id=»scissors»>Ножницы</button>

<button id=»paper»>Бумага</button>

</div>

<div id=»result»></div>

<script src=»script.js»></script>

</body>

</html>

«`

Шаг 2: добавление стилей

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

«`css

body {

font-family: Arial, sans-serif;

text-align: center;

background-color: #f0f0f0;

}

h1 {

color: #333;

}

#game {

margin-top: 20px;

}

button {

padding: 10px 20px;

font-size: 16px;

margin: 10px;

}

#result {

font-size: 24px;

font-weight: bold;

margin-top: 20px;

}

«`

Шаг 3: написание JavaScript-кода

Теперь мы создадим `script.js`, который будет содержать логику. Мы начнем с определения функции, которая будет генерировать выбор компьютера:

«`javascript

function computerPlay() {

const options = [«камень», «ножницы», «бумага»];

const randomIndex = Math.floor(Math.random() * 3);

return options[randomIndex];

}

«`

Эта функция выбирает случайный вариант для компьютера.

Шаг 4: Обработка действий игрока

Создадим функцию для обработки выбора игрока и сравнения его с выбором компьютера:

«`javascript

function playRound(playerSelection, computerSelection) {

if (playerSelection === computerSelection) {

return «Ничья!»;

} else if (

(playerSelection === «камень» && computerSelection === «ножницы») ||

(playerSelection === «ножницы» && computerSelection === «бумага») ||

(playerSelection === «бумага» && computerSelection === «камень»)

) {

return «Вы победили!»;

} else {

return «Компьютер победил!»;

}

}

«`

Шаг 5: обновление интерфейса

Создадим функцию для обновления интерфейса игры:

«`javascript

function updateGame(playerSelection, computerSelection, result) {

const gameDiv = document.getElementById(«game»);

const resultDiv = document.getElementById(«result»);

gameDiv.style.display = «none»;

resultDiv.innerHTML = `Вы выбрали: ${playerSelection}, компьютер выбрал: ${computerSelection}. ${result}`;

const playAgainButton = document.createElement(«button»);

playAgainButton.textContent = «Сыграть снова»;

playAgainButton.addEventListener(«click», () => {

gameDiv.style.display = «block»;

resultDiv.innerHTML = «»;

});

resultDiv.appendChild(playAgainButton);

}

«`

Шаг 6: добавление обработчиков событий

Теперь мы привяжем наши функции к кнопкам в HTML:

«`javascript

const buttons = document.querySelectorAll(«button»);

buttons.forEach((button) => {

button.addEventListener(«click», () => {

const playerSelection = button.id;

const computerSelection = computerPlay();

const result = playRound(playerSelection, computerSelection);

updateGame(playerSelection, computerSelection, result);

});

});

«`

Заключение

Создание игры «Камень, ножницы, бумага» на JavaScript — увлекательный процесс, который позволяет применить знания о функциях, условиях и обработке событий. Мы создали HTML-приложение, написали стили и добавили логику с использованием JavaScript. Теперь пользователи могут наслаждаться этой классической игрой, сражаясь с компьютером.