じゃんけんアプリ
自分の手を選んでください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>じゃんけんアプリ</title>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<p>自分の手を選んでください。</p>
<button onclick="play('rock')">グー✊</button>
<button onclick="play('scissors')">チョキ✌️</button>
<button onclick="play('paper')">パー✋</button>
<div id="message"></div>
<script>
function play(playerHand) {
const hands = ["rock", "scissors", "paper"];
const computerHand = hands[Math.floor(Math.random() * 3)]; // ランダムにじゃんけんの手を決定する
let result = "";
if (playerHand == computerHand) {
result = "引き分け!もう一度!";
} else if (
(playerHand == "rock" && computerHand == "scissors") ||
(playerHand == "scissors" && computerHand == "paper") ||
(playerHand == "paper" && computerHand == "rock")
) {
// 自分が勝った場合の処理
const messages = ["やったね!🎉", "勝ちだー!👊", "素晴らしい!👌"];
const index = Math.floor(Math.random() * messages.length);
result = messages[index];
} else {
// 自分が負けた場合の処理
result = '<span style="color: red; font-size: 48px; animation: spin 1s linear infinite">負け!出直してこい😡</span>';
}
document.getElementById("message").innerHTML = result;
}
</script>
<style>
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
</body>
</html>