じゃんけんアプリ

手を選んでください。
<!DOCTYPE html>
<html>
<head>
	<title>じゃんけんアプリ</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<h1>じゃんけんアプリ</h1>
	<p>手を選んでください。</p>
	<button onclick="play(0)">グー✊</button>
	<button onclick="play(1)">チョキ✌️</button>
	<button onclick="play(2)">パー✋</button>

	<div id="result"></div>

	<script>
		function play(playerChoice) {
			const choices = ["グー", "チョキ", "パー"];
			const computerChoice = Math.floor(Math.random() * 3);
			let resultMessage = "";

			if (playerChoice === computerChoice) {
				resultMessage = `あいこ！もう一度選んでください。`;
			} else if (playerChoice === 0 && computerChoice === 1 || 
						playerChoice === 1 && computerChoice === 2 ||
						playerChoice === 2 && computerChoice === 0) {
				resultMessage = `勝ち！${joke()}`;
			} else {
				resultMessage = `負け！出直してこい😡`;
				document.body.style.backgroundColor = "red";
				document.getElementById("result").style.fontSize = "xxx-large";
				document.getElementById("result").style.transform = "rotate(360deg)";
			}

			document.getElementById("result").innerText = `あなた: ${choices[playerChoice]}、コンピューター: ${choices[computerChoice]} \n ${resultMessage}`;
		}

		function joke() {
			const jokes = ["やったね！あなたは天才！", "あなたって実はAIかな？", "人類最強のじゃんけん使い"];
			const randomIndex = Math.floor(Math.random() * jokes.length);
			return jokes[randomIndex];
		}
	</script>
</body>
</html>