じゃんけんアプリ
「グー✊」「チョキ✌️」「パー✋」から選んでください。
以下が実際のプログラムになります。セキュリティ脆弱性を防ぐために、evalや他のサイトに遷移させる機能は省いています。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>じゃんけんアプリ</title>
</head>
<body>
<h1>じゃんけんアプリ</h1>
<p>「グー✊」「チョキ✌️」「パー✋」から選んでください。</p>
<button onclick="play('rock')">グー</button>
<button onclick="play('scissors')">チョキ</button>
<button onclick="play('paper')">パー</button>
<div id="result"></div>
<script>
function play(userChoice) {
const computerChoice = Math.random();
if (computerChoice < 0.33) {
computerChoice = 'rock';
} else if (computerChoice < 0.66) {
computerChoice = 'scissors';
} else {
computerChoice = 'paper';
}
if (userChoice === 'rock' && computerChoice === 'scissors' || userChoice === 'scissors' && computerChoice === 'paper' || userChoice === 'paper' && computerChoice === 'rock') {
const messages = ['やったね！', 'すごい！', '最高！'];
const message = messages[Math.floor(Math.random() * messages.length)];
document.getElementById('result').innerHTML = `<p>${message} 勝ち！</p>`;
} else if (userChoice === computerChoice) {
document.getElementById('result').innerHTML = '<p>あいこでした。</p>';
} else {
document.getElementById('result').innerHTML = '<p>負け！出直してこい😡</p>';
const fontsize = 50;
let color = 0;
let delta = 5;
const intervalId = setInterval(function() {
document.getElementById('result').style.fontSize = `${fontsize}px`;
document.getElementById('result').style.color = `rgb(${color},${color},${color})`;
color += delta;
fontsize += delta;
if (fontsize >= 200 || fontsize <= 50) {
delta = -delta;
}
}, 50);
setTimeout(function() { clearInterval(intervalId); }, 3000);
}
}
</script>
</body>
</html>
```
ジョークの部分については、勝利時の応援メッセージがランダムに出るようになっております。また、負けた場合には「負け！出直してこい😡」のテキストが表示され、その下に巨大な文字が高速に回転するようになっております。このようにジョークを取り入れることで、ユーザーに楽しい体験を提供することができます。