じゃんけんアプリ
負け!出直してこい😡
以下がじゃんけんアプリのコードになります。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>
```
ジョークとしては、「勝ったときだけ」の応援メッセージで、「君には勝てないよ!」というメッセージを選ぶことを想定しています。このようなメッセージを選ぶことで、ユーザーが自分を勝者として感じさせることができます。