Я хотел создать простую и забавную игру «Камень, ножницы, бумага» с использованием HTML, CSS и JavaScript, и в этом сообщении в блоге я расскажу вам о шагах, которые я предпринял для создания приложения, объясню код и поделюсь проблемами. Я сталкивался и как я их преодолевал.
Обзор
Я создал игру «камень-ножницы-бумага», которая позволяет пользователю выбрать один из трех вариантов: камень, бумага или ножницы. Затем компьютер также случайным образом выбирает один из этих вариантов. После того, как оба выбора сделаны, игра определяет, кто победит, на основе правила камень-ножницы-бумага. Счет как игрока, так и компьютера обновляется соответственно.
Чтобы сделать игру более приятной, я использовал смайлики для кнопок, чтобы представить различные варианты выбора, и добавил звуковые эффекты, когда пользователь выбирает вариант.
HTML-структура
Я начал с создания div-контейнера для хранения всей игры, включая табло, варианты выбора, результаты и аудиоэлементы. Табло содержит два элемента для счета игрока и компьютера соответственно. Раздел выбора содержит три кнопки со смайликами для камня, ножниц и бумаги. Раздел результатов сначала отображает сообщение, предлагающее пользователю выбрать оружие. Наконец, я добавил три звуковых элемента, по одному на каждый вариант.
HTML-код:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rock, Paper, Scissors</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Rock, Paper, Scissors</h1> <div class="scoreboard"> <p>Player: <span id="player-score">0</span></p> <p>Computer: <span id="computer-score">0</span></p> </div> <div class="choices"> <button class="choice" id="rock">🪨</button> <button class="choice" id="paper">📄</button> <button class="choice" id="scissors">✂️</button> </div> <p class="computer-choice hidden">Computer chose: <span id="computer-choice-text"></span></p> <p class="result">Choose your weapon!</p> <audio id="rock-sound"> <source src="./audio/rock.mp3" type="audio/mpeg"> </audio> <audio id="paper-sound"> <source src="./audio/paper.mp3" type="audio/mpeg"> </audio> <audio id="scissors-sound"> <source src="./audio/scissor.mp3" type="audio/mpeg"> </audio> </div> <script src="app.js"></script> </body> </html>
CSS-стиль
Я хотел, чтобы приложение имело приятный внешний вид, поэтому я использовал CSS для стилизации элементов игры, включая шрифты, цвета и интервалы. Я добавил стили для контейнера, табло, элементов выбора и результатов. Я также включил эффекты наведения и отзывчивость для лучшего взаимодействия с пользователем.
CSS-код:
body { font-family: 'Roboto', sans-serif; } .container { text-align: center; padding: 20px; } .scoreboard { display: flex; justify-content: center; margin-top: 20px; } .scoreboard p { margin: 0 10px; font-size: 24px; } .choices { display: flex; justify-content: space-around; margin-top: 50px; } .choice { border: none; background-color: #fff; color: #000; padding: 10px 20px; font-size: 48px; cursor: pointer; } .choice:hover { background-color: #000; color: #fff; transform: scale(1.1); transition: transform 0.2s ease-in-out; } .computer-choice { margin-top: 20px; font-size: 24px; text-align: center; } .hidden { display: none; } .result { margin-top: 50px; font-size: 24px; text-align: center; } @media (max-width: 400px) { .container { padding: 10px; } .choices { flex-direction: column; align-items: center; margin-top: 20px; } .choice { margin: 10px; } }
Логика JavaScript
Чтобы сделать игру функциональной, я реализовал следующие шаги с помощью JavaScript:
- Выбор элементов. Я выбрал различные элементы из HTML-файла, включая счет игрока и компьютера, сообщение о результате и кнопки выбора.
- Выбор компьютера. Я создал функцию для создания случайного выбора для компьютера с помощью метода Math.random(). Эта функция возвращает число от 0 до 1. Затем я умножил это десятичное число на 3 и использовал Math.floor() для округления до ближайшего целого числа, в результате чего получилось случайное число от 0 до 3. Наконец, я вернул соответствующий выбор на основе индекса случайно сгенерированного числа.
- Проверка победителя. Я создал функцию для проверки победителя на основе выбора игрока и компьютера. Я использовал оператор if-else, чтобы проверить все возможные результаты и соответствующим образом обновить оценку. Чтобы отобразить выбор компьютера в более удобном для человека формате, я создал переменную
computerChoiceText
и использовал оператор switch для преобразования выбора компьютера из строки в удобочитаемый текст. - Выбор игрока: я создал функцию для обработки, когда игрок нажимает одну из кнопок выбора. Я выбрал идентификатор нажатой кнопки и передал его в качестве аргумента функции
checkWinner()
вместе с выбором компьютера. Я также добавил оператор if-else для воспроизведения звукового эффекта в зависимости от того, какой выбор сделал игрок. - Добавление прослушивателей событий. Я использовал метод
forEach()
, чтобы добавить прослушиватель событий к каждой из кнопок выбора. При нажатии кнопки вызывается функцияplayerChoiceHandler()
.
Код JavaScript:
const choices = document.querySelectorAll('.choice'); const playerScore = document.getElementById('player-score'); const computerScore = document.getElementById('computer-score'); const result = document.querySelector('.result'); let playerScoreValue = 0; let computerScoreValue = 0; function computerChoice() { const computerChoices = ['rock', 'paper', 'scissors']; const computerIndex = Math.floor(Math.random() * 3); return computerChoices[computerIndex]; } function checkWinner(playerChoice, computerChoice) { let computerChoiceText = ''; switch (computerChoice) { case 'rock': computerChoiceText = 'Rock'; break; case 'paper': computerChoiceText = 'Paper'; break; case 'scissors': computerChoiceText = 'Scissors'; break; } if (playerChoice === computerChoice) { result.textContent = `Tie! Both chose ${computerChoiceText}.`; } else if ( (playerChoice === 'rock' && computerChoice === 'scissors') || (playerChoice === 'paper' && computerChoice === 'rock') || (playerChoice === 'scissors' && computerChoice === 'paper') ) { result.textContent = `You win! ${computerChoiceText} loses to ${playerChoice}.`; playerScoreValue++; playerScore.textContent = playerScoreValue; } else { result.textContent = `You lose! ${computerChoiceText} beats ${playerChoice}.`; computerScoreValue++; computerScore.textContent = computerScoreValue; } } function playerChoiceHandler(e) { const playerChoice = e.target.id; const computerChoiceValue = computerChoice(); checkWinner(playerChoice, computerChoiceValue); if (playerChoice === 'rock') { const rockSound = document.getElementById('rock-sound'); rockSound.play(); } else if (playerChoice === 'paper') { const paperSound = document.getElementById('paper-sound'); paperSound.play(); } else if (playerChoice === 'scissors') { const scissorsSound = document.getElementById('scissors-sound'); scissorsSound.play(); } } choices.forEach(choice => choice.addEventListener('click', choice.addEventListener('click', playerChoiceHandler));
Проблемы и решения
При разработке приложения я столкнулся с рядом проблем:
- Отображение выбора компьютера. Одна проблема, с которой я столкнулся, заключалась в том, что выбор компьютера не отображался на экране. Чтобы исправить это, я создал новую переменную
computerChoiceText
и использовал оператор switch для преобразования выбора компьютера из строки в удобочитаемый текст. Затем я включил этот текст в результаты, отображаемые пользователю. - Воспроизведение аудио. Еще одна проблема, с которой я столкнулся, заключалась в том, что звук не воспроизводился, когда игрок делал выбор. Я исправил это, добавив аудиоэлементы в HTML с уникальными идентификаторами для каждого звука. Затем в функции
playerChoiceHandler
я использовал условные операторы, чтобы определить, какой звук воспроизвести в зависимости от выбора игрока. - Ошибка инициализации переменной. У меня также была проблема, когда доступ к переменной
computerChoice
осуществлялся до ее инициализации, что приводило к ошибке в консоли. Чтобы исправить это, я изменил функциюcomputerChoice
наcomputerChoiceValue
, чтобы избежать конфликтов имен, и обязательно вызывал функцию после того, как она была определена в нашей функцииplayerChoiceHandler
. - Проблемы со стилем. Я столкнулся с некоторыми проблемами со стилем, из-за которых приложение выглядело не очень привлекательно. Чтобы исправить это, я добавил немного CSS, чтобы придать приложению более совершенный и визуально приятный вид.
Заключение
В целом, создание приложения «Камень, ножницы, бумага» было веселым и познавательным занятием. Используя HTML, CSS и JavaScript, я смог создать простую, но приятную игру. По пути я столкнулся с некоторыми проблемами, но благодаря настойчивости и решению проблем мне удалось преодолеть эти проблемы и создать полнофункциональную игру. Добавление дополнительных функций, таких как звуковые эффекты и удобочитаемый текст для выбора компьютера, сделало игру еще более приятной. Я надеюсь, что этот пост в блоге поможет вам понять процесс и вдохновит вас на создание собственных забавных проектов!