じゃんけんアプリ
グー・チョキ・パーから選んでください。
負け！出直してこい😡
以下が実装例になります。セキュリティ脆弱性を防止するため、evalや外部サイトへの遷移・リダイレクトはされないように注意しました。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>じゃんけんアプリ</title>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<p>グー・チョキ・パーから選んでください。</p>
<button onclick="janken('0')">グー✊</button>
<button onclick="janken('1')">チョキ✌️</button>
<button onclick="janken('2')">パー✋</button>
<hr>
<p id="result"></p>
<div id="lose-message" style="display:none;">
<h2 style="color:red;animation: rotate 0.5s linear infinite;">負け！出直してこい😡</h2>
</div>
<script>
function janken(player) {
const hands = ["グー", "チョキ", "パー"];
const cpu = Math.floor(Math.random() * 3);
const result = (player - cpu + 3) % 3;
if (result == 0) {
document.getElementById("result").textContent = "あいこでした。";
} else if (result == 1) {
document.getElementById("result").textContent = "負けました！";
document.getElementById("lose-message").style.display = "block"; // 負けメッセージの表示
} else if (result == 2) {
const cheers = ["がんばれ！", "あきらめずに！", "次こそ勝とう！"];
const cheer = cheers[Math.floor(Math.random() * cheers.length)];
document.getElementById("result").textContent = `${hands[player]}で勝ちました！${cheer}`;
document.getElementById("lose-message").style.display = "none"; // 負けメッセージの非表示
}
}
</script>
<style>
@keyframes rotate {
0% { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</body>
</html>
```
「janken」というJavaScript関数が定義されていて、ボタンを押すとこの関数が呼び出されます。関数内で、プレイヤーの手を表す引数 player と、コンピューターの手をランダムに生成する変数 cpu を用意しています。
`result` にはplayerが出した手 - cpuが出した手を3で割ったあまりが入ります。これによりじゃんけんの勝敗を判定して、結果に応じたメッセージを表示させます。
負けた場合には「負け！出直してこい😡」のメッセージが表示され、乱数を使って勝った場合にランダムな応援メッセージが表示されます。
また、負けメッセージには回転アニメーションを設定しました。それにより「負けた！」ということが強調され、ユーザーに記憶に残る体験ができるようになっています。
以上が、じゃんけんアプリの実装例です。楽しんで遊んでいただけたら幸いです🙇♀️