```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Among Us: 人狼は誰だ！</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.character {
cursor: pointer;
animation: bounce 2s infinite;
}
.comment {
animation: fadeIn 1s;
}
.vote-button {
animation: spin 2s infinite;
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; margin: 0 auto; text-align: center; overflow: hidden;">
<h2>Among Us: 人狼は誰だ！</h2>
<div id="characters"></div>
<div id="chat"></div>
<div>
<input id="message" type="text" placeholder="メッセージを書く..." style="width: 80%;">
<button onclick="sendMessage()" style="width: 15%;">送信</button>
</div>
<button onclick="startVote()" class="vote-button" style="margin-top: 10px; padding: 10px; background-color: chocolate; color: white; border: none; border-radius: 10px;">投票開始！</button>
<div id="vote"></div>
</div>
<script>
const names = ["🚀", "👨🚀", "👾", "🌟", "🌌", "⚡️", "🔥", "💧", "🍀", "💎"];
let members = names.slice(0, Math.floor(Math.random() * 7) + 9);
function displayCharacters() {
const charactersDiv = document.getElementById("characters");
charactersDiv.innerHTML = '';
members.forEach(name => {
let characterDiv = document.createElement("div");
characterDiv.className = "character";
characterDiv.innerHTML = name;
characterDiv.onclick = () => selectCharacter(name);
charactersDiv.appendChild(characterDiv);
});
}
function selectCharacter(name) {
const messageInput = document.getElementById("message");
messageInput.value = name + " ";
messageInput.focus();
}
function sendMessage() {
const messageInput = document.getElementById("message");
const chatDiv = document.getElementById("chat");
if (messageInput.value) {
let commentDiv = document.createElement("div");
commentDiv.className = "comment";
commentDiv.innerHTML = messageInput.value + " 🕒 " + new Date().toLocaleTimeString();
chatDiv.appendChild(commentDiv);
messageInput.value = '';
}
}
function startVote() {
const voteDiv = document.getElementById("vote");
voteDiv.innerHTML = '<h3>誰を吊る？</h3>';
members.forEach(name => {
let voteButton = document.createElement("button");
voteButton.style.padding = "5px";
voteButton.style.margin = "5px";
voteButton.innerHTML = name;
voteButton.onclick = () => vote(name);
voteDiv.appendChild(voteButton);
});
}
function vote(name) {
let result = (Math.random() > 0.5) ? `${name} は人狼だった！` : `${name} は人狼ではなかった。`;
const voteDiv = document.getElementById("vote");
voteDiv.innerHTML = `<h3>${result}</h3>`;
setTimeout(() => {
voteDiv.innerHTML = '';
const index = members.indexOf(name);
if (index > -1) members.splice(index, 1);
displayCharacters();
}, 2000);
}
displayCharacters();
</script>
</body>
</html>
```
