じゃんけんアプリ

以下が実際のプログラムです。セキュリティ上問題がないように注意して実装しています。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>じゃんけんアプリ</title>
</head>
<body>
    <h1>じゃんけんアプリ</h1>
    <p>選択肢：グー✊, チョキ✌️, パー✋</p>
    <button onclick="janken('gu')">グー✊</button>
    <button onclick="janken('choki')">チョキ✌️</button>
    <button onclick="janken('pa')">パー✋</button>

    <div id="result"></div>

    <script>
        function janken(playerHand) {
            const hands = ['グー✊', 'チョキ✌️', 'パー✋'];
            const aiHand = hands[Math.floor(Math.random() * hands.length)];
            let message;

            if (playerHand === aiHand) {
                message = 'あいこでした。もう一度挑戦してね！💪';
            } else if ((playerHand === 'gu' && aiHand === 'チョキ✌️') || (playerHand === 'choki' && aiHand === 'パー✋') || (playerHand === 'pa' && aiHand === 'グー✊')) {
                message = `おめでとう！あなたの${playerHand}の勝ちです🎉`;
                message += '<br>' + randomMessage();
            } else {
                message = '負け！出直してこい😡';
                const redText = '<span style="color: red; font-size: 48px; animation: rotate 2s linear infinite;">負け！出直してこい😡</span>';
                document.getElementById('result').innerHTML = redText;
                return;
            }

            document.getElementById('result').innerHTML = message;
        }

        function randomMessage() {
            const phrases = [
                'よくできました！👍',
                'すごい！🤩',
                'あなたは天才！🌟',
                'これからも頑張ってね！💪'
            ];
            return phrases[Math.floor(Math.random() * phrases.length)];
        }
    </script>

    <style>
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</body>
</html>
```

実行結果：

![じゃんけんアプリの実行結果](https://i.imgur.com/qI0blPl.png)