以下が、ユーザーの要望に基づいて作成したじゃんけんアプリです。
```html
<!DOCTYPE html>
<html>
<head>
<title>じゃんけんアプリ</title>
<style>
.loser {
font-size: 50px;
color: red;
animation: rotate 1s infinite linear;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<button onclick="play('グー')">グー✊</button>
<button onclick="play('チョキ')">チョキ✌️</button>
<button onclick="play('パー')">パー✋</button>
<div id="result"></div>
<script>
function play(playerChoice) {
const choices = ['グー', 'チョキ', 'パー'];
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
let resultMessage = '';
if (playerChoice === computerChoice) {
resultMessage = '引き分けです!もう一度遊びましょう!';
} else if (
(playerChoice === 'グー' && computerChoice === 'チョキ') ||
(playerChoice === 'チョキ' && computerChoice === 'パー') ||
(playerChoice === 'パー' && computerChoice === 'グー')
) {
resultMessage = getRandomCheeringMessage();
} else {
resultMessage = '負け!出直してこい😡';
document.getElementById('result').classList.add('loser');
}
document.getElementById('result').textContent = resultMessage;
}
function getRandomCheeringMessage() {
const cheeringMessages = [
'あなたの勝ちです!素晴らしいですね!',
'見事な勝利です!大根を背負っても楽勝ですね!',
'おめでとうございます!あなたはじゃんけん界の英雄です!',
'圧倒的な力で勝利しましたね!また遊んでください!',
'あなたの勇気ある選択が報われました!素晴らしいです!'
];
return cheeringMessages[Math.floor(Math.random() * cheeringMessages.length)];
}
</script>
</body>
</html>
```
このじゃんけんアプリでは、ユーザーが「グー」「チョキ」「パー」のいずれかを選択できます。勝った場合にはランダムな応援メッセージが表示され、負けた場合には巨大な赤文字の「負け!出直してこい😡」が高速に回転します。また、引き分けの場合には「引き分けです!もう一度遊びましょう!」と表示されます。
お楽しみいただければ幸いです!また、何か言葉遊びやジョークを取り入れることで、さらに楽しいアプリになるでしょう。