<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prison Escape - 10 Levels of Freedom</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body { background-color: #0a0a0a; color: #d1d1d1; font-family: 'Special Elite', cursive, serif; margin: 0; overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
#game-container { position: relative; width: 100%; max-width: 800px; height: 500px; margin: auto; background: #1a1a1a; border: 4px solid #333; overflow: hidden; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
.scene { position: absolute; width: 100%; height: 100%; display: none; background-size: cover; background-position: center; }
.scene.active { display: block; }
.clickable { position: absolute; cursor: pointer; transition: background 0.3s; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.clickable:hover { background: rgba(255, 255, 255, 0.1); border: 1px dashed rgba(255, 255, 255, 0.3); }
#inventory { width: 100%; max-width: 800px; height: 80px; margin: 10px auto; background: #222; border: 2px solid #444; display: flex; align-items: center; padding: 0 10px; gap: 10px; }
.inv-slot { width: 60px; height: 60px; background: #333; border: 1px solid #555; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; }
.inv-slot.selected { border-color: #eab308; box-shadow: inset 0 0 10px rgba(234, 179, 8, 0.5); }
#message-box { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 90%; background: rgba(0, 0, 0, 0.9); border: 1px solid #eab308; padding: 15px; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 100; font-size: 14px; }
#message-box.active { opacity: 1; }
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); flex-direction: column; justify-content: center; align-items: center; z-index: 200; display: none; }
.laser { position: absolute; background: rgba(255, 0, 0, 0.6); box-shadow: 0 0 10px red; pointer-events: none; }
.stage-indicator { position: absolute; top: 10px; right: 10px; color: #555; font-size: 0.8rem; }
/* Textures */
.tex-cell { background: repeating-linear-gradient(45deg, #1a1a1a, #1a1a1a 10px, #151515 10px, #151515 20px); }
.tex-hall { background: linear-gradient(to right, #222, #111, #222); }
.tex-tech { background: radial-gradient(circle, #223, #0a0a0a); }
.tex-out { background: linear-gradient(to top, #000, #1a1a2e); }
</style>
</head>
<body>
<div class="p-4 text-center">
<h1 class="text-3xl font-bold text-gray-500 uppercase tracking-widest">Prison Escape</h1>
<p id="sub-title" class="text-sm text-gray-600 mt-1">Stage 1: The Dark Cell</p>
</div>
<div id="game-container">
<!-- Stages 1-10 Scenes -->
<div id="scene-1" class="scene active tex-cell">
<div class="stage-indicator">Stage 1</div>
<div class="clickable bg-yellow-900/20" style="bottom: 20px; left: 50px; width: 200px; height: 100px;" onclick="interact('bed')">藁の山</div>
<div class="clickable bg-gray-800" style="top: 200px; right: 100px; width: 60px; height: 30px;" onclick="interact('brick')">壁</div>
<div class="clickable border-l-4 border-gray-600" style="top: 50px; left: 350px; width: 100px; height: 350px;" onclick="interact('door1')">鉄格子</div>
</div>
<div id="scene-2" class="scene tex-hall">
<div class="stage-indicator">Stage 2</div>
<div class="clickable bg-blue-900/20" style="bottom: 50px; left: 150px; width: 100px; height: 60px;" onclick="interact('toolbox')">工具箱</div>
<div class="clickable bg-gray-700" style="top: 150px; left: 400px; width: 80px; height: 100px;" onclick="interact('panel')">配電盤</div>
<div class="clickable bg-black" style="top: 50px; right: 0; width: 80px; height: 400px;" onclick="interact('door2')">電子ドア</div>
</div>
<div id="scene-3" class="scene tex-tech">
<div class="stage-indicator">Stage 3</div>
<div id="laser-container-3">
<div class="laser" style="top: 100px; width: 100%; height: 2px;"></div>
<div class="laser" style="top: 300px; width: 100%; height: 2px;"></div>
</div>
<div class="clickable bg-gray-800" style="bottom: 20px; right: 50px; width: 120px; height: 100px;" onclick="interact('guard_desk')">警備机</div>
<div class="clickable bg-red-900/20" style="top: 50px; left: 50px; width: 60px; height: 60px;" onclick="interact('sensor')">センサー</div>
<div class="clickable border-4 border-gray-700" style="top: 50px; left: 300px; width: 200px; height: 400px;" onclick="interact('door3')">ゲート</div>
</div>
<div id="scene-4" class="scene tex-hall">
<div class="stage-indicator">Stage 4: 食堂</div>
<div class="clickable bg-gray-700" style="top: 300px; left: 100px; width: 150px; height: 80px;" onclick="interact('table')">長机</div>
<div class="clickable bg-orange-900/20" style="top: 100px; right: 50px; width: 100px; height: 150px;" onclick="interact('locker')">ロッカー</div>
<div class="clickable bg-black" style="top: 50px; left: 400px; width: 100px; height: 400px;" onclick="interact('door4')">厨房の扉</div>
</div>
<div id="scene-5" class="scene tex-tech">
<div class="stage-indicator">Stage 5: 下水道</div>
<div class="clickable bg-green-900/20" style="bottom: 0; left: 0; width: 100%; height: 100px;" onclick="interact('water')">汚水</div>
<div class="clickable bg-gray-600" style="top: 100px; left: 100px; width: 80px; height: 80px; border-radius: 50%;" onclick="interact('valve')">バルブ</div>
<div class="clickable bg-gray-900" style="top: 200px; right: 100px; width: 120px; height: 120px;" onclick="interact('door5')">排水口</div>
</div>
<div id="scene-6" class="scene tex-cell">
<div class="stage-indicator">Stage 6: 武器庫</div>
<div class="clickable bg-blue-900/30" style="top: 100px; left: 50px; width: 200px; height: 200px;" onclick="interact('rack')">武器棚</div>
<div class="clickable bg-red-800" style="top: 300px; right: 100px; width: 40px; height: 40px;" onclick="interact('alarm_btn')">警報機</div>
<div class="clickable border-2 border-gray-400" style="top: 50px; right: 0; width: 80px; height: 400px;" onclick="interact('door6')">強化扉</div>
</div>
<div id="scene-7" class="scene tex-tech">
<div class="stage-indicator">Stage 7: コンピュータ室</div>
<div class="clickable bg-blue-500/10" style="top: 150px; left: 150px; width: 500px; height: 200px;" onclick="interact('mainframes')">大型機</div>
<div class="clickable bg-green-500/20" style="bottom: 50px; left: 350px; width: 100px; height: 60px;" onclick="interact('terminal')">端末</div>
<div class="clickable bg-black" style="top: 50px; left: 0; width: 50px; height: 400px;" onclick="interact('door7')">自動ドア</div>
</div>
<div id="scene-8" class="scene tex-hall">
<div class="stage-indicator">Stage 8: 看守休憩室</div>
<div class="clickable bg-yellow-700/20" style="top: 200px; left: 50px; width: 120px; height: 150px;" onclick="interact('sofa')">ソファ</div>
<div class="clickable bg-gray-600" style="top: 50px; right: 150px; width: 80px; height: 120px;" onclick="interact('vending')">自販機</div>
<div class="clickable bg-gray-900" style="top: 50px; right: 0; width: 80px; height: 400px;" onclick="interact('door8')">出口扉</div>
</div>
<div id="scene-9" class="scene tex-tech">
<div class="stage-indicator">Stage 9: 研究エリア</div>
<div class="clickable bg-purple-900/20" style="top: 100px; left: 100px; width: 300px; height: 300px;" onclick="interact('capsule')">実験ポッド</div>
<div class="clickable bg-gray-500" style="bottom: 50px; right: 50px; width: 100px; height: 150px;" onclick="interact('safe')">金庫</div>
<div class="clickable bg-black" style="top: 100px; right: 0; width: 50px; height: 300px;" onclick="interact('door9')">最終隔壁</div>
</div>
<div id="scene-10" class="scene tex-out">
<div class="stage-indicator">Stage 10: 屋上ヘリポート</div>
<div class="clickable border-4 border-yellow-500 rounded-full" style="top: 150px; left: 250px; width: 300px; height: 200px;" onclick="interact('heli')">H</div>
<div class="clickable bg-gray-800" style="bottom: 50px; left: 50px; width: 100px; height: 50px;" onclick="interact('generator')">発電機</div>
<div class="clickable bg-red-600" style="bottom: 50px; right: 50px; width: 80px; height: 80px; border-radius: 50%;" onclick="interact('flare')">信号弾</div>
</div>
<div id="message-box"></div>
<div id="overlay-end" class="overlay">
<h2 class="text-4xl text-yellow-500 mb-4 font-bold">完全脱出成功！</h2>
<p class="mb-2 text-xl">あなたは自由の空へと飛び立った...</p>
<p class="mb-8 text-gray-500 italic text-sm">You conquered all 10 stages.</p>
<button onclick="location.reload()" class="bg-gray-800 hover:bg-gray-700 text-white px-8 py-3 border border-gray-600">最初からプレイ</button>
</div>
</div>
<div id="inventory">
<div class="text-xs text-gray-500 mr-2 uppercase">道具</div>
<div id="slot-1" class="inv-slot" onclick="selectItem(0)"></div>
<div id="slot-2" class="inv-slot" onclick="selectItem(1)"></div>
<div id="slot-3" class="inv-slot" onclick="selectItem(2)"></div>
<div id="slot-4" class="inv-slot" onclick="selectItem(3)"></div>
</div>
<script>
const state = {
stage: 1, inventory: [], selected: null, flags: {}
};
const itemIcons = {
key: '🔑', hammer: '🔨', paper: '📜', screwdriver: '🪛', pliers: '✂️',
valve_handle: '⚙️', id_card: '💳', code_note: '📝', fuel: '⛽', flare_gun: '🔫'
};
function showMessage(msg) {
const box = document.getElementById('message-box');
box.innerText = msg; box.classList.add('active');
setTimeout(() => box.classList.remove('active'), 3000);
}
function addItem(item) {
if (!state.inventory.includes(item)) {
state.inventory.push(item); updateUI();
showMessage(`${itemIcons[item] || 'アイテム'}を手に入れた！`);
}
}
function removeItem(item) {
state.inventory = state.inventory.filter(i => i !== item);
state.selected = null; updateUI();
}
function selectItem(idx) {
if (state.inventory[idx]) {
state.selected = (state.selected === idx) ? null : idx; updateUI();
}
}
function updateUI() {
document.querySelectorAll('.inv-slot').forEach((s, i) => {
s.innerHTML = state.inventory[i] ? itemIcons[state.inventory[i]] : '';
s.className = `inv-slot ${state.selected === i ? 'selected' : ''}`;
});
document.getElementById('sub-title').innerText = `Stage ${state.stage}: ` + getStageName(state.stage);
}
function getStageName(s) {
return ["", "暗い独房", "静かな廊下", "最終警戒線", "食堂の罠", "下水道の出口", "武器庫の秘密", "コンピュータ室", "休憩室の死角", "研究エリア", "ヘリポート"][s];
}
function nextStage() {
document.getElementById(`scene-${state.stage}`).classList.remove('active');
state.stage++;
if (state.stage > 10) {
document.getElementById('overlay-end').style.display = 'flex';
} else {
document.getElementById(`scene-${state.stage}`).classList.add('active');
updateUI();
showMessage(`Stage ${state.stage}へ進んだ...`);
}
}
function interact(obj) {
const item = state.inventory[state.selected];
// Stage-specific logic
if (state.stage === 1) {
if (obj === 'bed' && !state.flags.s1_bed) { addItem('key'); addItem('hammer'); state.flags.s1_bed = true; }
else if (obj === 'brick' && item === 'hammer') { addItem('paper'); state.flags.s1_code = true; }
else if (obj === 'door1' && item === 'key' && state.flags.s1_code) { removeItem('key'); nextStage(); }
else showMessage("扉は閉ざされている。鍵と暗号が必要だ。");
}
else if (state.stage === 2) {
if (obj === 'toolbox' && !state.flags.s2_tool) { addItem('screwdriver'); state.flags.s2_tool = true; }
else if (obj === 'panel' && item === 'screwdriver') { state.flags.s2_power = true; showMessage("電力を復旧させた。"); }
else if (obj === 'door2' && state.flags.s2_power) nextStage();
else showMessage("電力が足りない。");
}
else if (state.stage === 3) {
if (obj === 'guard_desk' && !state.flags.s3_pliers) { addItem('pliers'); state.flags.s3_pliers = true; }
else if (obj === 'sensor' && item === 'pliers') { state.flags.s3_lasers = true; document.getElementById('laser-container-3').style.display='none'; showMessage("レーザーを無効化した。"); }
else if (obj === 'door3' && state.flags.s3_lasers) nextStage();
else showMessage("レーザーに触れると危険だ。");
}
else if (state.stage === 4) {
if (obj === 'table' && !state.flags.s4_hint) { showMessage("机の裏に『9241』と書かれている。"); state.flags.s4_hint = true; }
else if (obj === 'locker' && !state.flags.s4_handle) { addItem('valve_handle'); state.flags.s4_handle = true; }
else if (obj === 'door4' && state.flags.s4_hint) nextStage();
else showMessage("この扉は暗証番号式だ。");
}
else if (state.stage === 5) {
if (obj === 'valve' && item === 'valve_handle') { state.flags.s5_drain = true; showMessage("水が引いていった。"); removeItem('valve_handle'); }
else if (obj === 'door5' && state.flags.s5_drain) nextStage();
else showMessage("汚水が深くて進めない。");
}
else if (state.stage === 6) {
if (obj === 'rack' && !state.flags.s6_card) { addItem('id_card'); state.flags.s6_card = true; }
else if (obj === 'alarm_btn') showMessage("警報機だ！触るな！");
else if (obj === 'door6' && item === 'id_card') nextStage();
else showMessage("認証カードが必要だ。");
}
else if (state.stage === 7) {
if (obj === 'terminal' && item === 'id_card') { state.flags.s7_hack = true; showMessage("システムをハッキングした。"); }
else if (obj === 'door7' && state.flags.s7_hack) nextStage();
else showMessage("メインフレームが扉を制御している。");
}
else if (state.stage === 8) {
if (obj === 'sofa' && !state.flags.s8_note) { addItem('code_note'); state.flags.s8_note = true; }
else if (obj === 'vending') showMessage("喉が渇いたが、今はそれどころではない。");
else if (obj === 'door8' && item === 'code_note') nextStage();
else showMessage("特殊なパスワードが必要だ。");
}
else if (state.stage === 9) {
if (obj === 'safe' && !state.flags.s9_gun) { addItem('flare_gun'); state.flags.s9_gun = true; }
else if (obj === 'capsule' && !state.flags.s9_fuel) { addItem('fuel'); state.flags.s9_fuel = true; }
else if (obj === 'door9' && state.flags.s9_gun && state.flags.s9_fuel) nextStage();
else showMessage("脱出用の燃料と合図の道具が必要だ。");
}
else if (state.stage === 10) {
if (obj === 'generator' && item === 'fuel') { state.flags.s10_power = true; showMessage("ヘリに燃料を補給した。"); removeItem('fuel'); }
else if (obj === 'flare' && item === 'flare_gun' && state.flags.s10_power) { state.flags.s10_ready = true; showMessage("信号弾を発射！救助が来るぞ！"); }
else if (obj === 'heli' && state.flags.s10_ready) nextStage();
else showMessage("準備が整っていない。燃料を入れ、合図を送れ！");
}
}
window.onload = () => showMessage("自由を求めて、この監獄を突破しろ。");
</script>
</body>
</html>
脱出するゲーム