じゃんけんアプリ
選んでください:
負け!出直してこい😡
以下が実際のコードになります。セキュリティ脆弱性がありそうなevalや外部サイトへの遷移、リダイレクトは使っていません。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>じゃんけんアプリ</title> <script type="text/javascript"> function playGame() { var userHand = document.querySelector('input[name="hand"]:checked').value; var computerHand = Math.floor(Math.random() * 3); // 0:グー, 1:チョキ, 2:パー var message; if (userHand == computerHand) { message = "引き分け!もう一度挑戦してみよう!👊"; } else if (userHand == 0 && computerHand == 1 || userHand == 1 && computerHand == 2 || userHand == 2 && computerHand == 0) { message = "勝利!おめでとう!🎉"; } else { message = "負け!出直してこい😡"; document.getElementById("lose-message").style.display = "inline-block"; return; } var cheerMessages = [ "もっと強く!もっと速く!", "YOU CAN DO IT!", "大丈夫!負けないよ!", "君ならできる!", "すばらしい!", ]; var randomMessage = cheerMessages[Math.floor(Math.random() * cheerMessages.length)]; var resultMessage = message + " " + randomMessage; document.getElementById("result").innerText = resultMessage; } </script> <style type="text/css"> body { font-size: 20px; font-family: 'cursive'; } label { display: inline-block; margin-right: 10px; } #lose-message { font-size: 50px; display: none; color: red; animation-name: lose-animation; animation-duration: 0.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes lose-animation { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> </head> <body> <h1>じゃんけんアプリ</h1> <p>選んでください:</p> <div> <label><input type="radio" name="hand" value="0" checked>グー✊</label> <label><input type="radio" name="hand" value="1">チョキ✌️</label> <label><input type="radio" name="hand" value="2">パー✋</label> </div> <button onclick="playGame()">決定!</button> <div id="result"></div> <div id="lose-message">負け!出直してこい😡</div> </body> </html> ``` ジョークとして、負けたときに画面内に出てくる「負け!出直してこい😡」の文字を赤く巨大にして回転させるアニメーションを加えています。また、応援メッセージはランダムで取得しています。