じゃんけんアプリ

選択してください：
<!DOCTYPE html>
<html>
<head>
	<title>じゃんけんアプリ</title>
	<meta charset="utf-8">
	<script type="text/javascript">
		function janken(playerChoice) {
			var cpuChoice = Math.floor(Math.random() * 3);
			var resultBox = document.getElementById("result");

			if(playerChoice == cpuChoice) {
				resultBox.innerHTML = "引き分け！もう一度挑戦しよう";
			} else if ((playerChoice == 0 && cpuChoice == 1) || (playerChoice == 1 && cpuChoice == 2) || (playerChoice == 2 && cpuChoice == 0)) {
				var messages = [
					"やったね！きみは勝利の女神に愛されてる！",
					"あなたにまけたのは間違いだった。でも、これから鍛錬して必ず勝利しよう",
					"パーフェクト！10回中10回勝利するくらい強くなろう"
				];
				var index = Math.floor(Math.random() * messages.length);
				resultBox.innerHTML = messages[index];
			} else {
				resultBox.innerHTML = "<span style='color:red; font-size:50px; font-weight:bold; animation: spin 1s linear infinite;'>負け！出直してこい😡</span>";
			}
		}
	</script>
	<style type="text/css">
		.container {
			width: 400px;
			margin: 0 auto;
			text-align: center;
		}
		button {
			padding: 10px;
			margin-right: 10px;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>じゃんけんアプリ</h1>
		<p>選択してください：</p>
		<button onclick="janken(0)">グー✊</button>
		<button onclick="janken(1)">チョキ✌️</button>
		<button onclick="janken(2)">パー✋</button>
		<div id="result"></div>
	</div>
</body>
</html>