Полное руководство: реализация игры «Камень-ножницы-бумага» на JavaScript - Fcodenotes

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

Метод 1: базовая реализация
Самый простой способ реализовать игру «Камень-ножницы-бумага» — использовать условные операторы (if-else или switch) для определения результата на основе выбора, сделанного игроком и компьютером.. Вот пример:

function playGame(playerChoice) {
  const choices = ['rock', 'paper', 'scissors'];
  const computerChoice = choices[Math.floor(Math.random() * choices.length)];
  if (playerChoice === computerChoice) {
    return "It's a tie!";
  } else if (
    (playerChoice === 'rock' && computerChoice === 'scissors') ||
    (playerChoice === 'paper' && computerChoice === 'rock') ||
    (playerChoice === 'scissors' && computerChoice === 'paper')
  ) {
    return 'You win!';
  } else {
    return 'Computer wins!';
  }
}
// Usage example
const playerChoice = 'rock';
const result = playGame(playerChoice);
console.log(result);

Метод 2: объектно-ориентированный подход
Другой способ реализации игры — использование объектно-ориентированного подхода. Мы можем создать класс Gameс методами для обработки выбора игрока и компьютера, а также для определения победителя. Вот пример:

class Game {
  constructor() {
    this.choices = ['rock', 'paper', 'scissors'];
  }
  getRandomChoice() {
    return this.choices[Math.floor(Math.random() * this.choices.length)];
  }
  play(playerChoice) {
    const computerChoice = this.getRandomChoice();
    if (playerChoice === computerChoice) {
      return "It's a tie!";
    } else if (
      (playerChoice === 'rock' && computerChoice === 'scissors') ||
      (playerChoice === 'paper' && computerChoice === 'rock') ||
      (playerChoice === 'scissors' && computerChoice === 'paper')
    ) {
      return 'You win!';
    } else {
      return 'Computer wins!';
    }
  }
}
// Usage example
const game = new Game();
const playerChoice = 'rock';
const result = game.play(playerChoice);
console.log(result);

Метод 3: интеграция HTML и CSS
Чтобы улучшить взаимодействие с пользователем, мы можем интегрировать игровую логику с HTML и CSS, чтобы создать визуально привлекательный интерфейс. Вот пример:

<!DOCTYPE html>
<html>
<head>
  <title>Rock Paper Scissors Game</title>
  <style>
    /* Add your custom styles here */
  </style>
</head>
<body>
  <h1>Rock Paper Scissors Game</h1>
  <div>
    <button onclick="playGame('rock')">Rock</button>
    <button onclick="playGame('paper')">Paper</button>
    <button onclick="playGame('scissors')">Scissors</button>
  </div>
  <script>
    function playGame(playerChoice) {
      // Game logic here
    }
  </script>
</body>
</html>

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