✊
✌️
✋
🐲
勝った！おめでとう🎉
負け！出直してこい😡
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
.container {
text-align: center;
margin-top: 20px;
}
.btn {
font-size: 40px;
margin: 10px;
cursor: pointer;
}
.result {
font-size: 50px;
margin-top: 20px;
display: none;
}
.win-message, .lose-message {
display: none;
}
.lose-message {
color: red;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="btn" onclick="play('rock')">✊</div>
<div class="btn" onclick="play('scissors')">✌️</div>
<div class="btn" onclick="play('paper')">✋</div>
<div class="btn" onclick="play('mystery')">🐲</div>
<div id="result" class="result"></div>
<div id="win-message" class="win-message">勝った！おめでとう🎉</div>
<div id="lose-message" class="lose-message">負け！出直してこい😡</div>
</div>
<script>
function play(playerChoice) {
const choices = ['rock', 'scissors', 'paper'];
const messages = ['やったね！', 'すごい！', 'その調子！'];
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
const resultDiv = document.getElementById('result');
const winMessage = document.getElementById('win-message');
const loseMessage = document.getElementById('lose-message');
resultDiv.style.display = 'none';
winMessage.style.display = 'none';
loseMessage.style.display = 'none';
if (playerChoice === 'mystery') {
resultDiv.textContent = '何が起こるかわからない👽';
resultDiv.style.display = 'block';
return;
}
if ((playerChoice === 'rock' && computerChoice === 'scissors') ||
(playerChoice === 'scissors' && computerChoice === 'paper') ||
(playerChoice === 'paper' && computerChoice === 'rock')) {
winMessage.textContent = messages[Math.floor(Math.random() * messages.length)];
winMessage.style.display = 'block';
} else if (playerChoice === computerChoice) {
resultDiv.textContent = 'あいこ🤝';
resultDiv.style.display = 'block';
} else {
loseMessage.style.display = 'block';
}
}
</script>
</body>
</html>
```