המסע אל כוכב הלכת האבוד | חדר בריחה

<!DOCTYPE html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>המסע אל כוכב הלכת האבוד | חדר בריחה</title>
<style>
*{box-sizing:border-box}
:root{color-scheme:dark;--cyan:#00ffcc;--panel:#0a192f;--gold:#ffd700}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at top,#0f2027,#203a43,#2c5364);color:#e0f7fc;font-family:Arial,sans-serif;padding:10px}
button{cursor:pointer;color:inherit;font:inherit}
header,.panel,footer{background:#102a43ee;border:1px solid #00ffcc55;border-radius:12px;padding:10px}
header,footer{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px}
h1{font-size:18px;margin:0;color:var(--cyan)}
h2{font-size:15px;margin:0 0 8px;color:var(--gold)}
small,.muted{color:#8be9fd;font-size:11px}
.layout{display:grid;grid-template-columns:1.4fr 0.9fr;gap:10px}
@media(max-width:768px){.layout{grid-template-columns:1fr}}
.scene{position:relative;min-height:380px;overflow:hidden;border:1px solid #00ffcc77;border-radius:16px;background:linear-gradient(#091428 0%,#0f2b46 70%,#040914 70%);box-shadow:inset 0 0 30px #000a}
.sceneTitle{position:absolute;top:8px;right:8px;max-width:85%;padding:6px 10px;background:#050d18ee;border:1px solid #00ffcc55;border-radius:8px;z-index:2}
.sceneTitle strong{display:block;font-size:15px;color:var(--cyan)}
.hotspot{position:absolute;z-index:3;transform:translate(-50%,-50%);min-width:40px;min-height:40px;border:1px solid #00ffccaa;background:#06263bdd;border-radius:10px;font-size:18px;box-shadow:0 0 10px #00ffcc44;transition:transform .2s}
.hotspot:hover{transform:translate(-50%,-50%) scale(1.1)}
.hotspot.done{border-color:#55ff99;background:#0a3a2a}
.hint{position:absolute;bottom:6px;right:8px;left:8px;font-size:11px;color:#a4f9ff;pointer-events:none}
.side{display:grid;align-content:start;gap:8px}
.progress{height:6px;background:#13315c;border-radius:8px;overflow:hidden;margin:8px 0}
.progress div{height:100%;width:0;background:linear-gradient(90deg,#00ffcc,#55ff99);transition:width .3s}
.objectives-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.objective{font-size:11px;padding:4px 6px;background:#06182c;border-radius:6px;color:#98c1d9}
.objective.done{color:#55ff99}
.log{max-height:110px;overflow:auto}
.note{padding:6px;margin:4px 0;border-right:2px solid var(--cyan);background:#06182c;border-radius:4px;font-size:11px;line-height:1.3}
.rooms{display:flex;gap:4px;flex-wrap:wrap}
button.nav,button.action{padding:6px 10px;border-radius:8px;border:1px solid #00ffcc44;background:#06182c;font-size:12px}
button.nav.active{border-color:var(--cyan);background:#0f3460}
.action.primary{background:linear-gradient(120deg,#00ffcc,#00b4d8);color:#0a192f;font-weight:bold;border:0;padding:8px 14px}
.overlay{position:fixed;inset:0;background:#030711ee;display:none;align-items:center;justify-content:center;padding:12px;z-index:10}
.overlay.show{display:flex}
.modal{width:min(420px,100%);max-height:80vh;overflow:auto;padding:18px;background:linear-gradient(145deg,#112240,#0a192f);border:1px solid #00ffcc66;border-radius:16px}
.modal h2{font-size:20px;margin:8px 0}
.modal p{font-size:13px;line-height:1.5;color:#c1d3fe}
#toast{position:fixed;bottom:15px;left:50%;transform:translateX(-50%);background:#00ffcc;color:#0a192f;padding:8px 14px;border-radius:10px;display:none;z-index:20;font-weight:bold;font-size:12px}
</style>
</head>
<body>

<header>
 <div><h1>🚀 חדר בריחה: המעבדה</h1><small>כיתה ו'</small></div>
 <div>חידות נפתרו: <b id="count">0</b>/10</div>
</header>

<div class="layout">
 <section class="scene">
  <div class="sceneTitle"><strong id="roomTitle">מעבדת המחקר</strong><small id="roomDesc">אסוף את כל הרמזים.</small></div>
  <div id="hotspots"></div>
  <div class="hint">◉ לחצו על החפצים המסומנים</div>
 </section>

 <aside class="side">
  <section class="panel">
   <h2>התקדמות</h2>
   <div class="progress"><div id="bar"></div></div>
   <div id="objectives" class="objectives-grid"></div>
  </section>

  <section class="panel">
   <h2>יומן משימה</h2>
   <div id="log" class="log"><div class="note">המשחק התחיל בהצלחה!</div></div>
  </section>
 </aside>
</div>

<footer>
 <div class="rooms" id="rooms"></div>
 <div class="rooms">
  <button class="action" onclick="help()">ⓘ עזרה</button>
  <button class="action" onclick="reset()">↻ איפוס</button>
 </div>
</footer>

<div class="overlay" id="overlay" onclick="if(event.target===this)closeModal()">
 <div class="modal" id="modal"></div>
</div>

<div id="toast"></div>

<script>
const data=[
 {id:'lab',name:'מעבדה',desc:'החדר המרכזי.',spots:[
  {id:'s1',x:25,y:35,icon:'💻',name:'מחשב',clue:0,text:'כמה זה 7 כפול 8?',evidence:'רמז 1: 56.'},
  {id:'s2',x:55,y:45,icon:'🧪',name:'מבחנות',clue:1,text:'איזה מקום הירוק בצבעים אדום, כחול, ירוק?',evidence:'רמז 2: 3.'},
  {id:'s3',x:80,y:30,icon:'🗺️',name:'מפה',clue:2,text:'באיזו גלקסיה נמצא כוכב הלכת?',evidence:'רמז 3: 4.'}
 ]},
 {id:'control',name:'בקרה',desc:'מערכות שיגור.',spots:[
  {id:'s4',x:30,y:35,icon:'📡',name:'צלחת',clue:3,text:'מהו תדר קליטת האות?',evidence:'רמז 4: 99.'},
  {id:'s5',x:70,y:50,icon:'⚙️',name:'גלגלי שיניים',clue:4,text:'כמה גלגלי שיניים ב-5 זוגות?',evidence:'רמז 5: 10.'},
  {id:'s6',x:50,y:75,icon:'🔐',name:'כספת',clue:5,text:'מספר חודשי השנה פחות 2.',evidence:'רמז 6: 10.'}
 ]},
 {id:'engine',name:'מנועים',desc:'הלב הפועם.',spots:[
  {id:'s7',x:30,y:50,icon:'⚡',name:'מחולל',clue:6,text:'מתח החשמל: 220 וולט. הספרה האמצעית?',evidence:'רמז 7: 2.'},
  {id:'s8',x:75,y:50,icon:'🔧',name:'כלים',clue:7,text:'15 ברגים, השתמשת ב-5. כמה נשארו?',evidence:'רמז 8: 10.'}
 ]},
 {id:'launch',name:'שיגור',desc:'מכאן יוצאים.',spots:[
  {id:'s9',x:40,y:40,icon:'📋',name:'פקודה',clue:8,text:'הספרה הראשונה בקוד הסופי.',evidence:'רמז 9: 7.'},
  {id:'s10',x:60,y:60,icon:'🚀',name:'חללית',clue:9,text:'פתח את לוח השיגור!',evidence:'חידה 10: הזן את כל הרמזים.'}
 ]}
];

const goals=[
 'חידת מחשב','מבחנות כימיה','גלקסיית מפות','צלחת תקשורת',
 'גלגלי שיניים','כספת קטנה','מחולל אנרגיה','ספירת ברגים',
 'פקודת טיסה','שיגור חללית'
];

let room='lab',found=new Set(),seen=new Set();
const $=id=>document.getElementById(id);

function render(){
 const r=data.find(x=>x.id===room);
 $('roomTitle').textContent=r.name;
 $('roomDesc').textContent=r.desc;
 $('hotspots').innerHTML=r.spots.map(s=>`<button class="hotspot ${seen.has(s.id)?'done':''}" style="left:${s.x}%;top:${s.y}%" onclick="inspect('${s.id}')">${s.icon}</button>`).join('');
 $('rooms').innerHTML=data.map(x=>`<button class="nav ${x.id===room?'active':''}" onclick="go('${x.id}')">${x.name}</button>`).join('');
 $('count').textContent=found.size;
 $('bar').style.width=(found.size/10*100)+'%';
 $('objectives').innerHTML=goals.map((g,i)=>`<div class="objective ${found.has(i)?'done':''}">${found.has(i)?'✓':'◇'} ${g}</div>`).join('');
}

function log(title,text){
 const n=document.createElement('div');
 n.className='note';
 n.innerHTML='<b>'+title+'</b><br>'+text;
 $('log').prepend(n);
}

function inspect(id){
 const s=data.flatMap(r=>r.spots).find(s=>s.id===id);
 if(!s)return;
 seen.add(id);
 if(s.clue!==undefined&&!found.has(s.clue)){
  found.add(s.clue);
  log('רמז חדש',s.evidence);
 }
 render();
 modal(s.icon,s.name,s.text, id==='s10'?'<button class="action primary" onclick="finalCode()">הכנס קוד סיום</button>':'');
}

function modal(icon,title,text,extra=''){
 $('modal').innerHTML=`<div style="font-size:24px">${icon}</div><h2>${title}</h2><p>${text}</p>${extra}<p><button class="action" onclick="closeModal()">סגור</button></p>`;
 $('overlay').classList.add('show');
}

function closeModal(){$('overlay').classList.remove('show')}
function go(id){room=id;render();}

function finalCode(){
 if(found.size>=10){
  modal('🌟','כל הכבוד!','הצלחת לפתור את כל החידות ולשגר את החללית!','<button class="action primary" onclick="reset()">שחק שוב</button>');
 } else {
  toast('עליך לפתור את כל 10 החידות קודם!');
 }
}

function help(){
 modal('?','איך משחקים?','לחצו על האייקונים בחדרים, קראו את החידות ואספו את כל 10 הרמזים!');
}

function reset(){
 room='lab';
 found=new Set();
 seen=new Set();
 $('log').innerHTML='';
 closeModal();
 render();
 log('המשחק אותחל מחדש','בהצלחה!');
}

let timer;
function toast(msg){
 $('toast').textContent=msg;
 $('toast').style.display='block';
 clearTimeout(timer);
 timer=setTimeout(()=>$('toast').style.display='none',2000);
}

render();
</script>
</body>
</html>