Я хотел создать простую и забавную игру «Камень, ножницы, бумага» с использованием 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:

  1. Выбор элементов. Я выбрал различные элементы из HTML-файла, включая счет игрока и компьютера, сообщение о результате и кнопки выбора.
  2. Выбор компьютера. Я создал функцию для создания случайного выбора для компьютера с помощью метода Math.random(). Эта функция возвращает число от 0 до 1. Затем я умножил это десятичное число на 3 и использовал Math.floor() для округления до ближайшего целого числа, в результате чего получилось случайное число от 0 до 3. Наконец, я вернул соответствующий выбор на основе индекса случайно сгенерированного числа.
  3. Проверка победителя. Я создал функцию для проверки победителя на основе выбора игрока и компьютера. Я использовал оператор if-else, чтобы проверить все возможные результаты и соответствующим образом обновить оценку. Чтобы отобразить выбор компьютера в более удобном для человека формате, я создал переменную computerChoiceText и использовал оператор switch для преобразования выбора компьютера из строки в удобочитаемый текст.
  4. Выбор игрока: я создал функцию для обработки, когда игрок нажимает одну из кнопок выбора. Я выбрал идентификатор нажатой кнопки и передал его в качестве аргумента функции checkWinner() вместе с выбором компьютера. Я также добавил оператор if-else для воспроизведения звукового эффекта в зависимости от того, какой выбор сделал игрок.
  5. Добавление прослушивателей событий. Я использовал метод 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));

Проблемы и решения

При разработке приложения я столкнулся с рядом проблем:

  1. Отображение выбора компьютера. Одна проблема, с которой я столкнулся, заключалась в том, что выбор компьютера не отображался на экране. Чтобы исправить это, я создал новую переменную computerChoiceText и использовал оператор switch для преобразования выбора компьютера из строки в удобочитаемый текст. Затем я включил этот текст в результаты, отображаемые пользователю.
  2. Воспроизведение аудио. Еще одна проблема, с которой я столкнулся, заключалась в том, что звук не воспроизводился, когда игрок делал выбор. Я исправил это, добавив аудиоэлементы в HTML с уникальными идентификаторами для каждого звука. Затем в функции playerChoiceHandler я использовал условные операторы, чтобы определить, какой звук воспроизвести в зависимости от выбора игрока.
  3. Ошибка инициализации переменной. У меня также была проблема, когда доступ к переменной computerChoice осуществлялся до ее инициализации, что приводило к ошибке в консоли. Чтобы исправить это, я изменил функцию computerChoice на computerChoiceValue, чтобы избежать конфликтов имен, и обязательно вызывал функцию после того, как она была определена в нашей функции playerChoiceHandler.
  4. Проблемы со стилем. Я столкнулся с некоторыми проблемами со стилем, из-за которых приложение выглядело не очень привлекательно. Чтобы исправить это, я добавил немного CSS, чтобы придать приложению более совершенный и визуально приятный вид.

Заключение

В целом, создание приложения «Камень, ножницы, бумага» было веселым и познавательным занятием. Используя HTML, CSS и JavaScript, я смог создать простую, но приятную игру. По пути я столкнулся с некоторыми проблемами, но благодаря настойчивости и решению проблем мне удалось преодолеть эти проблемы и создать полнофункциональную игру. Добавление дополнительных функций, таких как звуковые эффекты и удобочитаемый текст для выбора компьютера, сделало игру еще более приятной. Я надеюсь, что этот пост в блоге поможет вам понять процесс и вдохновит вас на создание собственных забавных проектов!