🌙 昨晩、「たろう」が亡くなりました... 🪦
初期役職:
交換後役職:
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ワンナイト人狼</title>
<style>
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
.emoji-bounce {
display: inline-block;
animation: bounce 2s infinite;
}
.text-fade {
animation: fadeIn 2s ease-out;
}
</style>
</head>
<body>
<div id="game-container" style="width: 400px; margin: 0 auto; text-align: center;">
<div id="message">
<p class="text-fade">🌙 昨晩、「たろう」が亡くなりました... 🪦</p>
<button id="start-button" style="margin-top: 20px; padding: 10px 20px;">スタート 🚀</button>
</div>
<div id="gameplay" style="display: none;">
<div id="timer" style="margin-bottom: 20px;"></div>
<div id="statements" style="text-align: left; padding: 0 20px;"></div>
<div id="choices" style="margin-top: 20px;"></div>
</div>
<div id="result" style="display: none;">
<p id="result-message" class="text-fade"></p>
<button id="reveal-roles-button" style="margin-top: 20px; padding: 10px 20px;">誰がどの役職かを確認する 🔍</button>
<div id="final-roles" style="display: none; margin-top: 20px;">
<div>初期役職:</div>
<div id="initial-roles"></div>
<div>交換後役職:</div>
<div id="swapped-roles"></div>
</div>
<button id="retry-button" style="margin-top: 20px; padding: 10px 20px;">リトライ 🔄</button>
</div>
</div>
<script>
const characters = ["いちろう", "じろう", "さぶろう", "ななこ", "はなこ"];
const rolesPool = ["人狼", "人狼", "村人", "村人", "村人", "占い師", "怪盗"];
let roles, swappedRoles, timerInterval;
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function assignRoles() {
roles = [...rolesPool];
shuffle(roles);
roles.length = characters.length;
shuffledRoles = roles.slice();
}
function startGame() {
document.getElementById("message").style.display = "none";
document.getElementById("gameplay").style.display = "block";
assignRoles();
swappedRoles = roles.slice();
document.getElementById("timer").innerText = "⏳ 3:00";
displayStatements();
startTimer();
}
function displayStatements() {
const statements = document.getElementById("statements");
statements.innerHTML = "";
characters.forEach((character, idx) => {
let statement;
const role = swappedRoles[idx];
switch (role) {
case "村人":
statement = `${character}: 私は村人です 🌾`;
break;
case "占い師":
const targetIdx = Math.floor(Math.random() * characters.length);
statement = `${character}: 私は占い師です 🔮。${characters[targetIdx]}さんは ${swappedRoles[targetIdx]}です。`;
break;
case "人狼":
const random = Math.floor(Math.random() * 3);
if (random === 0) {
statement = `${character}: 私は村人です 🌾`;
} else if (random === 1) {
const targetIdx = (Math.floor(Math.random() * characters.length-1) + 1) % characters.length;
statement = `${character}: 私は占い師です 🔮。${characters[targetIdx]}さんは村人です 🌾。`;
} else {
const targetIdx = (Math.floor(Math.random() * characters.length-1) + 1) % characters.length;
statement = `${character}: 私は占い師です 🔮。${characters[targetIdx]}さんは人狼です 🐺。`;
}
break;
case "怪盗":
const targetIdx = Math.floor(Math.random() * characters.length);
const stolenRole = roles[targetIdx];
swappedRoles[idx] = stolenRole;
swappedRoles[targetIdx] = "怪盗";
if (stolenRole === "人狼") {
const msgNum = Math.floor(Math.random() * 2);
if (msgNum === 0) {
statement = `${character}: 私は村人です 🌾`;
} else {
const otherIdx = (Math.floor(Math.random() * (characters.length - 2)) + 2) % characters.length;
statement = `${character}: 私は以前怪盗でした 👤。${characters[otherIdx]}さんは村人です 🌾。`;
}
} else {
statement = `${character}: 私は以前怪盗でした 👤。${characters[targetIdx]}さんの役職を交換し、今は${stolenRole}です。`;
}
break;
default:
break;
}
const p = document.createElement("p");
p.innerText = statement;
p.classList.add("emoji-bounce");
statements.appendChild(p);
});
renderChoices();
}
function renderChoices() {
const choices = document.getElementById("choices");
choices.innerHTML = "";
characters.forEach(character => {
const button = document.createElement("button");
button.innerText = `${character} を吊る 🪓`;
button.style.margin = "5px";
button.style.padding = "10px 15px";
button.onclick = () => endGame(character);
choices.appendChild(button);
});
const noLynchButton = document.createElement("button");
noLynchButton.innerText = "誰も吊らない";
noLynchButton.style.margin = "5px";
noLynchButton.style.padding = "10px 15px";
noLynchButton.onclick = () => endGame(null);
choices.appendChild(noLynchButton);
}
function startTimer() {
let timeRemaining = 180; // 3 minutes in seconds
timerInterval = setInterval(() => {
timeRemaining--;
const minutes = Math.floor(timeRemaining / 60);
const seconds = timeRemaining % 60;
document.getElementById("timer").innerText = `⏳ ${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
if (timeRemaining <= 0) {
clearInterval(timerInterval);
endGame(null);
}
}, 1000);
}
function endGame(selectedCharacter) {
clearInterval(timerInterval);
const result = document.getElementById("result");
result.style.display = "block";
const resultMessage = document.getElementById("result-message");
if (selectedCharacter === null) {
const hasWerewolf = swappedRoles.includes("人狼");
if (hasWerewolf) {
resultMessage.innerText = "プレイヤーの敗北 🟧";
resultMessage.style.color = "red";
} else {
resultMessage.innerText = "プレイヤーの勝利！ 🎉";
resultMessage.style.color = "black";
}
} else {
const idx = characters.indexOf(selectedCharacter);
if (swappedRoles[idx] === "人狼") {
resultMessage.innerText = "プレイヤーの勝利！ 🎉";
resultMessage.style.color = "black";
} else {
resultMessage.innerText = "プレイヤーの敗北 🟧";
resultMessage.style.color = "red";
}
}
}
document.getElementById("start-button").onclick = startGame;
document.getElementById("reveal-roles-button").onclick = () => {
document.getElementById("final-roles").style.display = "block";
const initialRoles = document.getElementById("initial-roles");
const swappedRoles = document.getElementById("swapped-roles");
initialRoles.innerHTML = characters.map((char, idx) => `<p>${char}: ${roles[idx]}</p>`).join("");
swappedRoles.innerHTML = characters.map((char, idx) => `<p>${char}: ${swappedRoles[idx]}</p>`).join("");
};
document.getElementById("retry-button").onclick = () => showToast("再読み込みしてください");
</script>
</body>
</html>
```