Камень, ножницы, бумага

Вопрос-ответ JavaScript
1

Здравствуйте комьюнити! Делаю игру “Камень, ножницы, бумага”. Сначала сделал с выводом через prompt, но захотелось сделать с кнопками и выводом результата в document.write. Подскажите как вывести всё получившиеся на веб-страницу. P.s. код прилагаю.

function computerPlay() {
  const options = ["камень", "ножницы", "бумага"];
  const randomIndex = Math.floor(Math.random() * 3);
  return options[randomIndex];
}
function play(player, computer) {
  if (player === computer) {
    return "Ничья!";
  } else if (
    (player === "камень" && computer === "ножницы") ||
    (player === "ножницы" && computer === "бумага") ||
    (player === "бумага" && computer === "камень")
  ) {
    return "Вы победили!";
  } else {
    return "Компьютер победил!";
  }
}
const button = document.createElement('button');
document.body.appendChild(button);
button.innerText = 'Ножницы';
const button1 = document.createElement('button');
document.body.appendChild(button1);
button1.innerText = 'Бумага';
const button2 = document.createElement('button');
document.body.appendChild(button2);
button2.innerText = 'Камень';
function handleClick(button, button1, button2) {
  function play(player, computer){
    if (player === computer) {
      return "Ничья!";
    } else if (
      (player === "камень" && computer === "ножницы") ||
      (player === "ножницы" && computer === "бумага") ||
      (player === "бумага" && computer === "камень")
    ) {
      return "Вы победили!";
    } else {
      return "Компьютер победил!";
    }
  }
}
myButton.addEventListener('click', handleClick);
document.write(play(computerPlay(), handleClick(button, button1, button2)));

document.getElementById("myButton").addEventListener("click", function() {
  var audio = new Audio('click-sound.mp3');
  audio.play();
});
2

Давайте рассмотрим по-порядку.

  1. document.write для этого совсем не подходит. Он работает в потоке (пока грузится страница). Вызов его вне потока приведет к полному переписывания всей страницы. Вы создаете кнопки через createElement также нужно и создать например div вывода результата партии. И вносить сам результат через innerText или innerHTML
  2. Что такое handleClick? Почему в нем продублирована функция play? Вы используете myButton а он нигде не описан.

Наверное myButton это кнопка начала партии.
Попробуйте написать алгоритм. Например:

  1. Сделать html с кнопкой myButton, и контейнером div для вывода кнопок и результата.
  2. Навесить обработчик, который по нажатию кнопки будет заполнять контейнер 3-мя кнопками выбора хода (камень ножницы бумага).
  3. Навесить на каждую из кнопок выбора хода обработчик клика.
  4. Определить какая кнопка была нажата, получить результат компьютера и вывести результат партии в контейнер вместо кнопок выбора
3

Прошу прощения, я только начинаю погружаться в JS, не могли бы вы в виде кода представить выше написанное, чтобы я на примере уже разобрался. Благодарю!

1 лайк
4

Вот чуть переделанный и рабочий вариант https://static.podgorniy.net/forum/rock-paper-scissors.html

  1. Вывод данных в документ через document.write работает только на этапе загрузки страницы, до всякого взаимодействия с пользователем. Когда делаешь document.write после загрузки страницы, то все содержимое страницы замещается тем что за-document.write-илось.
  2. В коде уже используется вывод данных в дом через innerText. Этим же методом можно выводить данные, результаты игры. Или, например, вариант через innerHTML, если нужна динамическая разметка а не только динамический текст.
  3. Общая стратегия в подобной ситуации: получить ссылку на DOM узел, и меняеть его содержимое внутри обработчика реагирующего на пользовательское взаимодействие (считай клик).
  4. Стратегия сравнения строк не самая надежная, но для начала сойдет. (так же как и document.write удобен на ранних этапах понимания, но на последующих от него нужно отходить).
1 лайк
5

Спасибо огромное!

6

всю функцию Также можно переписать используя объект :

function computerPlay() {
  const options = ["камень", "ножницы", "бумага"];
  const randomIndex = Math.floor(Math.random() * 3);
  return options[randomIndex];
}

// Функция для определения победителя
function play(player, computer) {
  const winner = {
    камень: "ножницы",
    бумага: "камень",
    ножницы: "бумага",
  };

  if (player === computer) {
    return "Ничья!";
  } else if (winner[player] === computer) {
    return "Вы победили!";
  } else {
    return "Компьютер победил!";
  }
}

// Создание и добавление кнопок
const buttons = ["Ножницы", "Бумага", "Камень"].map(choice => {
  const button = document.createElement('button');
  button.innerText = choice;
  button.addEventListener('click', function() {
    const playerChoice = this.innerText.toLowerCase();
    const computerChoice = computerPlay();
    const result = play(playerChoice, computerChoice);
    console.log(result); // или выведите результат куда-либо еще
  });
  document.body.appendChild(button);
  return button;
});

// Пример добавления звука при клике (предполагая, что у вас есть файл 'click-sound.mp3')
buttons.forEach(button => {
  button.addEventListener("click", function() {
    const audio = new Audio('click-sound.mp3');
    audio.play();
  });
});

или вот мой старый вариант:
replIt

1 лайк