じゃんけんアプリ。「グー✊」「チョキ✌️」「パー✋」を選択する。勝ったときだけ日本語でランダムな応援メッセージがもらえる。負けたときだけ「負け!出直してこい😡」という巨大な赤文字が高速回転する。
じゃんけんアプリ
じゃんけんアプリ
負け!出直してこい😡
以下がじゃんけんアプリのコードになります。JavaScriptのevalを使っていないため、セキュリティ上のリスクはありません。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>じゃんけんアプリ</title> <style type="text/css"> body { font-size: 2em; text-align: center; } .result { font-size: 4em; margin-top: 2em; } .loser { font-size: 6em; color: red; animation: spin 0.5s infinite linear; margin-top: 2em; } @keyframes spin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } } </style> <script type="text/javascript"> function playHand(playerHand) { var computerHand = Math.floor(Math.random() * 3); // 0:グー, 1:チョキ, 2:パー var resultMessage; var messageIndex = Math.floor(Math.random() * 5); // ランダムなメッセージを選択 if (playerHand == computerHand) { resultMessage = "あいこで..."; } else if (playerHand == 0 && computerHand == 1 || playerHand == 1 && computerHand == 2 || playerHand == 2 && computerHand == 0) { resultMessage = "勝ち! " + getEncouragementMessages()[messageIndex]; } else { resultMessage = "負け! 出直してこい😡"; } document.querySelector(".result").textContent = resultMessage; if(resultMessage.includes("負け")) { document.querySelector(".loser").style.display = "block"; } else { document.querySelector(".loser").style.display = "none"; } } function getEncouragementMessages() { return [ "いいぞ!次も頑張れ!", "君には勝てないよ!", "もっと強くなれる!", "今日は運が良かったね", "素晴らしい勝利だ!" ]; } </script> </head> <body> <h1>じゃんけんアプリ</h1> <button onclick="playHand(0)">グー✊</button> <button onclick="playHand(1)">チョキ✌️</button> <button onclick="playHand(2)">パー✋</button> <p class="result"></p> <p class="loser">負け!出直してこい😡</p> </body> </html> ``` ジョークとしては、「勝ったときだけ」の応援メッセージで、「君には勝てないよ!」というメッセージを選ぶことを想定しています。このようなメッセージを選ぶことで、ユーザーが自分を勝者として感じさせることができます。