以下がじゃんけんアプリのコードです。evalを使わず、セキュリティにも配慮しています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>じゃんけんアプリ</title>
<style>
body {
text-align: center;
font-size: 2em;
}
button {
font-size: 1em;
padding: 10px 20px;
margin: 10px;
}
</style>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<div>
<button id="rock" onclick="play('rock')">グー</button>
<button id="scissors" onclick="play('scissors')">チョキ</button>
<button id="paper" onclick="play('paper')">パー</button>
</div>
<div id="result"></div>
<script>
function play(userChoice) {
var choices = ["rock", "scissors", "paper"];
var computerChoice = choices[Math.floor(Math.random() * choices.length)];
var result = "";
if (userChoice === computerChoice) {
result = "引き分け!もう一度挑戦しよう!";
} else if (userChoice === "rock" && computerChoice === "scissors" ||
userChoice === "scissors" && computerChoice === "paper" ||
userChoice === "paper" && computerChoice === "rock") {
result = getEncouragement();
} else {
result = "<span style='color:red;animation:rotate 1s infinite'>負け!出直してこい😡</span>";
}
document.getElementById("result").innerHTML = result;
}
function getEncouragement() {
var encouragements = ["やったね!あなたはジャンケンの王様だ!👑",
"さすが!強かったですね!💪",
"勝負師の血が騒ぐ瞬間でしたね!🔥",
"すばらしい瞬間を見せていただきました!👏"
];
return encouragements[Math.floor(Math.random() * encouragements.length)];
}
</script>
</body>
</html>
```
上記のコードでは、`onclick`属性によって、プレーヤーが選んだ手の種類 (`rock`, `scissors`, `paper`) を取得します。その後、ランダムにコンピュータの手の種類を選択し、比較して勝敗を判定します。勝利した場合、`getEncouragement()`関数によってランダムに応援メッセージを選択して表示します。敗北した場合は、赤い文字で「負け!出直してこい😡」というメッセージが表示されます。
また、CSSの`animation`プロパティを使用して、敗北メッセージの文字が回転するようにアニメーションを追加し、ユーモアを加えることができます。