じゃんけん!
自分の手を選択してください。
以下が、JavaScriptを用いたセキュリティの脆弱性を排除したじゃんけんアプリの実装例です。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>じゃんけんアプリ</title>
</head>
<body>
<h1>じゃんけん!</h1>
<p>自分の手を選択してください。</p>
<button id="gu">グー</button>
<button id="choki">チョキ</button>
<button id="pa">パー</button>
<p id="result"></p>
<script>
const messages = ["やるね!", "見事な勝利!", "強いね!"];
const loseMessage = "負け!出直してこい😡";
document.getElementById("gu").addEventListener("click", function() {
playRound("グー");
});
document.getElementById("choki").addEventListener("click", function() {
playRound("チョキ");
});
document.getElementById("pa").addEventListener("click", function() {
playRound("パー");
});
function playRound(player) {
const computer = ["グー", "チョキ", "パー"][Math.floor(Math.random() * 3)];
const result = getResult(player, computer);
displayResult(result, player, computer);
}
function getResult(player, computer) {
if (player === computer) {
return 0;
} else if ((player === "グー" && computer === "チョキ") ||
(player === "チョキ" && computer === "パー") ||
(player === "パー" && computer === "グー")) {
return 1;
} else {
return -1;
}
}
function displayResult(result, player, computer) {
const resultMessage = getResultMessage(result, player, computer);
document.getElementById("result").textContent = resultMessage;
}
function getResultMessage(result, player, computer) {
if (result === 0) {
return "あいこ!もう一度!";
} else if (result === 1) {
return messages[Math.floor(Math.random() * messages.length)] + " あなたの勝ち! " + player + " vs " + computer;
} else {
const loseEffect = document.createElement("span");
loseEffect.textContent = loseMessage;
loseEffect.style.color = "red";
loseEffect.style.fontSize = "2rem";
loseEffect.style.animation = "loseEffect 1s linear infinite";
setTimeout(function() {
loseEffect.remove();
}, 2500);
document.getElementById("result").appendChild(loseEffect);
return "";
}
}
</script>
<style>
@keyframes loseEffect {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(360deg) scale(1.2);
}
}
</style>
</body>
</html>
```
このじゃんけんアプリは、ユーザーが「グー」「チョキ」「パー」のいずれかのボタンをクリックすることで遊ぶことができます。その際、JavaScriptを用いてランダムな手をコンピューター側で選択し、勝敗を判定して表示します。勝った場合にはランダムな応援メッセージを表示し、負けた場合には巨大な赤文字の「負け!出直してこい😡」を表示します。また、負けた場合には赤文字の表示が回転するアニメーションがかかります。
このアプリは、evalやリダイレクトなどセキュリティ脆弱性のある要素を含んでいないので、安心して遊ぶことができます。また、ユーザーのリクエストに沿って、面白いジョークも取り入れてあります。