<!DOCTYPE html>
<html>
<head>
<title>じゃんけんアプリ</title>
<meta charset="UTF-8">
</head>
<body>
<h1>じゃんけんアプリ</h1>
<button onclick="janken(0)">グー</button>
<button onclick="janken(1)">チョキ</button>
<button onclick="janken(2)">パー</button>
<div id="message"></div>
<div id="lose"></div>
<script>
function janken(playerHand) {
var messages = ["がんばれ！", "あきらめないで！", "君ならできる！", "ファイト！"];
var hands = ["グー", "チョキ", "パー"];
var computerHand = Math.floor(Math.random() * 3);
var result = (playerHand - computerHand + 3) % 3;
if (result == 0) {
document.getElementById("message").innerHTML = "あいこ！もう一度！";
} else if (result == 1) {
document.getElementById("message").innerHTML = messages[Math.floor(Math.random() * messages.length)] + " あなたの勝ち！";
} else {
document.getElementById("lose").innerHTML = "<span style='color:red;font-size:72px;animation: spin 2s linear infinite;'>負け！出直してこい😡</span>";
}
}
</script>
<style>
@keyframes spin {
0% { transform: rotateY(0); }
100% { transform: rotateY(360deg); }
}
</style>
</body>
</html>
