じゃんけんアプリ
負け！出直してこい😡
以下がじゃんけんアプリの実装例です。evalを使わず、セキュリティ脆弱性を考慮して作成しています。
```html
<!DOCTYPE html>
<html>
<head>
<title>じゃんけんアプリ</title>
<meta charset="UTF-8">
<script>
// 勝利メッセージの配列
const winMessages = [
"やったね！👍",
"お見事！👏",
"素晴らしい！🤩",
"勝利は喜びの裏返しだ！🎊",
"天才だね！🌟",
"さすが！👌",
"誰が勝ってもおかしくない熱戦だったね！🔥",
"緊張したけど見事勝利！🙌"
];
// じゃんけんの勝敗を判定する関数
function judge(userHand, computerHand) {
if (userHand === computerHand) {
return "引き分け！😑";
} else if (
(userHand === "グー" && computerHand === "チョキ") ||
(userHand === "チョキ" && computerHand === "パー") ||
(userHand === "パー" && computerHand === "グー")
) {
// 勝ちの場合、ランダムな応援メッセージを表示
const randomIndex = Math.floor(Math.random() * winMessages.length);
return `勝利！${winMessages[randomIndex]}`;
} else {
// 負けの場合、巨大な赤文字を高速回転させる
const loseMessage = document.querySelector("#lose-message");
loseMessage.style.display = "block";
let degree = 0;
const rotate = setInterval(function() {
degree += 10;
loseMessage.style.transform = `rotate(${degree}deg)`;
}, 10);
setTimeout(function() {
clearInterval(rotate);
loseMessage.style.display = "none";
loseMessage.style.transform = "rotate(0deg)";
}, 2000);
return "負け！出直してこい😡";
}
}
</script>
<style>
body {
font-size: 24px;
text-align: center;
margin-top: 50px;
}
h1 {
font-size: 48px;
margin-bottom: 50px;
}
button {
font-size: 24px;
padding: 10px 20px;
margin: 0 20px;
}
div {
font-size: 36px;
margin: 50px 0;
}
#lose-message {
font-size: 72px;
color: red;
display: none;
position: absolute;
top: 50%;
left: 50%;
transform-origin: center;
}
</style>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<button onclick="result('グー')">グー✊</button>
<button onclick="result('チョキ')">チョキ✌️</button>
<button onclick="result('パー')">パー✋</button>
<div id="result"></div>
<div id="lose-message">負け！出直してこい😡</div>
<script>
function result(userHand) {
// コンピューターの手をランダムに生成
const hands = ["グー", "チョキ", "パー"];
const computerHand = hands[Math.floor(Math.random() * 3)];
// 勝敗を判定して結果を表示
const resultMessage = judge(userHand, computerHand);
document.querySelector("#result").innerHTML = `
<p>あなたの手： ${userHand}</p>
<p>コンピューターの手： ${computerHand}</p>
<p>${resultMessage}</p>
`;
}
</script>
</body>
</html>
```
アプリを実行すると、3つのボタン「グー✊」「チョキ✌️」「パー✋」が表示されます。ボタンをクリックしてじゃんけんをプレイすると、結果が「あなたの手」「コンピューターの手」「結果メッセージ」として表示されます。勝利した場合はランダムな応援メッセージが表示され、負けた場合は巨大な赤文字が高速回転します！