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

A

Пользователь

от ari7tokrat , в категории: JavaScript , год назад

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


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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();
});


Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от jaren , год назад

@ari7tokrat Немножко поправил Ваш код, попробуйте код ниже:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>Камень, ножницы, бумага</title>
</head>
<body>

<button id="buttonScissors">Ножницы</button>
<button id="buttonPaper">Бумага</button>
<button id="buttonRock">Камень</button>

<script>
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 "Компьютер победил!";
  }
}

document.getElementById("buttonScissors").addEventListener('click', function() {
  var result = play("ножницы", computerPlay());
  document.write(result);
});

document.getElementById("buttonPaper").addEventListener('click', function() {
  var result = play("бумага", computerPlay());
  document.write(result);
});

document.getElementById("buttonRock").addEventListener('click', function() {
  var result = play("камень", computerPlay());
  document.write(result);
});
</script>

</body>
</html>


В этом примере я добавил кнопки с уникальными идентификаторами и использовал addEventListener для добавления слушателей событий на каждую кнопку. Когда пользователь нажимает на кнопку, вызывается соответствующая функция play, и результат выводится на страницу с помощью document.write.