じゃんけんアプリ
選んでください:
負け!出直してこい😡
以下が実際のコードになります。セキュリティ脆弱性がありそうな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>
```
ジョークとして、負けたときに画面内に出てくる「負け!出直してこい😡」の文字を赤く巨大にして回転させるアニメーションを加えています。また、応援メッセージはランダムで取得しています。