じゃんけんアプリ

選択してください：
<!DOCTYPE html>
<html>
<head>
	<title>じゃんけんアプリ</title>
</head>
<body>
	<h1>じゃんけんアプリ</h1>
	<p>選択してください：</p>
	<button id="rock">グー✊</button>
	<button id="scissors">チョキ✌️</button>
	<button id="paper">パー✋</button>
	<p id="result"></p>

	<script>
		// ボタンをクリックしたときの処理
		document.getElementById("rock").addEventListener("click", function() { play(0); });
		document.getElementById("scissors").addEventListener("click", function() { play(1); });
		document.getElementById("paper").addEventListener("click", function() { play(2); });

		function play(playerChoice) {
			// コンピューターの手をランダムに決定（0:グー, 1:チョキ, 2:パー）
			let computerChoice = Math.floor(Math.random() * 3);

			// じゃんけんの結果を判定
			let result = "";
			if (playerChoice === computerChoice) {
				result = "あいこ！もう一度！";
			} else if ((playerChoice === 0 && computerChoice === 1) || (playerChoice === 1 && computerChoice === 2) || (playerChoice === 2 && computerChoice === 0)) {
				result = `よっしゃ！${getRandomMessage()}！`;
			} else {
				result = `<span style="color: red; font-size: 50px; animation: spin 1s linear infinite; display: inline-block;">負け！出直してこい😡</span>`;
			}

			// 結果を画面に表示
			document.getElementById("result").innerHTML = result;
		}

		function getRandomMessage() {
			// ランダムな応援メッセージを生成
			const messages = [
				"やったね！", "すごい！", "カッコイイ！", "最高！", "えらい！", "偉い！", "ファイト！", "頑張れ！", "もう一回！"
			];
			const i = Math.floor(Math.random() * messages.length);
			return messages[i];
		}
	</script>
	<style>
		@keyframes spin {
			from {transform: rotateZ(0deg);}
			to {transform: rotateZ(360deg);}
		}
	</style>
</body>
</html>