<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>じゃんけんアプリ</title>
<script>
// ボタンがクリックされたときの処理
function play(hand) {
// ランダムに手を決める
var cpuHand = Math.floor(Math.random() * 3); // 0:✊, 1:✌️, 2:✋
// 勝敗判定
var result = (hand - cpuHand + 3) % 3; // 0:あいこ, 1:勝ち, 2:負け
// 応援メッセージ
var messages = [
"いいぞー！",
"やったね！",
"すごい！",
"あなた最高！",
"勝利の女神が微笑んだ！"
];
if (result == 0) {
alert("あいこ！");
} else if (result == 1) {
alert("勝ち！" + messages[Math.floor(Math.random() * messages.length)]);
} else {
// 負けの場合は文字を回転させる
var msg = document.getElementById("msg");
msg.innerHTML = "負け！出直してこい😡";
msg.style.animation = "spin 1s linear infinite";
}
}
</script>
<style>
.btn {
display: inline-block;
font-size: 50px;
margin: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 50%;
cursor: pointer;
transition: transform 0.2s ease;
}
.btn:hover {
transform: scale(1.1);
}
#msg {
font-size: 50px;
text-align: center;
margin: 50px auto;
color: red;
animation-play-state: paused;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<div>
<button class="btn" onclick="play(0)">グー✊</button>
<button class="btn" onclick="play(1)">チョキ✌️</button>
<button class="btn" onclick="play(2)">パー✋</button>
</div>
<div id="msg"></div>
</body>
</html>
