MindWorld Adventure

<!DOCTYPE html>
<html lang="kk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>MindWorld Adventure</title>
<style>
*{box-sizing:border-box}
body{
 margin:0;background:#11182b;color:white;
 font-family:Arial,sans-serif;text-align:center;
}
header{padding:12px;background:#202746}
h1{margin:4px;color:#ffe49a;font-size:28px}
button,select{
 border:0;border-radius:12px;padding:11px;
 font-size:15px;font-weight:bold;cursor:pointer;
}
button{background:#ffcfeb;color:#39234b}
button:active{transform:scale(.95)}
select{background:#303c5c;color:white}
#app{max-width:850px;margin:auto;padding:10px}
.panel{
 background:#202746;border:1px solid #495477;
 border-radius:16px;padding:12px;margin-bottom:10px;
}
#stats{display:flex;justify-content:space-around;gap:6px;flex-wrap:wrap}
.stat{background:#303c5c;padding:9px;border-radius:10px}
canvas{
 display:block;width:100%;height:auto;
 background:#172b37;border-radius:12px;
 border:2px solid #788a9f;touch-action:none;
}
#message{min-height:42px;padding:8px;color:#ffe49a}
#controls{
 display:grid;grid-template-columns:repeat(3,65px);
 grid-template-rows:repeat(2,52px);
 justify-content:center;gap:6px;margin:10px;
}
#controls button{font-size:23px;padding:4px}
#up{grid-column:2;grid-row:1}
#left{grid-column:1;grid-row:2}
#down{grid-column:2;grid-row:2}
#right{grid-column:3;grid-row:2}
#actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.overlay{
 position:fixed;inset:0;background:#090d20eF;
 display:flex;align-items:center;justify-content:center;
 padding:18px;z-index:5;
}
.dialog{
 width:100%;max-width:420px;background:#242e50;
 padding:24px;border-radius:22px;border:2px solid #c4a7ff;
}
.dialog h2{color:#ffe49a}
.dialog button{margin:5px}
.hidden{display:none!important}
.small{font-size:12px;color:#c6cde5}
</style>
</head>
<body>
<header>
 <h1>🌍 MindWorld</h1>
 <div>✨ Adventure — өз әлеміңді зертте!</div>
</header>

<div id="app">
 <div class="panel">
  <div id="stats">
   <div class="stat" id="levelText">🌲 Деңгей: 1</div>
   <div class="stat" id="gemText">💎 Кристалл: 0</div>
   <div class="stat" id="keyText">🗝️ Кілт: жоқ</div>
  </div>
  <p id="worldName">Сиқырлы орман</p>
  <canvas id="game" width="600" height="400"></canvas>
  <div id="message">Кристалдарды жинап, кілтті тап!</div>
 </div>

 <div class="panel">
  <div id="controls">
   <button id="up" aria-label="Жоғары">⬆️</button>
   <button id="left" aria-label="Солға">⬅️</button>
   <button id="down" aria-label="Төмен">⬇️</button>
   <button id="right" aria-label="Оңға">➡️</button>
  </div>
  <div id="actions">
   <button onclick="interact()">🔍 Әрекет</button>
   <button onclick="showHelp()">❔ Көмек</button>
   <button onclick="restart()">🔄 Қайта бастау</button>
  </div>
  <p class="small">Компьютерде: WASD немесе бағыттауыштар. Телефонда: экрандағы батырмалар.</p>
 </div>
 <div class="panel">
  <label for="lang">🌐 Тіл:</label>
  <select id="lang" onchange="changeLanguage()">
   <option value="kk">Қазақша</option>
   <option value="en">English</option>
   <option value="ko">한국어</option>
  </select>
  <p class="small">MindWorld © Ойна · Үйрен · Зертте</p>
 </div>
</div>

<div id="overlay" class="overlay">
 <div class="dialog">
  <h2>✨ MindWorld Adventure</h2>
  <p>Өз кейіпкеріңді таңда!</p>
  <button onclick="start('👧🏻')">🌸 Қыз</button>
  <button onclick="start('👦🏻')">⚡ Ұл</button>
  <button onclick="start('🧙🏻')">🌟 Өзім таңдаймын</button>
  <p class="small">Әлемді зертте, жұмбақ шеш, кристалдар жина!</p>
 </div>
</div>

<div id="quizOverlay" class="overlay hidden">
 <div class="dialog">
  <h2 id="quizTitle">🧩 Құпия жұмбақ</h2>
  <p id="quizQuestion"></p>
  <div id="quizAnswers"></div>
  <p id="quizFeedback"></p>
  <button id="quizClose" class="hidden" onclick="closeQuiz()">Жалғастыру ➜</button>
 </div>
</div>

<script>
const canvas=document.getElementById("game");
const ctx=canvas.getContext("2d");
const TILE=40, COLS=15, ROWS=10;

const maps=[
[
"###############",
"#P..*....#...E#",
"#.##.##..#.#..#",
"#..*.....#....#",
"###.###.##.##.#",
"#K..#....*....#",
"#.#.#.####.##.#",
"#...#....?..*.#",
"#.*......#....#",
"###############"
],
[
"###############",
"#P..*....#...E#",
"#.##.##..#.#..#",
"#....#...#....#",
"##.#.#.###.##.#",
"#..*...K...*..#",
"#.###.####.##.#",
"#....?...#....#",
"#.*...........#",
"###############"
],
[
"###############",
"#P..*........E#",
"#.##.##.###.#.#",
"#....#...#....#",
"###..#.#.#.##.#",
"#..*...K...*..#",
"#.####.###.##.#",
"#.....?...#...#",
"#.*.........*.#",
"###############"
]
];

const worldNames={
 kk:["Сиқырлы орман","Құпия қамал","Жұлдыздар аралы"],
 en:["Magic Forest","Secret Castle","Star Island"],
 ko:["마법의 숲","비밀의 성","별의 섬"]
};
const words={
 kk:{
  level:"🌲 Деңгей: ",gems:"💎 Кристалл: ",keyYes:"🗝️ Кілт: бар",
  keyNo:"🗝️ Кілт: жоқ",goal:"Кристалдарды жинап, кілтті тап!",
  locked:"🔒 Шығу жабық! Алдымен кілт пен жұмбақты тап.",
  needKey:"🗝️ Алдымен кілтті тап!",
  needQuiz:"🧩 Алдымен құпия жұмбақты шеш!",
  next:"🎉 Керемет! Келесі әлем ашылды!",
  win:"🏆 Құттықтаймын! Сен барлық әлемді зерттедің!",
  foundKey:"🗝️ Кілт табылды!",foundGem:"💎 Кристалл алдың!",
  puzzle:"🧩 Құпия жұмбаққа келдің!",
  help:"Мақсат: кристалдарды жина, K — кілт, ? — жұмбақ, E — шығу. Кілт пен жұмбақтан кейін есік ашылады.",
  correct:"🌟 Дұрыс! Жұмбақ шешілді!",
  wrong:"Қайта байқап көр! Әрекет батырмасын бас.",
  quizQ:"2 + 3 × 2 = ?",options:["10","8","12"],
  quizQ2:"Қазақстанның астанасы?",options2:["Алматы","Астана","Ақтау"],
  quizQ3:"Аптада неше күн бар?",options3:["5","7","10"],
  continue:"Жалғастыру ➜",finish:"Ойын аяқталды!"
 },
 en:{
  level:"🌲 Level: ",gems:"💎 Crystals: ",keyYes:"🗝️ Key: yes",
  keyNo:"🗝️ Key: no",goal:"Collect crystals and find the key!",
  locked:"🔒 The exit is locked! Find the key and solve the puzzle.",
  needKey:"🗝️ Find the key first!",needQuiz:"🧩 Solve the puzzle first!",
  next:"🎉 Great! The next world is unlocked!",
  win:"🏆 Congratulations! You explored every world!",
  foundKey:"🗝️ Key found!",foundGem:"💎 Crystal collected!",
  puzzle:"🧩 You found a secret puzzle!",
  help:"Collect crystals. K = key, ? = puzzle, E = exit. Find the key and solve the puzzle.",
  correct:"🌟 Correct! Puzzle solved!",wrong:"Try again!",
  quizQ:"2 + 3 × 2 = ?",options:["10","8","12"],
  quizQ2:"Capital of Kazakhstan?",options2:["Almaty","Astana","Aktau"],
  quizQ3:"How many days are in a week?",options3:["5","7","10"],
  continue:"Continue ➜",finish:"Game over!"
 },
 ko:{
  level:"🌲 레벨: ",gems:"💎 수정: ",keyYes:"🗝️ 열쇠: 있음",
  keyNo:"🗝️ 열쇠: 없음",goal:"수정을 모으고 열쇠를 찾으세요!",
  locked:"🔒 열쇠를 찾고 수수께끼를 풀어야 합니다.",
  needKey:"🗝️ 먼저 열쇠를 찾으세요!",needQuiz:"🧩 먼저 수수께끼를 푸세요!",
  next:"🎉 좋아요! 다음 세계가 열렸어요!",
  win:"🏆 모든 세계를 탐험했어요!",
  foundKey:"🗝️ 열쇠를 찾았어요!",foundGem:"💎 수정을 얻었어요!",
  puzzle:"🧩 비밀 수수께끼예요!",
  help:"수정을 모으세요. K는 열쇠, ?는 수수께끼, E는 출구예요.",
  correct:"🌟 정답이에요!",wrong:"다시 도전하세요!",
  quizQ:"2 + 3 × 2 = ?",options:["10","8","12"],
  quizQ2:"카자흐스탄의 수도는?",options2:["알마티","아스타나","악타우"],
  quizQ3:"일주일은 며칠인가요?",options3:["5","7","10"],
  continue:"계속 ➜",finish:"게임 종료!"
 }
};

let lang="kk",level=0,player={x:1,y:1},hero="👧🏻";
let gems=0,hasKey=false,solved=false,ended=false;
let collected=new Set(),opened=false,quizIndex=0;
let message="";

function start(character){
 hero=character;
 document.getElementById("overlay").classList.add("hidden");
 loadLevel(0);
}
function loadLevel(n){
 level=n;player={x:1,y:1};
 gems=0;hasKey=false;solved=false;ended=false;
 collected=new Set();opened=false;
 maps[level].forEach((row,y)=>{
  const x=row.indexOf("P");
  if(x>=0)player={x,y};
 });
 document.getElementById("worldName").textContent=worldNames[lang][level];
 message=words[lang].goal;
 update();draw();
}
function update(){
 const w=words[lang];
 document.getElementById("levelText").textContent=w.level+(level+1);
 document.getElementById("gemText").textContent=w.gems+gems;
 document.getElementById("keyText").textContent=hasKey?w.keyYes:w.keyNo;
 document.getElementById("message").textContent=message;
 document.getElementById("worldName").textContent=worldNames[lang][level];
}
function tile(x,y){
 if(y<0||y>=ROWS||x<0||x>=COLS)return "#";
 return maps[level][y][x];
}
function move(dx,dy){
 if(ended||!document.getElementById("quizOverlay").classList.contains("hidden"))return;
 const x=player.x+dx,y=player.y+dy,t=tile(x,y);
 if(t==="#"||t==="T")return;
 if(t==="E"){
  if(!hasKey){message=words[lang].needKey;update();return}
  if(!solved){message=words[lang].needQuiz;update();return}
  if(level<maps.length-1){
   message=words[lang].next;update();
   setTimeout(()=>loadLevel(level+1),500);
  }else{
   ended=true;message=words[lang].win;update();
  }
  return;
 }
 player={x,y};
 const id=x+","+y;
 if(t==="*"&&!collected.has(id)){
  collected.add(id);gems++;message=words[lang].foundGem;
 }
 if(t==="K"&&!hasKey){hasKey=true;collected.add(id);message=words[lang].foundKey}
 if(t==="?"&&!solved){message=words[lang].puzzle;quizIndex=0;showQuiz()}
 update();draw();
}
function draw(){
 ctx.clearRect(0,0,canvas.width,canvas.height);
 for(let y=0;y<ROWS;y++){
  for(let x=0;x<COLS;x++){
   const t=tile(x,y),px=x*TILE,py=y*TILE;
   ctx.fillStyle=(x+y)%2?"#23463f":"#285044";
   ctx.fillRect(px,py,TILE,TILE);
   ctx.strokeStyle="#ffffff0b";ctx.strokeRect(px,py,TILE,TILE);
   ctx.textAlign="center";ctx.textBaseline="middle";ctx.font="25px Arial";
   if(t==="#"){
    ctx.fillStyle="#20304b";ctx.fillRect(px,py,TILE,TILE);
    ctx.fillText("🌲",px+20,py+20);
   }else if(t==="*"){
    if(!collected.has(x+","+y))ctx.fillText("💎",px+20,py+20);
   }else if(t==="K"){
    if(!hasKey)ctx.fillText("🗝️",px+20,py+20);
   }else if(t==="?"){
    if(!solved)ctx.fillText("📜",px+20,py+20);
    else ctx.fillText("✨",px+20,py+20);
   }else if(t==="E"){
    ctx.fillText(hasKey&&solved?"🚪":"🔒",px+20,py+20);
   }
  }
 }
 ctx.font="30px Arial";ctx.textAlign="center";
 ctx.fillText(hero,player.x*TILE+20,player.y*TILE+21);
}
function showQuiz(){
 const w=words[lang];
 const qs=[
  {q:w.quizQ,a:w.options,correct:1},
  {q:w.quizQ2,a:w.options2,correct:1},
  {q:w.quizQ3,a:w.options3,correct:1}
 ];
 const q=qs[quizIndex%qs.length];
 document.getElementById("quizQuestion").textContent=q.q;
 document.getElementById("quizTitle").textContent="🧩 "+(lang==="en"?"Secret puzzle":lang==="ko"?"비밀 수수께끼":"Құпия жұмбақ");
 document.getElementById("quizFeedback").textContent="";
 document.getElementById("quizClose").classList.add("hidden");
 const box=document.getElementById("quizAnswers");box.innerHTML="";
 q.a.forEach((a,i)=>{
  const b=document.createElement("button");b.textContent=a;
  b.style.display="block";b.style.width="100%";b.style.margin="8px 0";
  b.onclick=()=>{
   if(i===q.correct){
    solved=true;message=w.correct;
    document.getElementById("quizFeedback").textContent=w.correct;
    box.innerHTML="";
    document.getElementById("quizClose").classList.remove("hidden");
   }else{
    document.getElementById("quizFeedback").textContent=w.wrong;
   }
   update();draw();
  };
  box.appendChild(b);
 });
 document.getElementById("quizClose").textContent=w.continue;
 document.getElementById("quizOverlay").classList.remove("hidden");
}
function closeQuiz(){
 document.getElementById("quizOverlay").classList.add("hidden");
 update();draw();
}
function interact(){
 const t=tile(player.x,player.y);
 if(t==="?"){showQuiz();return}
 if(tile(player.x+1,player.y)==="?"||
 tile(player.x-1,player.y)==="?"||
 tile(player.x,player.y+1)==="?"||
 tile(player.x,player.y-1)==="?"){showQuiz();return}
 message=words[lang].help;update();
}
function showHelp(){message=words[lang].help;update()}
function restart(){loadLevel(0)}
function changeLanguage(){
 lang=document.getElementById("lang").value;
 update();
 document.getElementById("quizClose").textContent=words[lang].continue;
 draw();
}
document.getElementById("up").onclick=()=>move(0,-1);
document.getElementById("down").onclick=()=>move(0,1);
document.getElementById("left").onclick=()=>move(-1,0);
document.getElementById("right").onclick=()=>move(1,0);
document.addEventListener("keydown",e=>{
 const k=e.key.toLowerCase();
 if(["arrowup","arrowdown","arrowleft","arrowright"," "].includes(k))e.preventDefault();
 if(k==="arrowup"||k==="w")move(0,-1);
 if(k==="arrowdown"||k==="s")move(0,1);
 if(k==="arrowleft"||k==="a")move(-1,0);
 if(k==="arrowright"||k==="d")move(1,0);
 if(k==="e")interact();
});
changeLanguage();
</script>
</body>
</html>