🛤️🎉オレゴントレイルゲームへようこそ🎉🛤️
パーティーを作成して旅に出発しよう！
✨旅の進行状況✨
ミズーリ → 🌲🌳🌾 → オレゴン
```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 bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid black; overflow-y: auto; padding: 10px;">
<div id="intro" style="text-align: center;">
<h2 style="font-size: 24px;">🛤️🎉オレゴントレイルゲームへようこそ🎉🛤️</h2>
<p>パーティーを作成して旅に出発しよう！</p>
<button id="createParty" onclick="createParty()" style="font-size: 18px; padding: 5px 10px;">パーティーを作成する✨</button>
</div>
<div id="game" style="display: none;">
<h3 style="font-size: 20px;">✨旅の進行状況✨</h3>
<p id="progress" style="font-weight: bold;">ミズーリ → 🌲🌳🌾 → オレゴン</p>
<div id="partyStatus"></div>
<button onclick="nextTurn()" style="font-size: 18px; padding: 5px 10px;">次のターンへ進む➡️</button>
<div id="eventLog"></div>
</div>
</div>
<script>
const names = ["ジョン", "ウィリアム", "ジェームズ", "チャールズ", "ジョージ",
"ヘンリー", "アーサー", "フランク", "エドワード", "フレッド"];
const jobs = ["農夫", "医者", "猟師", "鍛冶屋", "教師",
"商人", "大工", "船乗り", "兵士", "牧師"];
const party = [];
let supplies = {};
let turnCount = 0;
let progress = "ミズーリ";
function createParty() {
document.getElementById("intro").style.display = "none";
document.getElementById("game").style.display = "block";
for (let i = 0; i < 4; i++) {
let name = names[Math.floor(Math.random() * names.length)];
let job = jobs[Math.floor(Math.random() * jobs.length)];
let health = 10 + Math.floor(Math.random() * 6);
let luck = Math.floor(Math.random() * 6) + 1;
party.push({ name, job, health, luck });
}
supplies = {
牛: Math.floor(Math.random() * 6) + 1,
食料: Math.floor(Math.random() * 6) + 1,
弾薬: Math.floor(Math.random() * 6) + 1,
馬車のパーツ: Math.floor(Math.random() * 6) + 1,
};
displayStatus();
}
function displayStatus() {
const statusDiv = document.getElementById("partyStatus");
statusDiv.innerHTML = "";
party.forEach(character => {
let charDiv = document.createElement("div");
charDiv.innerHTML = `👤${character.name} (${character.job}) - 体力: ${character.health}, 幸運度: ${character.luck}`;
charDiv.style.animation = "fadeIn 1s";
statusDiv.appendChild(charDiv);
});
const suppliesDiv = document.createElement("div");
suppliesDiv.innerHTML = `🐄牛: ${supplies.牛}, 🍞食料: ${supplies.食料}, 🔫弾薬: ${supplies.弾薬}, 🛠️馬車のパーツ: ${supplies.馬車のパーツ}`;
suppliesDiv.style.animation = "fadeIn 1s";
statusDiv.appendChild(suppliesDiv);
}
function nextTurn() {
if (turnCount >= 50 || party.length === 0) return;
turnCount++;
progress += " → 🌲";
const eventType = Math.random() < 0.8 ? "bad" : "good";
if (eventType === "bad") {
const character = party[Math.floor(Math.random() * party.length)];
const difficulty = Math.floor(Math.random() * 6) + 2;
const lostHealth = difficulty > character.luck ? Math.floor(Math.random() * 6) + 1 : 0;
if (lostHealth > 0) {
character.health -= lostHealth;
if (character.health <= 0) {
// Character dies
character.health = 0;
party.splice(party.indexOf(character), 1);
logEvent(`😢 ${character.name} (${character.job})は旅の途中で亡くなりました`);
} else {
logEvent(`⚠️ ${character.name} (${character.job})がアクシデントのため、体力を${lostHealth}失いました`);
}
} else {
logEvent(`✨ ${character.name} (${character.job})はアクシデントを乗り越えました`);
}
} else {
const foodGain = Math.floor(Math.random() * 6) + 1;
supplies.食料 += foodGain;
logEvent(`🎉パーティーは狩りに成功し、食料を${foodGain}入手しました！`);
}
if (turnCount >= 50) {
endGame();
} else {
displayStatus();
document.getElementById("progress").textContent = progress;
}
}
function logEvent(message) {
const logDiv = document.getElementById("eventLog");
const eventDiv = document.createElement("div");
eventDiv.textContent = message;
eventDiv.style.animation = "fadeIn 1s";
logDiv.appendChild(eventDiv);
}
function endGame() {
if (party.length > 0) {
document.getElementById("progress").textContent = "オレゴン到達！🎉";
logEvent("🎉おめでとうございます！トレイルを成功しました！");
} else {
document.getElementById("progress").textContent = "😭すべてのキャラクターが亡くなりました…";
logEvent("😭全員が亡くなりました…再挑戦してください！");
}
}
</script>
</body>
</html>
```