じゃんけんアプリ

あなた：
コンピューター：
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>じゃんけんアプリ</title>
	<style>
		body {
			font-family: Arial, Helvetica, sans-serif;
			background-color: #f7e6ff;
			text-align: center;
		}
		h1 {
			margin: 50px 0;
		}
		button {
			padding: 10px;
			margin: 10px;
			background-color: #7e57c2;
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 20px;
			cursor: pointer;
		}
		button:hover {
			background-color: #673ab7;
		}
		#result {
			margin: 50px 0;
			font-size: 25px;
			font-weight: bold;
		}
		#winner {
			color: green;
		}
		#loser {
			color: red;
		}
		.joke {
			margin-top: 50px;
		}
	</style>
	<script>
		function playRock() {
			play(0);
		}
		function playScissors() {
			play(1);
		}
		function playPaper() {
			play(2);
		}

		function play(player) {
			var computer = Math.floor(Math.random() * 3);
			var result = (player - computer + 3) % 3;
			var messages = [
				"グー✊",
				"チョキ✌️",
				"パー✋"
			];
			document.getElementById("player").innerHTML = messages[player];
			document.getElementById("computer").innerHTML = messages[computer];
			document.getElementById("result").innerHTML = "";
			if (result == 0) {
				document.getElementById("result").innerHTML = "あいこ";
			} else if (result == 1) {
				document.getElementById("result").innerHTML = "<span id='loser'>負け！</span>";
				joke();
			} else if (result == 2) {
				document.getElementById("result").innerHTML = "<span id='winner'>勝ち！</span> " + getEncouragingMessage();
			}
		}

		function getEncouragingMessage() {
			var messages = [
				"すごいぞ！",
				"よくやった！",
				"あなたは天才だ！",
				"次もがんばろう！",
				"フェアプレーだ！"
			];
			return messages[Math.floor(Math.random() * messages.length)];
		}

		function joke() {
			var jokes = [
				"「負け！出直してこい😡」って言う前に、腕がメチャクチャ痛くなってるんすけど...",
				"あ、負けた...でも先に下がるよッ💃💃",
				"「負け！出直してこい😡」？？俺に聞く前に自分に言ってくれませんか？？",
				"「負け！出直してこい😡」って言われても、先に帰っちゃますよ！",
				"負けたら蒸しパンとおしるこ！っていう風習は、私が勝つまで続けられますか？"
			];
			var joke = jokes[Math.floor(Math.random() * jokes.length)];
			var jokeElement = document.createElement("p");
			jokeElement.className = "joke";
			jokeElement.innerHTML = joke;
			document.body.appendChild(jokeElement);
		}
	</script>
</head>
<body>
	<h1>じゃんけんアプリ</h1>
	<div>
		<button onclick="playRock()">グー✊</button>
		<button onclick="playScissors()">チョキ✌️</button>
		<button onclick="playPaper()">パー✋</button>
	</div>
	<div>
		あなた：<span id="player"></span>
	</div>
	<div>
		コンピューター：<span id="computer"></span>
	</div>
	<div id="result"></div>
</body>
</html>