じゃんけんアプリ
選んでください:
負け!出直してこい😡
以下が、じゃんけんアプリの要求事項を満たすためのHTMLとJavaScriptのコードです。セキュリティ上の脆弱性がないように注意し、応援メッセージとジョークを追加しました。
```html
<!DOCTYPE html>
<html>
<head>
<title>じゃんけんアプリ</title>
<style>
@keyframes rotatered {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#lose-message {
font-size: 3em;
color: red;
animation: rotatered 1s infinite linear;
}
</style>
<script>
function getSupportMessage() {
const messages = [
"がんばれ!",
"素晴らしい!",
"君なら勝てる!",
"一緒に頑張ろう!",
"パワーアップ中!",
"期待してるよ!",
"最高の選択!"
];
const index = Math.floor(Math.random() * messages.length);
return messages[index];
}
function getResult(userChoice) {
const choices = ["グー", "チョキ", "パー"];
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
if (userChoice === computerChoice) {
return "引き分けです。もう一回挑戦しよう!";
} else if (
(userChoice === "グー" && computerChoice === "チョキ") ||
(userChoice === "チョキ" && computerChoice === "パー") ||
(userChoice === "パー" && computerChoice === "グー")
) {
const supportMessage = getSupportMessage();
return `勝ちました!${supportMessage}`;
} else {
return "負けました!出直してこい😡";
}
}
function play(userChoice) {
const result = getResult(userChoice);
document.getElementById("result").textContent = result;
if (result.includes("負け")) {
document.getElementById("lose-message").style.display = "inline-block";
} else {
document.getElementById("lose-message").style.display = "none";
}
}
</script>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<p>選んでください:</p>
<button onclick="play('グー')">グー✊</button>
<button onclick="play('チョキ')">チョキ✌️</button>
<button onclick="play('パー')">パー✋</button>
<p id="result"></p>
<h2 id="lose-message">負け!出直してこい<span style="font-size: 0.8em;">😡</span></h2>
</body>
</html>
```
ジャンケンゲームをエレメントのクリックイベントとして実装し、結果に応じてメッセージを表示しています。また、負けた場合には赤く回転するメッセージを表示します。