3D Egg Stealing Multiplayer Game in JavaScript and Canvas

127 0 Games skun Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

3D Egg Stealing Multiplayer Game in JavaScript and Canvas

<div class="stage">
  <canvas id="gl"></canvas>
  <canvas id="c" width="900" height="540"></canvas>
  <div id="ui">
    <button id="upBtn">⬆ Upgrade</button>
    <div id="panel">
      <b>Upgrade</b>
      <button id="upPad" class="g"></button>
      <button id="upHome" class="g"></button>
    </div>
    <button id="shopBtn">🎨 Shop skin</button>
    <button id="listBtn">📋 Ro'yxat</button>
    <button id="findBtn">🔍 Qidiruv</button>
    <button id="codeBtn">🔑 Kod</button>
    <button id="qBtn">🖥 4K: yoqilgan</button>
  </div>
</div>
<div id="shop" class="modal"><div class="box"><div class="sh"><b>🎨 Skin do'koni</b><button id="shopClose">✖</button></div><div id="skins"></div></div></div>
<div id="list" class="modal"><div class="box"><div class="sh"><b>📋 Nodir tuxumlar ro'yxati</b><button id="listClose">✖</button></div><div id="lst"></div></div></div>
<div id="pin"></div>
<button id="homeBtn">🏠 Uy</button>
<div id="inv"></div>
<div id="req"><div id="reqTxt"></div><div class="rb"><button id="reqYes" class="g">Ha</button><button id="reqNo">Yo'q</button></div></div>
<div id="home" class="modal"><div class="box"><div class="sh"><b>🏠 Uyimdagi narsalar</b><button id="homeClose">✖</button></div><div id="homeList"></div></div></div>
<div id="code" class="modal"><div class="box"><div class="sh"><b>🔑 Kod kiritish</b><button id="codeClose">✖</button></div>
  <input id="codeIn" type="text" placeholder="Kodni kiriting" autocomplete="off" autocapitalize="off" spellcheck="false">
  <button id="codeGo" class="g">Tasdiqlash</button>
  <div id="codeSt" style="margin:8px 0;font-size:14px;color:#555"></div></div></div>
<div id="find" class="modal"><div class="box"><div class="sh"><b>🔍 Qidiruv</b><button id="findClose">✖</button></div>
  <div>Sizning ID ingiz: <b id="myId"></b></div>
  <input id="findIn" type="number" min="1" max="10000000" placeholder="Do'stingiz ID sini kiriting">
  <button id="findGo" class="g">Ulanish</button>
  <div id="netSt"></div><div id="plist"></div></div></div>
<div id="joy"><div id="knob"></div></div>
<div id="eBtn">E</div>
<div id="jBtn">⤒</div>
<div id="hitBtn">🏏</div>
<div id="giveBtn">🎁</div>
<p id="help"></p>

CSS

/* Steal an Egg — CSS qismi (Webleb: CSS oynasiga qo'ying) */
*{margin:0;box-sizing:border-box}
body{background:#1f2a1f;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;font-family:"Trebuchet MS",Verdana,sans-serif;color:#fff;padding:0;overflow:hidden;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
body.t{justify-content:flex-start}
.stage{position:fixed;inset:0;max-width:none}
.stage{border:0;border-radius:0;overflow:hidden;background:#1f2a1f;line-height:0}
canvas{display:block}
#c{position:absolute;left:0;top:0;touch-action:none}
#gl{position:absolute;left:0;top:0}
#homeBtn{position:fixed;right:12px;top:55%;z-index:8;font-size:17px;padding:8px 14px;min-height:64px}
#inv{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:4px;z-index:8;background:#0006;padding:5px;border-radius:12px}
.it{width:48px;height:64px;padding:0;position:relative;background:#fff;border:3px solid #2b2b2b;border-radius:8px;box-shadow:none;display:flex;align-items:center;justify-content:center}
.it.e{background:#ffffff33;border-style:dashed;cursor:default}
.it small{position:absolute;left:3px;top:0;font-size:10px;color:#2b2b2b}
.it .egg{display:block;width:20px;height:26px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;border:2px solid #2b2b2b}
.it .em{font-size:22px}
.it.sel{outline:4px solid #3a86ff;outline-offset:1px}
body.look,body.look *{cursor:none!important}
#pin{position:fixed;width:18px;height:18px;margin:-9px 0 0 -9px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #2b2b2b;pointer-events:none;z-index:50;display:none}
.it.hot{border-color:#ff4d4d}
.an{display:inline-block;transform-origin:50% 100%;animation:anBob 1.8s ease-in-out infinite}   /* zaxira: animals.css bo'lmasa */
@keyframes anBob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-3px) scale(.97,1.04)}}
#req{position:fixed;right:12px;top:32%;width:227px;height:113px;background:#2b2b2bf2;border:3px solid #fff;border-radius:12px;z-index:30;display:none;flex-direction:column;justify-content:space-between;padding:10px;font-size:14px;line-height:1.3}
.rb{display:flex;gap:8px;justify-content:flex-end}
.rb button{min-height:44px}
@media (max-width:520px){.it{width:34px}}
input{font:inherit;padding:6px 10px;border:3px solid #2b2b2b;border-radius:10px;width:100%;margin:8px 0;user-select:text;-webkit-user-select:text}
#netSt{margin:8px 0;font-size:14px;color:#555}
#help{position:fixed;top:6px;left:50%;transform:translateX(-50%);font-size:12px;background:#0007;padding:3px 10px;border-radius:10px;pointer-events:none;max-width:56%;margin:0;z-index:5}
@media (orientation:portrait) and (pointer:coarse){#inv{bottom:200px}}
#ui{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
button{min-height:52px;font:inherit;font-weight:bold;cursor:pointer;background:#3a86ff;color:#fff;border:3px solid #2b2b2b;border-radius:10px;padding:6px 12px;box-shadow:0 3px 0 #2b2b2b}
button:active{transform:translateY(3px);box-shadow:none}
button.g{background:#2fbf71}button:disabled{background:#999;cursor:not-allowed}
#ui>button,#panel button{font-size:16px;padding:8px 14px;min-height:64px}
#panel{display:none;flex-direction:column;gap:6px;background:#2b2b2bdd;padding:10px;border-radius:12px;max-width:calc(100vw - 40px)}
#panel b{text-align:center}
#panel button{white-space:normal;text-align:center}
.modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:20;padding:12px}
.box{background:#fff;color:#2b2b2b;border:4px solid #2b2b2b;border-radius:16px;padding:12px;width:min(560px,100%);max-height:85vh;overflow:auto;touch-action:pan-y}
.sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:18px}
#skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.sk{border:3px solid #2b2b2b;border-radius:12px;padding:8px;text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center}
.sw{width:44px;height:44px;flex:none;border-radius:50%;border:3px solid #2b2b2b}
.sk small,.li small{color:#555}
.li{display:flex;gap:10px;align-items:center;border:3px solid #2b2b2b;border-radius:12px;padding:8px;margin-bottom:8px;font-size:14px}
#joy,#eBtn,#jBtn,#hitBtn,#giveBtn{position:fixed;display:none;touch-action:none;z-index:9}
#joy{left:20px;bottom:calc(24px + env(safe-area-inset-bottom,0px));width:150px;height:150px;border-radius:50%;background:#ffffff33;border:3px solid #fff8}
#knob{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;background:#ffffffcc;pointer-events:none}
#eBtn{right:24px;bottom:calc(44px + env(safe-area-inset-bottom,0px));width:100px;height:100px;border-radius:50%;background:#3a86ffcc;border:4px solid #2b2b2b;align-items:center;justify-content:center;font-size:40px;font-weight:bold}
#jBtn{right:140px;bottom:calc(30px + env(safe-area-inset-bottom,0px));width:76px;height:76px;border-radius:50%;background:#2fbf71cc;border:4px solid #2b2b2b;align-items:center;justify-content:center;font-size:30px;font-weight:bold}
#hitBtn,#giveBtn{width:64px;height:64px;border-radius:50%;border:4px solid #2b2b2b;align-items:center;justify-content:center;font-size:28px}
#hitBtn{right:24px;bottom:calc(160px + env(safe-area-inset-bottom,0px));background:#ff9f1ccc}
#giveBtn{right:116px;bottom:calc(120px + env(safe-area-inset-bottom,0px));background:#9b5de5cc}
body.t #joy{display:block}body.t #eBtn,body.t #jBtn,body.t #hitBtn,body.t #giveBtn{display:flex}
p{margin-top:8px;font-size:14px;text-align:center;opacity:.9}

/* ---- Hayvonlar animatsiyalari (animals.py yaratgan) ---- */
/* animals.css — animals.py tomonidan yaratilgan. Qo'lda o'zgartirmang, animals.py ni qayta ishga tushiring. */
.an{display:inline-block;transform-origin:50% 100%;animation-timing-function:ease-in-out;animation-iteration-count:infinite;will-change:transform}
.it:hover .an,.li:hover .an{animation-duration:.45s!important}
@media (prefers-reduced-motion:reduce){.an{animation:none!important}}
@keyframes an-hop{
  0%{transform:translateY(-0.00px) rotate(0.00deg) scale(1.220,0.820)}
  8%{transform:translateY(-4.89px) rotate(0.00deg) scale(1.097,0.912)}
  17%{transform:translateY(-8.89px) rotate(0.00deg) scale(1.014,0.987)}
  25%{transform:translateY(-12.00px) rotate(0.00deg) scale(0.957,1.045)}
  33%{transform:translateY(-14.22px) rotate(0.00deg) scale(0.920,1.087)}
  42%{transform:translateY(-15.56px) rotate(0.00deg) scale(0.900,1.112)}
  50%{transform:translateY(-16.00px) rotate(0.00deg) scale(0.893,1.120)}
  58%{transform:translateY(-15.56px) rotate(0.00deg) scale(0.900,1.112)}
  67%{transform:translateY(-14.22px) rotate(0.00deg) scale(0.920,1.087)}
  75%{transform:translateY(-12.00px) rotate(0.00deg) scale(0.957,1.045)}
  83%{transform:translateY(-8.89px) rotate(0.00deg) scale(1.014,0.987)}
  92%{transform:translateY(-4.89px) rotate(0.00deg) scale(1.097,0.912)}
  100%{transform:translateY(-0.00px) rotate(0.00deg) scale(1.220,0.820)}
}
@keyframes an-walk{
  0%{transform:translateY(-0.00px) rotate(0.00deg) scale(1.000,1.000)}
  8%{transform:translateY(-2.60px) rotate(3.46deg) scale(1.000,1.017)}
  17%{transform:translateY(-2.60px) rotate(3.46deg) scale(1.000,1.017)}
  25%{transform:translateY(-0.00px) rotate(0.00deg) scale(1.000,1.000)}
  33%{transform:translateY(-2.60px) rotate(-3.46deg) scale(1.000,0.983)}
  42%{transform:translateY(-2.60px) rotate(-3.46deg) scale(1.000,0.983)}
  50%{transform:translateY(-0.00px) rotate(-0.00deg) scale(1.000,1.000)}
  58%{transform:translateY(-2.60px) rotate(3.46deg) scale(1.000,1.017)}
  67%{transform:translateY(-2.60px) rotate(3.46deg) scale(1.000,1.017)}
  75%{transform:translateY(-0.00px) rotate(0.00deg) scale(1.000,1.000)}
  83%{transform:translateY(-2.60px) rotate(-3.46deg) scale(1.000,0.983)}
  92%{transform:translateY(-2.60px) rotate(-3.46deg) scale(1.000,0.983)}
  100%{transform:translateY(-0.00px) rotate(-0.00deg) scale(1.000,1.000)}
}
@keyframes an-stomp{
  0%{transform:translateY(-0.00px) rotate(0.00deg) scale(1.000,1.000)}
  8%{transform:translateY(-1.00px) rotate(1.25deg) scale(1.015,0.985)}
  17%{transform:translateY(-1.73px) rotate(2.17deg) scale(1.026,0.974)}
  25%{transform:translateY(-2.00px) rotate(2.50deg) scale(1.030,0.970)}
  33%{transform:translateY(-1.73px) rotate(2.17deg) scale(1.026,0.974)}
  42%{transform:translateY(-1.00px) rotate(1.25deg) scale(1.015,0.985)}
  50%{transform:translateY(-0.00px) rotate(0.00deg) scale(1.000,1.000)}
  58%{transform:translateY(-1.00px) rotate(-1.25deg) scale(1.015,0.985)}
  67%{transform:translateY(-1.73px) rotate(-2.17deg) scale(1.026,0.974)}
  75%{transform:translateY(-2.00px) rotate(-2.50deg) scale(1.030,0.970)}
  83%{transform:translateY(-1.73px) rotate(-2.17deg) scale(1.026,0.974)}
  92%{transform:translateY(-1.00px) rotate(-1.25deg) scale(1.015,0.985)}
  100%{transform:translateY(-0.00px) rotate(-0.00deg) scale(1.000,1.000)}
}
@keyframes an-hover{
  0%{transform:translateY(-4.00px) rotate(0.00deg) scale(1.000,1.000)}
  8%{transform:translateY(-7.00px) rotate(0.78deg) scale(1.000,1.015)}
  17%{transform:translateY(-9.20px) rotate(1.50deg) scale(1.000,1.026)}
  25%{transform:translateY(-10.00px) rotate(2.12deg) scale(1.000,1.030)}
  33%{transform:translateY(-9.20px) rotate(2.60deg) scale(1.000,1.026)}
  42%{transform:translateY(-7.00px) rotate(2.90deg) scale(1.000,1.015)}
  50%{transform:translateY(-4.00px) rotate(3.00deg) scale(1.000,1.000)}
  58%{transform:translateY(-1.00px) rotate(2.90deg) scale(1.000,0.985)}
  67%{transform:translateY(1.20px) rotate(2.60deg) scale(1.000,0.974)}
  75%{transform:translateY(2.00px) rotate(2.12deg) scale(1.000,0.970)}
  83%{transform:translateY(1.20px) rotate(1.50deg) scale(1.000,0.974)}
  92%{transform:translateY(-1.00px) rotate(0.78deg) scale(1.000,0.985)}
  100%{transform:translateY(-4.00px) rotate(0.00deg) scale(1.000,1.000)}
}
@keyframes an-float{
  0%{transform:translateY(-3.00px) rotate(0.00deg) scale(1.000,1.000)}
  8%{transform:translateY(-5.50px) rotate(1.00deg) scale(1.035,1.000)}
  17%{transform:translateY(-7.33px) rotate(1.73deg) scale(1.035,1.000)}
  25%{transform:translateY(-8.00px) rotate(2.00deg) scale(1.000,1.000)}
  33%{transform:translateY(-7.33px) rotate(1.73deg) scale(0.965,1.000)}
  42%{transform:translateY(-5.50px) rotate(1.00deg) scale(0.965,1.000)}
  50%{transform:translateY(-3.00px) rotate(0.00deg) scale(1.000,1.000)}
  58%{transform:translateY(-0.50px) rotate(-1.00deg) scale(1.035,1.000)}
  67%{transform:translateY(1.33px) rotate(-1.73deg) scale(1.035,1.000)}
  75%{transform:translateY(2.00px) rotate(-2.00deg) scale(1.000,1.000)}
  83%{transform:translateY(1.33px) rotate(-1.73deg) scale(0.965,1.000)}
  92%{transform:translateY(-0.50px) rotate(-1.00deg) scale(0.965,1.000)}
  100%{transform:translateY(-3.00px) rotate(-0.00deg) scale(1.000,1.000)}
}
@keyframes an-scuttle{
  0%{transform:translateY(-0.00px) rotate(0.00deg) scale(1.000,1.000)}
  8%{transform:translateY(-1.30px) rotate(6.93deg) scale(1.000,1.000)}
  17%{transform:translateY(-1.30px) rotate(-6.93deg) scale(1.000,1.000)}
  25%{transform:translateY(-0.00px) rotate(-0.00deg) scale(1.000,1.000)}
  33%{transform:translateY(-1.30px) rotate(6.93deg) scale(1.000,1.000)}
  42%{transform:translateY(-1.30px) rotate(-6.93deg) scale(1.000,1.000)}
  50%{transform:translateY(-0.00px) rotate(-0.00deg) scale(1.000,1.000)}
  58%{transform:translateY(-1.30px) rotate(6.93deg) scale(1.000,1.000)}
  67%{transform:translateY(-1.30px) rotate(-6.93deg) scale(1.000,1.000)}
  75%{transform:translateY(-0.00px) rotate(-0.00deg) scale(1.000,1.000)}
  83%{transform:translateY(-1.30px) rotate(6.93deg) scale(1.000,1.000)}
  92%{transform:translateY(-1.30px) rotate(-6.93deg) scale(1.000,1.000)}
  100%{transform:translateY(-0.00px) rotate(-0.00deg) scale(1.000,1.000)}
}
@keyframes an-glide{
  0%{transform:translateY(-2.00px) rotate(0.00deg) scale(1.000,1.000)}
  8%{transform:translateY(-3.50px) rotate(3.00deg) scale(1.000,1.000)}
  17%{transform:translateY(-4.60px) rotate(5.20deg) scale(1.000,1.000)}
  25%{transform:translateY(-5.00px) rotate(6.00deg) scale(1.000,1.000)}
  33%{transform:translateY(-4.60px) rotate(5.20deg) scale(1.000,1.000)}
  42%{transform:translateY(-3.50px) rotate(3.00deg) scale(1.000,1.000)}
  50%{transform:translateY(-2.00px) rotate(0.00deg) scale(1.000,1.000)}
  58%{transform:translateY(-0.50px) rotate(-3.00deg) scale(1.000,1.000)}
  67%{transform:translateY(0.60px) rotate(-5.20deg) scale(1.000,1.000)}
  75%{transform:translateY(1.00px) rotate(-6.00deg) scale(1.000,1.000)}
  83%{transform:translateY(0.60px) rotate(-5.20deg) scale(1.000,1.000)}
  92%{transform:translateY(-0.50px) rotate(-3.00deg) scale(1.000,1.000)}
  100%{transform:translateY(-2.00px) rotate(-0.00deg) scale(1.000,1.000)}
}
@keyframes an-robot{
  0%{transform:translateY(0.00px) rotate(0.00deg) scale(1.000,1.000)}
  8%{transform:translateY(0.00px) rotate(0.00deg) scale(1.000,1.000)}
  17%{transform:translateY(0.00px) rotate(3.00deg) scale(1.000,1.000)}
  25%{transform:translateY(0.00px) rotate(3.00deg) scale(1.000,1.000)}
  33%{transform:translateY(0.00px) rotate(3.00deg) scale(1.000,1.000)}
  42%{transform:translateY(0.00px) rotate(0.00deg) scale(1.000,1.000)}
  50%{transform:translateY(0.00px) rotate(0.00deg) scale(1.000,1.000)}
  58%{transform:translateY(0.00px) rotate(0.00deg) scale(1.000,1.000)}
  67%{transform:translateY(0.00px) rotate(-3.00deg) scale(1.000,1.000)}
  75%{transform:translateY(0.00px) rotate(-3.00deg) scale(1.000,1.000)}
  83%{transform:translateY(0.00px) rotate(-3.00deg) scale(1.000,1.000)}
  92%{transform:translateY(0.00px) rotate(-0.00deg) scale(1.000,1.000)}
  100%{transform:translateY(0.00px) rotate(-0.00deg) scale(1.000,1.000)}
}
.an.an-1f425{animation-name:an-hop;animation-duration:0.74s;animation-delay:-0.3s} /* 🐥 */
.an.an-1f422{animation-name:an-stomp;animation-duration:0.98s;animation-delay:-0.79s} /* 🐢 */
.an.an-1f430{animation-name:an-hop;animation-duration:0.78s;animation-delay:-0.41s} /* 🐰 */
.an.an-1f98a{animation-name:an-walk;animation-duration:0.61s;animation-delay:-0.12s} /* 🦊 */
.an.an-1f43c{animation-name:an-stomp;animation-duration:0.89s;animation-delay:-0.01s} /* 🐼 */
.an.an-1f981{animation-name:an-walk;animation-duration:0.63s;animation-delay:-0.07s} /* 🦁 */
.an.an-1f42f{animation-name:an-walk;animation-duration:0.54s;animation-delay:-0.48s} /* 🐯 */
.an.an-1f985{animation-name:an-hover;animation-duration:0.95s;animation-delay:-0.05s} /* 🦅 */
.an.an-1f43a{animation-name:an-walk;animation-duration:0.56s;animation-delay:-0.19s} /* 🐺 */
.an.an-1f984{animation-name:an-walk;animation-duration:0.56s;animation-delay:-0.2s} /* 🦄 */
.an.an-1f432{animation-name:an-hover;animation-duration:1.08s;animation-delay:-0.83s} /* 🐲 */
.an.an-1f98b{animation-name:an-float;animation-duration:1.58s;animation-delay:-0.04s} /* 🦋 */
.an.an-1f996{animation-name:an-stomp;animation-duration:0.89s;animation-delay:-0.45s} /* 🦖 */
.an.an-1f419{animation-name:an-scuttle;animation-duration:0.33s;animation-delay:-0.11s} /* 🐙 */
.an.an-1f988{animation-name:an-glide;animation-duration:1.23s;animation-delay:-0.37s} /* 🦈 */
.an.an-1f409{animation-name:an-hover;animation-duration:1.04s;animation-delay:-0.34s} /* 🐉 */
.an.an-1f982{animation-name:an-scuttle;animation-duration:0.3s;animation-delay:-0.04s} /* 🦂 */
.an.an-1f991{animation-name:an-glide;animation-duration:1.3s;animation-delay:-1.23s} /* 🦑 */
.an.an-1f47d{animation-name:an-float;animation-duration:1.45s;animation-delay:-0.83s} /* 👽 */
.an.an-1f916{animation-name:an-robot;animation-duration:0.48s;animation-delay:-0.39s} /* 🤖 */
.an.an-1f47b{animation-name:an-float;animation-duration:1.37s;animation-delay:-0.21s} /* 👻 */
.an.an-1f9db{animation-name:an-walk;animation-duration:0.56s;animation-delay:-0.29s} /* 🧛 */
.an.an-1f9de{animation-name:an-float;animation-duration:1.37s;animation-delay:-0.59s} /* 🧞 */
.an.an-1f9d9{animation-name:an-walk;animation-duration:0.59s;animation-delay:-0.2s} /* 🧙 */
.an.an-1f451{animation-name:an-float;animation-duration:1.62s;animation-delay:-0.97s} /* 👑 */
.an.an-1f48e{animation-name:an-float;animation-duration:1.54s;animation-delay:-1.04s} /* 💎 */
.an.an-1f31f{animation-name:an-float;animation-duration:1.67s;animation-delay:-0.12s} /* 🌟 */

// Steal an Egg — JS qismi (Webleb: JS oynasiga qo'ying)
// Three.js va PeerJS kutubxonalari bu fayl ichidan avtomatik yuklanadi, HTML ga <script> yozish shart emas.
(function(){
  function load(src){            // kutubxonani yuklaydi (muvaffaqiyatsiz bo'lsa ham o'yin xabar chiqaradi)
    return new Promise(function(res){
      var el=document.createElement("script");el.src=src;
      el.onload=function(){res(true)};el.onerror=function(){res(false)};
      (document.head||document.body||document.documentElement).appendChild(el);
    });
  }
  function ready(fn){if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",fn);else fn()}

// Hayvonlar harakat profillari (animals.py yaratgan)
  window.ANIMAL_MOTION={
 "🐥": {
  "k": "hop",
  "sp": 0.818,
  "h": 1.537,
  "T": 34,
  "p0": 33,
  "p1": 136,
  "bob": 0.04,
  "hov": 0.0,
  "sq": 0.22,
  "z": 0.8
 },
 "🐢": {
  "k": "stomp",
  "sp": 0.327,
  "h": 0.151,
  "T": 45,
  "p0": 96,
  "p1": 303,
  "bob": 0.05,
  "hov": 0.0,
  "sq": 0.1,
  "z": 0.9
 },
 "🐰": {
  "k": "hop",
  "sp": 0.95,
  "h": 1.703,
  "T": 36,
  "p0": 31,
  "p1": 141,
  "bob": 0.04,
  "hov": 0.0,
  "sq": 0.22,
  "z": 1.0
 },
 "🦊": {
  "k": "walk",
  "sp": 0.616,
  "h": 0.227,
  "T": 28,
  "p0": 59,
  "p1": 258,
  "bob": 0.08,
  "hov": 0.0,
  "sq": 0.06,
  "z": 1.0
 },
 "🐼": {
  "k": "stomp",
  "sp": 0.366,
  "h": 0.163,
  "T": 41,
  "p0": 85,
  "p1": 335,
  "bob": 0.05,
  "hov": 0.0,
  "sq": 0.1,
  "z": 1.2
 },
 "🦁": {
  "k": "walk",
  "sp": 0.662,
  "h": 0.279,
  "T": 29,
  "p0": 60,
  "p1": 216,
  "bob": 0.08,
  "hov": 0.0,
  "sq": 0.06,
  "z": 1.2
 },
 "🐯": {
  "k": "walk",
  "sp": 0.577,
  "h": 0.264,
  "T": 25,
  "p0": 59,
  "p1": 262,
  "bob": 0.08,
  "hov": 0.0,
  "sq": 0.06,
  "z": 1.2
 },
 "🦅": {
  "k": "hover",
  "sp": 0.734,
  "h": 0.318,
  "T": 44,
  "p0": 21,
  "p1": 87,
  "bob": 0.12,
  "hov": 1.374,
  "sq": 0.04,
  "z": 1.2
 },
 "🐺": {
  "k": "walk",
  "sp": 0.585,
  "h": 0.26,
  "T": 26,
  "p0": 54,
  "p1": 240,
  "bob": 0.08,
  "hov": 0.0,
  "sq": 0.06,
  "z": 1.1
 },
 "🦄": {
  "k": "walk",
  "sp": 0.636,
  "h": 0.266,
  "T": 26,
  "p0": 66,
  "p1": 226,
  "bob": 0.08,
  "hov": 0.0,
  "sq": 0.06,
  "z": 1.2
 },
 "🐲": {
  "k": "hover",
  "sp": 0.687,
  "h": 0.351,
  "T": 50,
  "p0": 20,
  "p1": 80,
  "bob": 0.12,
  "hov": 1.307,
  "sq": 0.04,
  "z": 1.3
 },
 "🦋": {
  "k": "float",
  "sp": 0.364,
  "h": 0.171,
  "T": 73,
  "p0": 22,
  "p1": 72,
  "bob": 0.1,
  "hov": 1.029,
  "sq": 0.03,
  "z": 0.8
 },
 "🦖": {
  "k": "stomp",
  "sp": 0.347,
  "h": 0.164,
  "T": 41,
  "p0": 98,
  "p1": 309,
  "bob": 0.05,
  "hov": 0.0,
  "sq": 0.1,
  "z": 1.5
 },
 "🐙": {
  "k": "scuttle",
  "sp": 0.841,
  "h": 0.124,
  "T": 15,
  "p0": 22,
  "p1": 101,
  "bob": 0.05,
  "hov": 0.0,
  "sq": 0.05,
  "z": 1.2
 },
 "🦈": {
  "k": "glide",
  "sp": 0.507,
  "h": 0.221,
  "T": 57,
  "p0": 11,
  "p1": 50,
  "bob": 0.06,
  "hov": 0.597,
  "sq": 0.02,
  "z": 1.3
 },
 "🐉": {
  "k": "hover",
  "sp": 0.765,
  "h": 0.325,
  "T": 48,
  "p0": 19,
  "p1": 80,
  "bob": 0.12,
  "hov": 1.452,
  "sq": 0.04,
  "z": 1.5
 },
 "🦂": {
  "k": "scuttle",
  "sp": 0.87,
  "h": 0.114,
  "T": 14,
  "p0": 20,
  "p1": 110,
  "bob": 0.05,
  "hov": 0.0,
  "sq": 0.05,
  "z": 0.8
 },
 "🦑": {
  "k": "glide",
  "sp": 0.471,
  "h": 0.207,
  "T": 60,
  "p0": 11,
  "p1": 54,
  "bob": 0.06,
  "hov": 0.608,
  "sq": 0.02,
  "z": 1.2
 },
 "👽": {
  "k": "float",
  "sp": 0.439,
  "h": 0.22,
  "T": 67,
  "p0": 22,
  "p1": 72,
  "bob": 0.1,
  "hov": 1.045,
  "sq": 0.03,
  "z": 1.1
 },
 "🤖": {
  "k": "robot",
  "sp": 0.534,
  "h": 0.102,
  "T": 22,
  "p0": 67,
  "p1": 222,
  "bob": 0.02,
  "hov": 0.0,
  "sq": 0.0,
  "z": 1.1
 },
 "👻": {
  "k": "float",
  "sp": 0.433,
  "h": 0.207,
  "T": 63,
  "p0": 19,
  "p1": 80,
  "bob": 0.1,
  "hov": 0.903,
  "sq": 0.03,
  "z": 1.2
 },
 "🧛": {
  "k": "walk",
  "sp": 0.636,
  "h": 0.25,
  "T": 26,
  "p0": 53,
  "p1": 211,
  "bob": 0.08,
  "hov": 0.0,
  "sq": 0.06,
  "z": 1.1
 },
 "🧞": {
  "k": "float",
  "sp": 0.408,
  "h": 0.23,
  "T": 63,
  "p0": 21,
  "p1": 75,
  "bob": 0.1,
  "hov": 1.029,
  "sq": 0.03,
  "z": 1.2
 },
 "🧙": {
  "k": "walk",
  "sp": 0.636,
  "h": 0.283,
  "T": 27,
  "p0": 62,
  "p1": 220,
  "bob": 0.08,
  "hov": 0.0,
  "sq": 0.06,
  "z": 1.1
 },
 "👑": {
  "k": "float",
  "sp": 0.382,
  "h": 0.2,
  "T": 75,
  "p0": 22,
  "p1": 80,
  "bob": 0.1,
  "hov": 1.053,
  "sq": 0.03,
  "z": 0.9
 },
 "💎": {
  "k": "float",
  "sp": 0.365,
  "h": 0.183,
  "T": 71,
  "p0": 22,
  "p1": 87,
  "bob": 0.1,
  "hov": 1.001,
  "sq": 0.03,
  "z": 0.9
 },
 "🌟": {
  "k": "float",
  "sp": 0.36,
  "h": 0.204,
  "T": 77,
  "p0": 21,
  "p1": 88,
  "bob": 0.1,
  "hov": 0.953,
  "sq": 0.03,
  "z": 0.9
 }
};

function resize(){          // o'yin butun ekranni qoplaydi
  const cw=innerWidth,ch=innerHeight;
  // 4K: tasvir kamida ~3840 piksel kenglikda chiziladi (qurilma qo'llasa)
  const dpr=q4k?Math.min(3,Math.max(window.devicePixelRatio||1,3840/Math.max(cw,1))):Math.min(window.devicePixelRatio||1,2);
  if(R3)R3.setPixelRatio(dpr);
  cv.width=Math.round(cw*dpr);cv.height=Math.round(ch*dpr);
  sc=cv.height/540;W=cv.width/sc;              // HUD mantiqiy balandligi 540, kengligi ekranga qarab
  cv.style.width=cw+"px";cv.style.height=ch+"px";
  if(R3){R3.setSize(cw,ch);camera.aspect=cw/ch;camera.updateProjectionMatrix()}
  document.body.classList.toggle("t",TOUCH);
}
addEventListener("resize",resize);
addEventListener("orientationchange",()=>setTimeout(resize,200));
addEventListener("contextmenu",e=>e.preventDefault());
resize();

// Joystik va E tugmasi
const keys={},joy={x:0,y:0},jb=document.getElementById("joy"),kn=document.getElementById("knob");
let jid=null;
function joyMove(e){
  const r=jb.getBoundingClientRect(),R=r.width/2;
  let x=(e.clientX-r.left-R)/(R-10),y=(e.clientY-r.top-R)/(R-10);
  const m=Math.hypot(x,y);if(m>1){x/=m;y/=m}
  joy.x=Math.abs(x)<.12?0:x;joy.y=Math.abs(y)<.12?0:y;
  kn.style.transform="translate("+x*43+"px,"+y*43+"px)";
}
function joyEnd(e){if(e.pointerId!==jid)return;jid=null;joy.x=joy.y=0;kn.style.transform=""}
jb.addEventListener("pointerdown",e=>{jid=e.pointerId;jb.setPointerCapture(e.pointerId);joyMove(e);
  try{screen.orientation.lock("portrait").catch(()=>{})}catch(_){}});
jb.addEventListener("pointermove",e=>{if(e.pointerId===jid)joyMove(e)});
jb.addEventListener("pointerup",joyEnd);jb.addEventListener("pointercancel",joyEnd);
const eb=document.getElementById("eBtn");
eb.addEventListener("pointerdown",e=>{eb.setPointerCapture(e.pointerId);keys.e=true});
const jbtn=document.getElementById("jBtn");
jbtn.addEventListener("pointerdown",e=>{jbtn.setPointerCapture(e.pointerId);keys.jump=true});
["pointerup","pointercancel"].forEach(t=>jbtn.addEventListener(t,()=>keys.jump=false));
["pointerup","pointercancel"].forEach(t=>eb.addEventListener(t,()=>keys.e=false));
// Kamera: o'ng sichqoncha tugmasini bosib turganda kursor ekranda joyida qotadi (Pointer Lock); telefonda barmoq bilan surish
let lookId=null,lx0=0,ly0=0,dn=null,rDown=false,plFail=false,rT=0,rMoved=0;
function lookBy(dx,dy){rMoved+=Math.abs(dx)+Math.abs(dy);yaw+=dx*0.006;pitch=Math.max(0.15,Math.min(1.5,pitch+dy*0.006))}   // pastga tortsangiz kamera balandlashadi
// O'ng tugma bosilganda sichqoncha ekranda qimirlamaydi: 1) Pointer Lock; 2) ishlamasa kursor yashirinadi va bosilgan joyda belgi turadi
const pin=document.getElementById("pin");
function lookStart(e){
  rDown=true;plFail=false;rT=performance.now();rMoved=0;document.body.classList.add("look");
  pin.style.left=e.clientX+"px";pin.style.top=e.clientY+"px";
  try{const r=cv.requestPointerLock();if(r&&r.catch)r.catch(()=>{plFail=true;if(rDown)pin.style.display="block"})}catch(_){plFail=true;pin.style.display="block"}
  setTimeout(()=>{if(rDown&&document.pointerLockElement!==cv){plFail=true;pin.style.display="block";say("Brauzer sichqonchani qotirmadi — o'yinni alohida brauzer oynasida oching")}},120);
}
function lookEnd(){
  const quick=rDown&&performance.now()-rT<250&&rMoved<12;     // tez bosish = urish
  rDown=false;plFail=false;pin.style.display="none";document.body.classList.remove("look");
  if(document.pointerLockElement===cv)document.exitPointerLock();
  if(quick)attack();
}
cv.addEventListener("mousedown",e=>{if(e.button===2)lookStart(e)});
addEventListener("mouseup",e=>{if(e.button===2)lookEnd()});
addEventListener("blur",()=>{if(rDown)lookEnd()});
document.addEventListener("pointerlockerror",()=>{plFail=true;if(rDown)pin.style.display="block"});
document.addEventListener("pointerlockchange",()=>{if(!rDown&&document.pointerLockElement===cv)document.exitPointerLock()});
document.addEventListener("mousemove",e=>{if(document.pointerLockElement===cv)lookBy(e.movementX,e.movementY)});
cv.addEventListener("pointerdown",e=>{
  if(e.pointerType==="mouse"&&e.button!==0)return;
  dn={x:e.clientX,y:e.clientY,t:performance.now(),moved:false};
  if(e.pointerType==="touch"){lookId=e.pointerId;lx0=e.clientX;ly0=e.clientY;cv.setPointerCapture(e.pointerId)}
});
cv.addEventListener("pointermove",e=>{
  if(dn&&Math.hypot(e.clientX-dn.x,e.clientY-dn.y)>10)dn.moved=true;
  if(e.pointerId===lookId){lookBy(e.clientX-lx0,e.clientY-ly0);lx0=e.clientX;ly0=e.clientY}
  else if(plFail&&rDown&&e.pointerType==="mouse")lookBy(e.movementX||0,e.movementY||0);   // Pointer Lock ishlamasa zaxira usul
});
["pointerup","pointercancel"].forEach(t=>cv.addEventListener(t,e=>{
  if(e.pointerId===lookId)lookId=null;
  if(t==="pointerup"&&dn&&!dn.moved&&performance.now()-dn.t<500&&!(e.pointerType==="mouse"&&e.button!==0))canvasClick(e.clientX,e.clientY);   // bosish = ekish
  dn=null;
}));
addEventListener("keydown",e=>{keys[e.key.toLowerCase()]=true;
  if(["arrowup","arrowdown","arrowleft","arrowright"," "].includes(e.key.toLowerCase()))e.preventDefault()});
addEventListener("keyup",e=>keys[e.key.toLowerCase()]=false);

// ---------- Raqamlar ----------
const SUF=["","K","M","B","T","Qa"];
function fN(n){if(n<1000)return ""+(+n.toFixed(n<10?1:0));let i=0;while(n>=1000&&i<5){n/=1000;i++}return (+n.toFixed(n<10?2:n<100?1:0))+SUF[i]}
const fT=s=>{s=Math.max(0,Math.ceil(s));const h=Math.floor(s/3600),m=Math.floor(s%3600/60),c=s%60;
  return [h&&h+"soat",m&&m+"daq",(c||!(h||m))&&c+"s"].filter(Boolean).join(" ")};
const fS=s=>s>=3600?(s/3600).toFixed(1)+"h":s>=60?Math.ceil(s/60)+"m":Math.ceil(s)+"s";

// ---------- Tuxum turlari (yaxshilanish tartibida) ----------
// b = kichik tuxumning soniyasiga puli, h = ochilish vaqti (soniya), cyc = paydo bo'lish davri
const TIER=[
 {n:"Uncommon",c:"#8fd18f",b:30,h:10,a:["🐥","🐢","🐰"]},
 {n:"Rare",c:"#4da3ff",b:250,h:20,a:["🦊","🐼","🦁"]},
 {n:"Legendary",c:"#ffb347",b:2000,h:40,a:["🐯","🦅","🐺"]},
 {n:"Mifik",c:"#ff5ec4",b:12000,h:80,a:["🦄","🐲","🦋"]},
 {n:"Secret",c:"#555",b:40000,h:150,a:["🦖","🐙","🦈"]},
 {n:"Entenermal",c:"#00e5c3",b:150000,h:300,cyc:300,a:["🐉","🦂","🦑"]},
 {n:"Og",c:"#ff8c00",b:600000,h:600,cyc:900,a:["👽","🤖","👻"]},
 {n:"Div",c:"#b388ff",b:3e6,h:1200,cyc:3600,a:["🧛","🧞","🧙"]},
 {n:"Admin",c:"rainbow",b:25e6,h:7200,cyc:10800,a:["👑","💎","🌟"]}];
// Katta tuxum: ko'proq pul, lekin ko'targanda sekinroq (sl)
const SIZE=[{n:"Kichik",m:1,s:.9,sl:.9},{n:"O'rta",m:2.5,s:1.25,sl:.8},{n:"Katta",m:10,s:1.65,sl:.65}];
const eggInc=(t,sz,k)=>TIER[t].b*SIZE[sz].m*Math.pow(1.75,k-1);   // zona raqami oshgani sari +75%
// ---------- Hayvonlar harakati ----------
const KIND={
  hop:{sp:.9,h:1.6,T:34,p0:30,p1:150,bob:.04,hov:0,sq:.22},walk:{sp:.6,h:.25,T:26,p0:60,p1:240,bob:.08,hov:0,sq:.06},
  stomp:{sp:.35,h:.15,T:44,p0:90,p1:300,bob:.05,hov:0,sq:.1},hover:{sp:.7,h:.3,T:50,p0:20,p1:90,bob:.12,hov:1.4,sq:.04},
  float:{sp:.4,h:.2,T:70,p0:20,p1:80,bob:.1,hov:1,sq:.03},scuttle:{sp:.85,h:.12,T:14,p0:20,p1:100,bob:.05,hov:0,sq:.05},
  glide:{sp:.5,h:.2,T:60,p0:10,p1:50,bob:.06,hov:.6,sq:.02},robot:{sp:.5,h:.1,T:22,p0:60,p1:200,bob:.02,hov:0,sq:0}};
const SPK={"🐥":"hop","🐰":"hop","🐢":"stomp","🐼":"stomp","🦖":"stomp","🦅":"hover","🐲":"hover","🐉":"hover","🦋":"float","👻":"float","👽":"float","🧞":"float","👑":"float","💎":"float","🌟":"float","🐙":"scuttle","🦂":"scuttle","🦈":"glide","🦑":"glide","🤖":"robot"};
const motionOf=e=>(window.ANIMAL_MOTION&&window.ANIMAL_MOTION[e])||Object.assign({k:SPK[e]||"walk",z:1},KIND[SPK[e]||"walk"]);
const anCls=e=>"an-"+[...e][0].codePointAt(0).toString(16);       // CSS sinfi (animals.css bilan mos)
function animVis(s,m){        // hayvonning ko'rinishi: balandlik va cho'zilish/siqilish
  const mv=s.st==="move"&&s.sp>0.05;let hy=0,sy=1;
  if(m.k==="hop"){const u=Math.abs(Math.sin(s.ph/2));hy=mv?m.h*u:0;sy=mv?1+m.sq*(u-0.5):1+m.bob*Math.sin(s.ph*2)}
  else if(m.hov>0){hy=m.hov+m.h*Math.sin(s.ph);sy=1+m.bob*0.5*Math.sin(s.ph*2)}
  else{hy=mv?m.h*Math.abs(Math.sin(s.ph)):0;sy=1+m.bob*Math.sin(s.ph*(mv?2:1))}
  const born=Math.min(1,0.25+(s.age||0)/18);        // ochilganda kattalashib chiqadi
  return{hy,sx:born/sy,sy:born*sy};
}
const tCol=i=>TIER[i].c==="rainbow"?"hsl("+Math.floor(performance.now()/6%360)+",90%,55%)":TIER[i].c;
const swStyle=c=>c==="rainbow"?"background:linear-gradient(135deg,red,orange,yellow,green,cyan,blue,violet)":"background:"+c;

// ---------- Zonalar: 19 ta, qo'riqchi tezligi har zonada 8 barobar ----------
const zones=[];
for(let k=1;k<=ZN;k++){
  const x=ZX[k-1];
  zones.push({k,x,y:0,w:ZW,h:FH,name:THEMES[k-1][0],
    gs:Math.min(77e15,15*Math.pow(8,k-1)),   // qo'riqchi tezligi (+50%): 15, 120, 960 ... 77Qa
    px:2.3+0.12*(k-1),                       // haqiqiy tezlik (piksel/kadr)
    c:Math.floor((k-1)*8/(ZN-1)),gx:x+340,gy:FH/2,g:{x:x+340,y:FH/2}});
}
// Tuxum turi: oddiy joylarda Uncommon..Secret aralash, maxsus joyda nodir tuxum (zona raqamiga qarab)
function rng(a){return()=>{a|=0;a=a+0x6D2B79F5|0;let t=Math.imul(a^a>>>15,1|a);t=t+Math.imul(t^t>>>7,61|t)^t;return((t^t>>>14)>>>0)/4294967296}}
function roll(z,sp){    // ikki o'yinchida bir xil natija beradi (id va n bo'yicha)
  const R=rng(sp.id*7919+sp.n*104729+12345);
  if(sp.special)sp.tier=5+Math.floor((z.k-1)*3/(ZN-1));
  else{const b=Math.min(z.c,4),r=R();sp.tier=Math.max(0,Math.min(4,b+(r<.3?-1:r<.8?0:1)))}
  const q=R();sp.size=q<.6?0:q<.9?1:2;
}
const spots=[];
for(const z of zones){      // har zonada 5 ta tuxum: zona burchagida doira bo'lib turadi (bittasi nodir tuxum)
  const cx=z.x+110,cy=z.k%2?150:FH-150;
  for(let i=0;i<5;i++){
    const a=-Math.PI/2+i*2*Math.PI/5,sp={id:spots.length,n:0,z,ex:cx+Math.cos(a)*55,ey:cy+Math.sin(a)*55,egg:i>0,rs:0,pop:i>0?1:0,special:i===0};
    roll(z,sp);if(i===0)sp.rs=TIER[sp.tier].cyc*((z.k*.37)%1)+15;
    spots.push(sp);
  }
}

// ---------- Holat ----------
let coins=0,spd=0,padLv=1,homeLv=0,slots=[],holdT=0,onPad=false,msg="",msgT=0,cam=0,P;
const sec=dt=>dt/60;
// Kun 5 daqiqa, tun 15 soniya; tunda oq devor yo'lni to'sadi
const DAY=300,NIGHT=15,CYC=DAY+NIGHT,WX=300;
// 4 ta alohida qo'ra (yo'lak): har bir o'yinchi/bot uchun bittadan
const LH=FH/4;let myLane=1;        // yo'lak balandligi 270; qo'ra balandligi 220 (oralarida 50 bo'sh joy)
const pads=[0,1,2,3].map(L=>({x:BASE+25,y:L*LH+LH/2-20,w:70,h:40}));   // har kimning maydoni o'z qo'rasi qarshisida
const myPad=()=>pads[myLane],MAGNET=30;
let pullMsg=false,padCool=false,lockMsg=false,overPad=false;
const hitFx=[];
function padLvOf(L){
  if(L===myLane)return padLv;
  for(const b of bots)if(b.lane===L)return b.padLv||1;
  for(const k in remotes)if(remotes[k].lane===L)return remotes[k].padLv||1;
  return 1;
}
const slotXY=(i,L)=>[34+(i%3)*42,L*LH+60+Math.floor(i/3)*50];     // uyadagi joy koordinatasi
const penCap=lv=>Math.min(12,3+lv);
function penSpot(arr,L){      // botlar uchun: qo'ra ichidagi tasodifiy bo'sh joy
  const x0=24,x1=BASE-18,y0=L*LH+40,y1=L*LH+230;
  for(let t=0;t<30;t++){const x=x0+Math.random()*(x1-x0),y=y0+Math.random()*(y1-y0);if(!arr.some(s=>!s.em&&Math.hypot((s.px||0)-x,(s.py||0)-y)<16))return[x,y]}
  return[x0+Math.random()*(x1-x0),y0+Math.random()*(y1-y0)];
}                                   // qo'ra darajasi -> joylar soni
let gt=0;
const isNight=()=>gt%CYC>=DAY,nightLeft=()=>Math.ceil(CYC-gt%CYC);
function darkF(){const p=gt%CYC;return p<295?0:p<300?(p-295)/5:p<312?1:(CYC-p)/3}
function wallClamp(o,ox){        // devor ichiga kirib bo'lmaydi (har ikki tomondan, tez yugurganda ham)
  if(!isNight())return;
  const xl=WX-15-14,xr=WX+15+14;
  if(ox<=xl&&o.x>xl)o.x=xl;
  else if(ox>=xr&&o.x<xr)o.x=xr;
  else if(o.x>xl&&o.x<xr)o.x=ox<=WX?xl:xr;
}
const maxSpd=()=>capAt(padLv),maxSlots=()=>penCap(homeLv+1),mult=()=>1+0.25*homeLv;
const padCost=()=>Math.round(300*Math.pow(5,padLv-1)),homeCost=()=>2000*Math.pow(3.2,homeLv);
// Tezlik raqami to'g'ridan-to'g'ri qo'riqchi raqami bilan solishtiriladi: kattasi yutadi
const padRate=L=>Math.pow(8,L-1);                          // 1, 8, 64, 512 ... soniyasiga
// Maksimal tezlik to'rtburchak darajasiga bog'liq: Lv1 = 30 ... Lv15 = 100Qa
const capAt=L=>L>=15?1e17:30*Math.pow(1e17/30,(L-1)/14);
const totSpd=()=>Math.min(maxSpd(),spd*skinMul());         // skin bonusi bilan umumiy tezlik
const effSpd=()=>totSpd()*(P.item?SIZE[P.item.size].sl:1); // tuxum og'irligi tezlikni kamaytiradi
const gsNow=z=>z.gs+((P.item&&P.item.z===z)?Math.floor(P.carryT||0):0);   // tuxum bilan qochgan har soniya uchun qo'riqchiga +1 tezlik
const numPx=u=>Math.min(80,2*Math.pow(1+u,0.09));          // raqam -> haqiqiy tezlik (piksel/kadr): 1B=13, 1T=24, 1Qa=45
const speed=()=>numPx(effSpd());
function say(t){msg=t;msgT=140}
function spawnPlayer(){P={x:70,y:myLane*LH+LH/2,r:14,item:null,h:0,vy:0,face:0,ph:0,mv:false,bat:true,batT:0,swing:0,cd:0}}   // doim qo'lda tayoq bor
spawnPlayer();
const income=()=>slots.reduce((a,s)=>a+(s.em?s.inc:0),0)*mult();   // pul faqat tuxum ochilgandan keyin

// ---------- Oynalar ----------
const $=id=>document.getElementById(id);
$("upBtn").onclick=()=>{const p=$("panel");p.style.display=p.style.display==="flex"?"none":"flex"};
$("upPad").onclick=()=>{if(padLv<15&&coins>=padCost()){coins-=padCost();padLv++}};
$("upHome").onclick=()=>{if(homeLv<14&&coins>=homeCost()){coins-=homeCost();homeLv++}};
function renderShop(){
  $("skins").innerHTML=SKINS.map((k,i)=>{
    const btn=skin===i?"<button disabled>✔ Tanlangan</button>":owned.has(i)?`<button data-eq="${i}" class="g">Tanlash</button>`:`<button data-buy="${i}" ${coins<k.p?"disabled":""}>$${fN(k.p)}</button>`;
    return `<div class="sk"><div class="sw" style="${swStyle(k.c)}"></div><b>${k.n}</b><small>${k.r}</small><small>${k.b?"+"+k.b+"% tezlik":"bonus yo'q"}</small>${btn}</div>`}).join("");
}
$("shopBtn").onclick=()=>{$("shop").style.display="flex";renderShop()};
$("shopClose").onclick=()=>$("shop").style.display="none";
$("skins").onclick=e=>{const b=e.target.closest("button");if(!b)return;
  if(b.dataset.eq!==undefined)skin=+b.dataset.eq;
  else if(b.dataset.buy!==undefined){const i=+b.dataset.buy;if(coins>=SKINS[i].p){coins-=SKINS[i].p;owned.add(i);skin=i}}
  renderShop()};
function renderList(){
  let h="";
  for(let i=5;i<9;i++){
    const T=TIER[i],all=spots.filter(s=>s.special&&s.tier===i),zs=all.map(s=>s.z.k);
    const here=all.filter(s=>s.egg).map(s=>s.z.k);
    const nxt=all.filter(s=>!s.egg).reduce((a,s)=>Math.min(a,s.rs),1e9);
    h+=`<div class="li"><div class="sw" style="${swStyle(T.c)}"></div><div><b>${T.n}</b><br>
    <small>Zona ${zs.length>1?zs[0]+"–"+zs[zs.length-1]:zs[0]} · har ${fT(T.cyc)}da paydo bo'ladi · ochilish ${fT(T.h)}<br>
    Kichik $${fN(eggInc(i,0,zs[0]))}/s · O'rta $${fN(eggInc(i,1,zs[0]))}/s · Katta $${fN(eggInc(i,2,zs[0]))}/s (zona ${zs[0]}; har keyingi zonada +75%)</small><br>
    ${here.length?"✅ Hozir bor: zona "+here.join(", "):"⏳ Keyingisi: "+fT(nxt)+" dan keyin"}</div></div>`;
  }
  $("lst").innerHTML=h;
}
$("listBtn").onclick=()=>{$("list").style.display="flex";renderList()};
$("listClose").onclick=()=>$("list").style.display="none";
setInterval(()=>{if($("list").style.display==="flex")renderList()},500);

let last=performance.now();
function loop(now){
  const raw=(now-last)/16.67,dt=Math.min(2,raw);last=now;
  slowT=raw>1.7?slowT+raw:Math.max(0,slowT-0.5);if(slowT>150&&q4k){slowT=0;setQ(false)}   // sekin ishlasa 4K o'chadi
  update(dt);draw();setUI();requestAnimationFrame(loop);
}

// Iz: faqat yurganda, yurgan burchagingiz bo'yicha ortingizdan ergashadi; 1 soniyadan keyin orqadan o'chadi
  if(Math.hypot(P.x-lx,P.y-ly)>80){lx=P.x;ly=P.y}
  const seg=Math.hypot(P.x-lx,P.y-ly);
  if(seg>=CUBE){
    if(skin>0)trail.push({x:(lx+P.x)/2,y:(ly+P.y)/2,a:Math.atan2(P.y-ly,P.x-lx),len:seg,t:0,c:skinCol(skin),hy:P.h+(overPad?0.7:0)});
    lx=P.x;ly=P.y;
  }
  for(const d of trail)d.t+=sec(dt);
  while(trail.length&&trail[0].t>1)trail.shift();

updateBots(dt);
  // Tezlik to'rtburchagi: soniyasiga 1 tezlik
  const pd=myPad(),pcx=pd.x+pd.w/2,pcy=pd.y+pd.h/2,rx=pd.x+12;     // rx = tasmaning orqa qismi
  overPad=P.x>pd.x&&P.x<pd.x+pd.w&&P.y>pd.y&&P.y<pd.y+pd.h;
  const edgeD=Math.max(Math.abs(P.x-pcx)-pd.w/2,Math.abs(P.y-pcy)-pd.h/2);
  if(edgeD>MAGNET+25)padCool=false;                                  // uzoqlashib qaytsangiz yana chiqa olasiz
  // Magnit: chetidan ~0.5cm masofada tinch tursangiz o'ziga tortib, orqa qismiga qo'yadi
  if(!P.lock&&!padCool&&!P.item&&P.h<=0.05&&edgeD<=MAGNET&&!P.mv){
    const d=Math.hypot(rx-P.x,pcy-P.y);
    if(d<=4)P.lock=true;
    else{const st=Math.min(d,4*dt);P.x+=(rx-P.x)/d*st;P.y+=(pcy-P.y)/d*st;if(!pullMsg){say("🧲 Treadmill sizni tortdi");pullMsg=true}}
  }
  if(edgeD>MAGNET)pullMsg=false;
  if(P.lock){            // orqada, oldinga qarab yugurib turadi
    P.x=rx;P.y=pcy;P.face=0;P.ph+=0.22*dt*(1+padLv*0.06);
    if(!lockMsg){say("🏃 Tezlik oshmoqda — tushish uchun Probel");lockMsg=true}
  }else lockMsg=false;
  onPad=!!P.lock;P.run=onPad;
  if(onPad&&totSpd()<maxSpd())spd=Math.min(maxSpd(),spd+padRate(padLv)*sec(dt));

// Tuxum olish: E ni 3 soniya bosib turish
  let near=null;
  if(!P.item)for(const e of spots)if(e.egg&&Math.hypot(P.x-e.ex,P.y-e.ey)<P.r+34)near=e;
  if(keys.e&&near){
    holdT+=sec(dt);
    if(holdT>=3){
      holdT=0;
      if(inv.length>=INV_MAX)say("Inventar to'la! Avval joy bo'shating");
      else{
        const hot={kind:"egg",tier:near.tier,size:near.size,inc:eggInc(near.tier,near.size,near.z.k),hatch:TIER[near.tier].h,time:0,hot:true};
        inv.push(hot);renderInv();
        P.item={tier:near.tier,size:near.size,sp:near,z:near.z,inv:hot};
        near.egg=false;near.rs=near.dropped?1e12:(near.special?TIER[near.tier].cyc:15);if(!near.dropped)netAll({t:"take",i:near.id});
        say("🎒 "+TIER[near.tier].n+" ("+SIZE[near.size].n+") inventarga tushdi! Qo'riqchi quvmoqda — uyga qoching!");
      }
    }
  }else holdT=0;
  // Tuxumlar qayta paydo bo'ladi
  for(const e of spots){
    if(e.dropped&&e.egg){e.ttl-=sec(dt);if(e.ttl<=0){e.egg=false;e.rs=1e12}}      // tashlab ketilgan tuxum 90 soniyadan keyin yo'qoladi
    if(e.pop>0)e.pop-=sec(dt)*2;
    if(!e.egg){e.rs-=sec(dt);if(e.rs<=0){e.n++;roll(e.z,e);e.egg=true;e.pop=1;
      if(e.special&&Math.abs(P.x-e.ex)<900)say("✨ "+TIER[e.tier].n+" tuxum paydo bo'ldi! Zona "+e.z.k)}}
  }

// Uyga olib kelingan tuxum inventarga tushadi
  if(P.item&&P.x<BASE){
    const it=P.item;if(it.inv)it.inv.hot=false;
    P.item=null;renderInv();say("🏠 "+TIER[it.tier].n+" xavfsiz! Inventardan olib, qo'rangizga bosib ekib qo'ying");
  }
  for(const s of slots){
    s.time+=sec(dt);
    if(!s.em&&s.time>=s.hatch){s.em=TIER[s.tier].a[Math.floor(Math.random()*3)];say(s.em+" "+TIER[s.tier].n+" ochildi!")}
  }
  // Ochilgan hayvonlar o'z qo'rasi ichida aylanib yuradi
  simPen(slots,myLane,dt);
  for(const k in remotes)simPen(remotes[k].slots,remotes[k].lane,dt);
  coins+=income()*sec(dt);

// Qo'riqchilar: faqat tuxum egasi uygacha quvadi
  for(const z of zones){
    const q=z.g,own=P.item&&P.item.z===z,gsn=gsNow(z);
    const tx=own?P.x:z.gx,ty=own?P.y:z.gy,d=Math.hypot(tx-q.x,ty-q.y);
    let gp=numPx(gsn);
    // Raqami kattasi yutadi: qo'riqchi tezligi >= sizniki bo'lsa qochib bo'lmaydi
    if(own){const pp=speed();gp=gsn>=effSpd()?Math.max(gp,pp*3):Math.min(gp,pp*0.55)}
    if(d>2){const sp=Math.min(d,gp*dt);q.x+=(tx-q.x)/d*sp;q.y+=(ty-q.y)/d*sp}
    q.x=Math.max(BASE+34,Math.min(WORLD-16,q.x));if(isNight()&&q.x<WX+31)q.x=WX+31;q.y=Math.max(16,Math.min(FH-16,q.y));
    if(own&&Math.hypot(P.x-q.x,P.y-q.y)<P.r+16){
      const it=P.item,k0=it.z.k,crossed=k0>=2&&P.x<WZC[k0-1]-60;     // oq zonadan o'tib bo'ldimi?
      if(it.inv){const ix=inv.indexOf(it.inv);if(ix>=0)inv.splice(ix,1);if(P.hand===it.inv)P.hand=null;renderInv()}
      if(crossed){dropEgg(it,P.x,P.y);say("🚨 Tutildingiz! Tuxum oq zonadan keyin qoldi — olib kelib oling")}      // o'tib bo'lgan bo'lsa tuxum o'sha joyda qoladi
      else{it.sp.egg=true;it.sp.pop=1;if(!it.sp.dropped)netAll({t:"ret",i:it.sp.id});say("🚨 Qo'riqchi tutdi! Tuxum olib ketildi")}   // o'tolmasa tuxum olib ketiladi
      P.item=null;spawnPlayer();
    }
  }
  if(msgT>0)msgT-=dt;
  cam=Math.max(0,Math.min(WORLD-W,P.x-W/2));
}

// ================= 3D chizish (Three.js) =================
const U=0.1,X3=x=>x*U,Z3=y=>(y-FH/2)*U;      // 1 piksel = 0.1 birlik
const lam=c=>new THREE.MeshLambertMaterial({color:c});
let hemi,sunL,skyM,skyDay,skyNight,nightWall=[],clouds=[],outerG;
let penFence=[0,1,2,3].map(()=>({r:[],p:[]})),penKey=[-1,-1,-1,-1],padM=[],treadKey=[-1,-1,-1,-1];
let eggGeoG,eggM=[],guardM=[],trailM=[],slotE=[],slotS=[],slotB=[],slotSh=[],pl,carryM,emoMat={};
function box(w,h,d,c,x,y,z){const m=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),lam(c));m.position.set(x,y,z);scene.add(m);return m}
function flat(w,d,c,x,y,z,op){
  const m=new THREE.Mesh(new THREE.PlaneGeometry(w,d),new THREE.MeshBasicMaterial({color:c,transparent:!!op,opacity:op||1}));
  m.rotation.x=-Math.PI/2;m.position.set(x,y,z);scene.add(m);return m;
}
function emo(ch){   // emoji -> sprite materiali
  if(!emoMat[ch]){
    const c=document.createElement("canvas");c.width=c.height=64;const x=c.getContext("2d");
    x.font="48px sans-serif";x.textAlign="center";x.textBaseline="middle";x.fillText(ch,32,36);
    emoMat[ch]=new THREE.SpriteMaterial({map:new THREE.CanvasTexture(c),transparent:true});
  }
  return emoMat[ch];
}
// Roblox uslubidagi blokli avatar: bosh, tana, ikki qo'l, ikki oyoq
let limbs={},torsoM,shadow,batM;
function buildAvatar(){
  const A=new THREE.Group(),L={};let T;
  const part=(w,h,d,c,x,y,z,par)=>{const m=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),lam(c));m.position.set(x,y,z);m.castShadow=true;(par||A).add(m);return m};
  const pivot=(x,y,z)=>{const q=new THREE.Group();q.position.set(x,y,z);A.add(q);return q};
  T=part(0.8,2.6,2.4,0xffffff,0,3.7,0);   // bel -> yelka, qalinligi yelkaning 1/3 qismi
  part(1.3,1.6,1.5,0xf5cd30,0,5.9,0);                                   // bosh
  part(0.15,0.3,0.3,0x111111,0.67,6.05,-0.35);part(0.15,0.3,0.3,0x111111,0.67,6.05,0.35);  // ko'zlar
  part(0.15,0.12,0.7,0x111111,0.67,5.55,0);                             // tabassum
  L.aL=pivot(0,4.9,-1.65);part(0.6,2.4,0.9,0xf5cd30,0,-1.2,0,L.aL);
  L.aR=pivot(0,4.9,1.65);part(0.6,2.4,0.9,0xf5cd30,0,-1.2,0,L.aR);
  L.lL=pivot(0,2.4,-0.6);part(0.8,2.4,1.1,0x2f5fbf,0,-1.2,0,L.lL);
  L.lR=pivot(0,2.4,0.6);part(0.8,2.4,1.1,0x2f5fbf,0,-1.2,0,L.lR);
  A.userData.L=L;A.userData.T=T;A.scale.set(.55,.55,.55);scene.add(A);return A;
}
function makeBat(){     // tayoq: o'ng qo'l kaftidan oldinga-yuqoriga qaragan
  const m=new THREE.Mesh(new THREE.BoxGeometry(0.35,3.2,0.35),lam(0x9a6a3a));
  m.position.set(1.08,-1.35,0);m.rotation.z=-0.8;m.castShadow=true;return m;
}
// Qo'riqchi: bo'ri ko'rinishidagi blokli hayvon (tana, bosh, tumshuq, quloq, dum, 4 oyoq)
function buildGuard(){
  const G=new THREE.Group(),ud=G.userData;ud.legs=[];
  const add=(w,h,d,c,x,y,z,par)=>{const m=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),lam(c));m.position.set(x,y,z);(par||G).add(m);return m};
  ud.body=add(3.4,1.7,1.7,0x7a7f8a,0,2.1,0);
  add(1.5,1.5,1.5,0x6b707b,2.1,2.8,0);                 // bosh
  add(1.1,0.65,0.8,0x555a64,3.1,2.55,0);               // tumshuq
  add(0.2,0.25,0.3,0x111111,3.7,2.7,0);                // burun
  [-0.5,0.5].forEach(z=>{add(0.4,0.7,0.35,0x4a4e57,1.9,3.85,z);add(0.15,0.25,0.25,0xff2d2d,2.88,3.0,z*0.9)});  // quloq, ko'z
  const tail=add(1.5,0.4,0.4,0x7a7f8a,-2.4,2.7,0);tail.rotation.z=0.6;
  [[1.2,-0.6],[1.2,0.6],[-1.2,-0.6],[-1.2,0.6]].forEach(([x,z])=>{
    const q=new THREE.Group();q.position.set(x,1.25,z);G.add(q);add(0.55,1.25,0.55,0x555a64,0,-0.62,0,q);ud.legs.push(q);
  });
  return G;
}
// Treadmill (yugurish yo'lakchasi): tezlik maydoni. Kuchaytirsangiz rangi, kattaligi va tasma tezligi yaxshilanadi
function buildTread(L){
  const pd=pads[L],G=new THREE.Group(),ud=G.userData;
  G.position.set(X3(pd.x+pd.w/2),0,Z3(pd.y+pd.h/2));
  const add=(w,h,d,c,x,y,z)=>{const m=new THREE.Mesh(new THREE.BoxGeometry(w,h,d),lam(c));m.position.set(x,y,z);G.add(m);return m};
  const bc=document.createElement("canvas");bc.width=64;bc.height=8;const bx=bc.getContext("2d");
  bx.fillStyle="#2b2b2b";bx.fillRect(0,0,64,8);bx.fillStyle="#5a5a5a";for(let i=0;i<4;i++)bx.fillRect(i*16+2,0,6,8);
  const tex=new THREE.CanvasTexture(bc);tex.wrapS=tex.wrapT=THREE.RepeatWrapping;tex.repeat.set(4,1);ud.tex=tex;
  ud.base=add(7,0.5,4,0x555555,0,0.25,0);                                   // rama
  ud.belt=new THREE.Mesh(new THREE.BoxGeometry(6.2,0.2,3),new THREE.MeshLambertMaterial({map:tex}));   // harakatlanuvchi tasma
  ud.belt.position.set(-0.1,0.6,0);G.add(ud.belt);
  ud.rails=[add(6.6,0.3,0.3,0xcccccc,-0.1,0.75,1.85),add(6.6,0.3,0.3,0xcccccc,-0.1,0.75,-1.85)];
  ud.posts=[add(0.3,3,0.3,0xcccccc,3.0,2.1,1.7),add(0.3,3,0.3,0xcccccc,3.0,2.1,-1.7)];
  ud.cons=add(0.5,0.9,3.6,0x333333,3.0,3.7,0);                              // panel
  ud.scr=add(0.1,0.55,2.8,0x00ff88,2.74,3.7,0);                             // ekran
  scene.add(G);return G;
}
const TD_ACC=[0xcccccc,0x4aa3ff,0xff5a5a,0xb77cff,0xffc933,0x33f0ff],TD_FR=[0x555555,0x2b5fa3,0x992b2b,0x5a2fa0,0x8a6200,0x007c8c];
function paintTreads(){
  for(let L=0;L<4;L++){
    const G=padM[L],u=G.userData,own=!!penData(L),lv=own?padLvOf(L):1;
    G.visible=own;
    if(treadKey[L]!==lv){
      treadKey[L]=lv;
      const tier=lv>=15?5:lv>=13?4:lv>=9?3:lv>=5?2:lv>=2?1:0,k=1+0.02*(lv-1);
      u.base.material.color.set(TD_FR[tier]);u.cons.material.color.set(TD_FR[tier]);
      u.rails.forEach(m=>m.material.color.set(TD_ACC[tier]));u.posts.forEach(m=>m.material.color.set(TD_ACC[tier]));
      u.scr.material.color.set(lv>=9?0x00ffd5:0x00ff88);G.scale.set(k,k,k);
    }
    const run=(L===myLane&&onPad)||bots.some(b=>b.lane===L&&b.onP)||Object.values(remotes).some(r=>r.lane===L&&r.m);
    if(run)u.tex.offset.x-=0.012*(1+lv*0.35);      // tasma faqat odam ustida turganda aylanadi
  }
}
// Qo'ra egasi va darajasi (null = bo'sh qo'ra)
function penData(L){
  if(L===myLane)return{slots,lv:homeLv+1,name:"Siz",ico:"🏠"};
  for(const b of bots)if(b.lane===L)return{slots:b.slots,lv:b.pen,name:b.n,ico:"🤖"};
  for(const k in remotes){const r=remotes[k];if(r.lane===L)return{slots:r.slots,lv:r.pen||1,name:"ID "+r.id,ico:"🟩"}}
  return null;
}
function paintPens(){   // 10-daraja: oq, 15-daraja: ko'k
  for(let L=0;L<4;L++){
    const pd=penData(L),lv=pd?pd.lv:0;
    if(penKey[L]===lv)continue;penKey[L]=lv;
    const rail=!pd?0x8a8a8a:lv>=15?0x2f6fe0:lv>=10?0xf2f2f2:0x8a5a2b,post=!pd?0x6e6e6e:lv>=15?0x1d4fb0:lv>=10?0xd6d6d6:0x6b4423;
    penFence[L].r.forEach(m=>m.material.color.set(rail));penFence[L].p.forEach(m=>m.material.color.set(post));
  }
}
// Tabiat: osmon, daraxtlar, tog'lar, gullar, toshlar, bulutlar va tungi devor
function initScenery(){
  skyDay=new THREE.Color(0x8fd3ff);skyNight=new THREE.Color(0x0b1330);
  const k2=document.createElement("canvas");k2.width=4;k2.height=256;const x2=k2.getContext("2d");
  const gd=x2.createLinearGradient(0,0,0,256);gd.addColorStop(0,"#2f78d0");gd.addColorStop(0.55,"#8fd3ff");gd.addColorStop(1,"#e8f6ff");
  x2.fillStyle=gd;x2.fillRect(0,0,4,256);
  skyM=new THREE.Mesh(new THREE.SphereGeometry(800,16,12),new THREE.MeshBasicMaterial({map:new THREE.CanvasTexture(k2),side:THREE.BackSide,fog:false,depthWrite:false}));
  skyM.userData.noShadow=true;scene.add(skyM);
  const d=new THREE.Object3D(),wl=FH*U/2,rn=rng(777),col=new THREE.Color();
  const inst=(geo,mat,n)=>{const m=new THREE.InstancedMesh(geo,mat,n);m.userData.noShadow=true;scene.add(m);return m};
  // Daraxtlar (devordan tashqarida)
  const N=Math.min(3500,Math.round(420*WORLD*U/1700)),trunk=inst(new THREE.CylinderGeometry(0.5,0.7,4,6),new THREE.MeshLambertMaterial({color:0x6b4423}),N);
  const leaf=inst(new THREE.ConeGeometry(3,8,7),new THREE.MeshLambertMaterial({color:0xffffff}),N);
  for(let i=0;i<N;i++){
    const x=rn()*(WORLD*U+80)-40,z=(rn()<.5?-1:1)*(wl+7+rn()*60),s=0.8+rn()*1.1;
    d.rotation.set(0,0,0);d.scale.set(s,s,s);
    d.position.set(x,2*s,z);d.updateMatrix();trunk.setMatrixAt(i,d.matrix);
    d.position.set(x,8*s,z);d.updateMatrix();leaf.setMatrixAt(i,d.matrix);
    col.setHSL(0.28+rn()*0.08,0.5+rn()*0.2,0.22+rn()*0.14);leaf.setColorAt(i,col);
  }
  // Uzoqdagi tog'lar
  const M=Math.min(300,Math.round(70*WORLD*U/1700)),mt=inst(new THREE.ConeGeometry(1,1,6),new THREE.MeshLambertMaterial({color:0x7d8fa8}),M);
  for(let i=0;i<M;i++){
    const h=45+rn()*70,r=h*(0.7+rn()*0.5);
    d.rotation.set(0,rn()*3,0);d.scale.set(r,h,r);d.position.set(rn()*(WORLD*U+400)-200,h/2-2,(rn()<.5?-1:1)*(wl+120+rn()*160));
    d.updateMatrix();mt.setMatrixAt(i,d.matrix);
  }
  // Toshlar
  const R=Math.min(300,Math.round(60*WORLD*U/1700)),rk=inst(new THREE.DodecahedronGeometry(1),new THREE.MeshLambertMaterial({color:0x8a8d92}),R);
  for(let i=0;i<R;i++){
    const s=0.6+rn()*1.8;d.rotation.set(rn()*3,rn()*3,0);d.scale.set(s,s*.7,s);
    d.position.set(rn()*(WORLD*U+40)-20,s*.3,(rn()<.5?-1:1)*(wl+3+rn()*30));d.updateMatrix();rk.setMatrixAt(i,d.matrix);
  }
  // Maydondagi gullar
  const F=Math.min(3000,Math.round(600*WORLD*U/1700)),fl=inst(new THREE.SphereGeometry(0.35,6,4),new THREE.MeshLambertMaterial({color:0xffffff}),F);
  for(let i=0;i<F;i++){
    d.rotation.set(0,0,0);d.scale.set(1,1,1);
    d.position.set(BASE*U+3+rn()*(WORLD*U-BASE*U-6),0.3,(rn()-.5)*(FH*U-4));d.updateMatrix();fl.setMatrixAt(i,d.matrix);
    col.setHSL(rn(),0.85,0.6);fl.setColorAt(i,col);
  }
  // Bulutlar
  const cm=new THREE.MeshLambertMaterial({color:0xffffff,transparent:true,opacity:0.92,fog:false});
  for(let i=0,NC=Math.min(160,Math.round(28*WORLD*U/1700));i<NC;i++){
    const G=new THREE.Group();
    for(let k=0;k<4;k++){const m=new THREE.Mesh(new THREE.SphereGeometry(6+rn()*5,8,6),cm);m.position.set(k*7-10,rn()*3,rn()*6);m.scale.y=0.6;m.userData.noShadow=true;G.add(m)}
    G.position.set(rn()*(WORLD*U+300)-150,70+rn()*30,(rn()-.5)*320);scene.add(G);clouds.push(G);
  }
  // Zonalar: har birining nomiga mos yer rangi va buyumlari; zonalar orasida oq chiziq
  const nt=document.createElement("canvas");nt.width=nt.height=128;const nx=nt.getContext("2d");
  nx.fillStyle="#dcdcdc";nx.fillRect(0,0,128,128);
  for(let i=0;i<1400;i++){const c=190+Math.floor(Math.random()*65);nx.fillStyle="rgb("+c+","+c+","+c+")";nx.fillRect(Math.random()*128,Math.random()*128,2+Math.random()*3,2+Math.random()*3)}
  const ntex=new THREE.CanvasTexture(nt);ntex.wrapS=ntex.wrapT=THREE.RepeatWrapping;ntex.anisotropy=R3.capabilities.getMaxAnisotropy();
  const shapes={tree:[],ball:[],spike:[],cactus:[]};
  for(let k=1;k<=ZN;k++){
    const th=THEMES[k-1],lo=regLo(k),hi=regHi(k),w=(hi-lo)*U,z=zones[k-1],rc=[z.x+110,k%2?150:FH-150];
    const geo=new THREE.PlaneGeometry(w,FH*U),uv=geo.attributes.uv;
    for(let i=0;i<uv.count;i++)uv.setXY(i,uv.getX(i)*w/25,uv.getY(i)*FH*U/25);
    const m=new THREE.Mesh(geo,new THREE.MeshLambertMaterial({color:th[1],map:ntex,polygonOffset:true,polygonOffsetFactor:-1,polygonOffsetUnits:-1}));
    m.rotation.x=-Math.PI/2;m.position.set(X3((lo+hi)/2),0.03,0);m.receiveShadow=true;m.userData.noShadow=true;scene.add(m);
    for(let i=0,cnt=Math.min(400,Math.max(50,Math.round(w/10)));i<cnt;i++){
      const px=lo+20+rn()*(hi-lo-40),py=20+rn()*(FH-40);
      if(Math.hypot(px-rc[0],py-rc[1])<110||Math.hypot(px-z.gx,py-z.gy)<70)continue;      // tuxum va qo'riqchi atrofi bo'sh
      shapes[th[2]].push({x:X3(px),z:Z3(py),s:0.7+rn()*0.9,r:rn()*3,c:th[3]});
    }
  }
  const GEO={tree:new THREE.ConeGeometry(1.3,4.2,6),ball:new THREE.SphereGeometry(1,8,6),spike:new THREE.BoxGeometry(0.8,3,0.8),cactus:new THREE.CylinderGeometry(0.45,0.55,3,7)};
  const HG={tree:2.1,ball:0.8,spike:1.4,cactus:1.5};
  for(const key in shapes){
    const L=shapes[key];if(!L.length)continue;
    const im=inst(GEO[key],new THREE.MeshLambertMaterial({color:0xffffff}),L.length);
    L.forEach((o,i)=>{
      d.position.set(o.x,HG[key]*o.s,o.z);d.rotation.set(key==="spike"?(rn()-.5)*0.5:0,o.r,key==="spike"?(rn()-.5)*0.5:0);d.scale.set(o.s,o.s,o.s);
      d.updateMatrix();im.setMatrixAt(i,d.matrix);col.set(o.c);im.setColorAt(i,col);
    });
  }
  for(let j=1;j<ZN;j++){      // oq zonalar
    const sm=new THREE.Mesh(new THREE.PlaneGeometry(12,FH*U),new THREE.MeshBasicMaterial({color:0xffffff,transparent:true,opacity:0.85,polygonOffset:true,polygonOffsetFactor:-2,polygonOffsetUnits:-2}));
    sm.rotation.x=-Math.PI/2;sm.position.set(X3(WZC[j]),0.06,0);sm.userData.noShadow=true;scene.add(sm);
  }
  // Tun tushganda paydo bo'ladigan oq devor (boshqa devorlar bilan bir xil o'lcham)
  nightWall=[box(3,14,FH*U+6,0xf4f4f4,X3(WX),7,0),box(3.6,0.8,FH*U+6.6,0xffffff,X3(WX),14.4,0)];
  nightWall.forEach(w=>{w.visible=false;w.userData.noShadow=true});
}
function init3D(){
  hemi=new THREE.HemisphereLight(0xdfefff,0x5a8f4a,0.85);scene.add(hemi);
  sunL=new THREE.DirectionalLight(0xfff2d6,0.85);sunL.castShadow=true;sunL.shadow.mapSize.set(2048,2048);
  const shc=sunL.shadow.camera;shc.left=-45;shc.right=45;shc.top=45;shc.bottom=-45;shc.near=1;shc.far=220;sunL.shadow.bias=-0.0005;
  scene.add(sunL);scene.add(sunL.target);
  initScenery();
  // Yer (chiziqli maysa)
  const tc=document.createElement("canvas");tc.width=tc.height=256;const t=tc.getContext("2d");
  t.fillStyle="#5fae3f";t.fillRect(0,0,256,256);
  for(let i=0;i<4500;i++){t.fillStyle="hsl("+(90+Math.random()*30)+","+(45+Math.random()*25)+"%,"+(30+Math.random()*22)+"%)";t.fillRect(Math.random()*256,Math.random()*256,2+Math.random()*3,2+Math.random()*3)}
  const tex=new THREE.CanvasTexture(tc);tex.wrapS=tex.wrapT=THREE.RepeatWrapping;tex.repeat.set(WORLD*U/25,FH*U/25);
  tex.anisotropy=R3.capabilities.getMaxAnisotropy();
  const gr=new THREE.Mesh(new THREE.PlaneGeometry(WORLD*U,FH*U),new THREE.MeshLambertMaterial({map:tex}));
  gr.rotation.x=-Math.PI/2;gr.position.set(WORLD*U/2,0,0);gr.receiveShadow=true;scene.add(gr);
  outerG=flat(4000,4000,0x4f9a3a,WORLD*U/2,-0.1,0);
  // Devorlar
  const wl=FH*U/2;
  for(const sg of [-1,1]){
    box(WORLD*U+6,14,3,0x8d5a3b,WORLD*U/2,7,sg*(wl+1.5));
    box(WORLD*U+6,0.8,3.6,0xb0764f,WORLD*U/2,14.4,sg*(wl+1.5));
  }
  box(3,14,FH*U+6,0x8d5a3b,-1.5,7,0);box(3,14,FH*U+6,0x8d5a3b,WORLD*U+1.5,7,0);
  // Uy va tezlik to'rtburchagi
  box(BASE*U,0.3,FH*U,0x3aa655,BASE*U/2,0.15,0);
  // 4 ta alohida qo'ra: har birining o'rtasida darvoza oralig'i; rangi darajaga qarab o'zgaradi
  for(let L=0;L<4;L++){
    const zc=Z3(L*LH+LH/2),len=11-4,F=penFence[L];
    for(const sg of [-1,1]){
      const zz=zc+sg*(4+len/2);
      F.r.push(box(0.3,0.4,len,0x8a5a2b,BASE*U,1.2,zz),box(0.3,0.4,len,0x8a5a2b,BASE*U,2.2,zz));
      for(let k=0;k<=len;k+=8)F.p.push(box(0.5,2.6,0.5,0x6b4423,BASE*U,1.3,zc+sg*(4+k)));
    }
    for(const yy of [25,245]){const zb=Z3(L*LH+yy);F.r.push(box(BASE*U,0.4,0.3,0x8a5a2b,BASE*U/2,1.2,zb),box(BASE*U,0.4,0.3,0x8a5a2b,BASE*U/2,2.2,zb))}   // har qo'ra o'z to'sig'i bilan
  }
  for(let L=0;L<4;L++)padM.push(buildTread(L));   // har qo'raning o'z maydoni
  // Qizil zonalar va qo'riqchilar
  for(const z of zones){const m=buildGuard();scene.add(m);guardM.push(m)}   // zonalar ko'rinmaydi
  // Tuxumlar, uy uyalari, iz kublari, o'yinchi
  const eg=eggGeoG=new THREE.SphereGeometry(1,16,12);
  for(const s of spots){const m=new THREE.Mesh(eg,lam(0xffffff));scene.add(m);eggM.push(m)}
  for(let L=0;L<4;L++)for(let i=0;i<12;i++){      // 4 qo'ra x 12 joy
    const q=slotXY(i,L),x=X3(q[0]),z=Z3(q[1]);
    const b=new THREE.Mesh(new THREE.CylinderGeometry(1.2,1.5,0.3,16),lam(0x6b4a2b));b.position.set(x,0.36,z);scene.add(b);slotB.push(b);
    const e=new THREE.Mesh(eg,lam(0xffffff));e.position.set(x,0.5,z);scene.add(e);slotE.push(e);
    const sp=new THREE.Sprite(emo("🥚"));sp.scale.set(3.2,3.2,1);sp.position.set(x,2.4,z);scene.add(sp);slotS.push(sp);
    const sh=new THREE.Mesh(new THREE.CircleGeometry(1,16),new THREE.MeshBasicMaterial({color:0x000000,transparent:true,opacity:0.28}));   // hayvon soyasi
    sh.rotation.x=-Math.PI/2;sh.visible=false;sh.userData.noShadow=true;scene.add(sh);slotSh.push(sh);
  }
  for(let i=0;i<300;i++){
    const m=new THREE.Mesh(new THREE.BoxGeometry(1,1.4,CUBE*U),new THREE.MeshLambertMaterial({color:0xffffff,transparent:true}));
    m.visible=false;scene.add(m);trailM.push(m);
  }
  pl=buildAvatar();limbs=pl.userData.L;torsoM=pl.userData.T;batM=makeBat();limbs.aR.add(batM);
  shadow=new THREE.Mesh(new THREE.CircleGeometry(1.3,20),new THREE.MeshBasicMaterial({color:0x000000,transparent:true,opacity:0.3}));
  shadow.rotation.x=-Math.PI/2;scene.add(shadow);
  carryM=new THREE.Mesh(eg,lam(0xffffff));carryM.visible=false;scene.add(carryM);
  scene.traverse(o=>{if(o.isMesh&&!o.userData.noShadow&&!o.isInstancedMesh){o.castShadow=true;o.receiveShadow=true}});
}

// 3D nuqtani ekran (HUD) koordinatasiga o'tkazish
let _v=null;
function scr(x,y,z){
  _v=_v||new THREE.Vector3();
  _v.set(x,y,z).applyMatrix4(camera.matrixWorldInverse);
  if(_v.z>-0.5)return null;                       // kamera orqasida
  _v.applyMatrix4(camera.projectionMatrix);
  return [(_v.x*.5+.5)*W,(-_v.y*.5+.5)*H];
}
function lab(t,x,y,z,f,c){
  const p=scr(x,y,z);if(!p)return;
  g.font=f;g.textAlign="center";g.lineWidth=3;g.strokeStyle="#fffc";g.strokeText(t,p[0],p[1]);
  g.fillStyle=c||"#2b2b2b";g.fillText(t,p[0],p[1]);
}
function bar(x,y,w,f,col){
  g.fillStyle="#2b2b2b";g.fillRect(x-w/2-2,y-2,w+4,12);
  g.fillStyle=col;g.fillRect(x-w/2,y,w*f,8);
}

// Eng yaqin tuxum ekranda ko'rinmasa — yo'nalish ko'rsatkichi
  if(!P.item){
    let nz=null,nd=1e9;
    for(const z of spots)if(z.egg){const d=Math.hypot(z.ex-P.x,z.ey-P.y);if(d<nd){nd=d;nz=z}}
    if(nz){
      const p=scr(X3(nz.ex),2,Z3(nz.ey));
      if(!p||p[0]<0||p[0]>W||p[1]<0||p[1]>H){
        const rr=(nz.ex-P.x)*(-Math.sin(yaw))+(nz.ey-P.y)*Math.cos(yaw),right=rr>0,m=Math.round(nd/10);
        const txt=right?"🥚 "+m+"m ➡":"⬅ "+m+"m 🥚";
        g.font="bold 15px Trebuchet MS";g.textAlign="left";
        const tw=g.measureText(txt).width,bx=right?W-tw-22:8;
        g.fillStyle="#2b2b2bcc";g.fillRect(bx,H-112,tw+14,26);
        g.fillStyle="#fff";g.fillText(txt,bx+7,H-93);
      }
    }
  }
  if(P.item){        // tepa o'rtada: tuxum bilan qochish vaqti
    const y=isNight()?48:8;
    g.fillStyle="#7a1f1fcc";g.fillRect(W/2-175,y,350,34);g.fillStyle="#fff";g.font="bold 16px Trebuchet MS";g.textAlign="center";
    g.fillText("⏱ Qochish: "+(P.carryT||0).toFixed(1)+"s · qo'riqchi ⚡ "+fN(gsNow(P.item.z))+(P.item.passed?" · ⚪ oq zonadan o'tdingiz":""),W/2,y+23);
  }
  // Panel
  g.textAlign="left";g.font="bold "+(W<500?15:18)+"px Trebuchet MS";
  g.fillStyle="#2b2b2bcc";g.fillRect(8,8,W<500?225:300,130);
  g.fillStyle="#ffe066";g.fillText("💰 $"+fN(coins)+"  (+"+fN(income())+"/s)",18,30);
  g.fillStyle="#fff";g.fillText("⚡ "+fN(totSpd())+" / "+fN(maxSpd())+(SKINS[skin].b?" (+"+SKINS[skin].b+"%)":""),18,54);
  g.fillText("🏠 Joy: "+slots.length+" / "+maxSlots(),18,78);
  g.fillText("🆔 "+MYID+"   👥 "+(1+bots.length+netCount())+"/"+MAXP,18,102);
  g.fillText("📍 "+zoneNameAt(P.x),18,126);
  if(msgT>0){
    g.textAlign="center";g.font="bold "+(W<500?14:19)+"px Trebuchet MS";
    const bw=Math.min(500,W-16);g.fillStyle="#2b2b2bdd";g.fillRect(W/2-bw/2,H-56,bw,38);
    g.fillStyle="#fff";g.fillText(msg,W/2,H-31);
  }
}

// ---------- Inventar (pastda, o'rtada) ----------
const INV_MAX=9;
let inv=[];
function addInv(it){if(inv.length>=INV_MAX)return false;inv.push(it);renderInv();return true}
function renderInv(){
  let h="";
  for(let i=0;i<INV_MAX;i++){
    const it=inv[i];
    if(!it){h+='<div class="it e"></div>';continue}
    const T=TIER[it.tier],pic=it.kind==="animal"?'<span class="em an '+anCls(it.em)+'">'+it.em+'</span>':'<span class="egg" style="'+swStyle(T.c)+'"></span>';
    h+='<button class="it'+(P.hand===it?" sel":"")+(it.hot?" hot":"")+'" data-i="'+i+'" title="'+T.n+" · "+SIZE[it.size].n+(it.kind==="animal"?" (hayvon)":" (tuxum)")+'">'+pic+"<small>"+(i+1)+"</small></button>";
  }
  $("inv").innerHTML=h;
}
function holdInv(i){        // chap tugma: inventardagi narsani qo'lga olish / qo'yish
  const it=inv[i];if(!it)return;
  P.hand=P.hand===it?null:it;renderInv();
  say(P.hand?"✋ "+TIER[it.tier].n+" qo'lingizda — qo'rangizga bosib ekib qo'ying":"Qo'ldan qo'yildi");
}
function plantAt(gx,gy){    // qo'lidagi narsani qo'ra ichida bosilgan joyga ekish
  const it=P.hand;if(!it)return;
  if(it.hot){say("Avval uyga yetib boring — qo'riqchi quvmoqda");return}
  const L=myLane,x0=18,x1=BASE-12,y0=L*LH+30,y1=L*LH+240;
  if(gx<x0||gx>x1||gy<y0||gy>y1){say("O'z qo'rangiz ichiga bosing");return}
  if(slots.length>=maxSlots()){say("Qo'rada joy yo'q! Qo'rani kuchaytiring");return}
  if(slots.some(s=>!s.em&&Math.hypot((s.px||0)-gx,(s.py||0)-gy)<16)){say("Bu yerga qo'yib bo'lmaydi (tuxumga juda yaqin)");return}
  inv.splice(inv.indexOf(it),1);P.hand=null;
  slots.push({tier:it.tier,size:it.size,inc:it.inc,hatch:it.hatch,time:it.kind==="animal"?it.hatch:(it.time||0),em:it.kind==="animal"?it.em:null,px:gx,py:gy});
  renderInv();say("🌱 "+TIER[it.tier].n+" qo'raga ekildi");
}
function groundPoint(cx,cy){   // ekrandagi nuqta -> yer koordinatasi (o'yin pikselida)
  const v=new THREE.Vector3(cx/innerWidth*2-1,-(cy/innerHeight)*2+1,0.5).unproject(camera),o=camera.position;
  const dx=v.x-o.x,dy=v.y-o.y,dz=v.z-o.z;
  if(dy>=-1e-6)return null;
  const t=-o.y/dy;return [(o.x+dx*t)/U,(o.z+dz*t)/U+FH/2];
}
function canvasClick(cx,cy){if(!P.hand||!R3)return;const q=groundPoint(cx,cy);if(q)plantAt(q[0],q[1])}
function sellInv(i){        // hayvonni sotish: sichqonchaning o'ng tugmasi
  const it=inv[i];if(!it)return;
  if(it.kind!=="animal"){say("Tuxumni sotib bo'lmaydi — uyga qo'ying");return}
  const v=it.inc*120;coins+=v;inv.splice(i,1);if(P.hand===it)P.hand=null;renderInv();say("💰 "+it.em+" sotildi: +$"+fN(v));
}
function takeHome(i){       // uydagi narsani inventarga olish
  const s=slots[i];if(!s)return;
  if(inv.length>=INV_MAX){say("Inventar to'la!");return}
  slots.splice(i,1);
  inv.push(s.em?{kind:"animal",tier:s.tier,size:s.size,inc:s.inc,hatch:s.hatch,em:s.em}:{kind:"egg",tier:s.tier,size:s.size,inc:s.inc,hatch:s.hatch,time:s.time});
  renderInv();renderHome(true);say("🎒 Inventarga olindi");
}
let lpT=null,lpHit=false;
$("inv").addEventListener("click",e=>{if(lpHit){lpHit=false;return}const b=e.target.closest("[data-i]");if(b)holdInv(+b.dataset.i)});
$("inv").addEventListener("contextmenu",e=>{e.preventDefault();const b=e.target.closest("[data-i]");if(b)sellInv(+b.dataset.i)});
$("inv").addEventListener("pointerdown",e=>{
  const b=e.target.closest("[data-i]");if(!b||e.pointerType==="mouse")return;
  lpHit=false;lpT=setTimeout(()=>{lpHit=true;sellInv(+b.dataset.i)},600);       // telefonda: bosib turish = sotish
});
["pointerup","pointercancel","pointerleave"].forEach(t=>$("inv").addEventListener(t,()=>clearTimeout(lpT)));
addEventListener("keydown",e=>{if(e.target&&e.target.tagName==="INPUT")return;if(/^[1-9]$/.test(e.key))holdInv(+e.key-1)});
renderInv();

// ---------- "Uy" oynasi: uydagi narsalar ----------
let homeSig="";
function renderHome(force){
  const sig=slots.map(s=>s.tier+"/"+s.size+"/"+(s.em||"e")).join("|");
  if(sig!==homeSig||force){
    homeSig=sig;
    $("homeList").innerHTML=slots.length?slots.map((s,i)=>{
      const T=TIER[s.tier],pic=s.em?'<div class="sw" style="font-size:30px;display:flex;align-items:center;justify-content:center;background:#f2f2f2"><span class="an '+anCls(s.em)+'">'+s.em+"</span></div>":'<div class="sw" style="'+swStyle(T.c)+'"></div>';
      return '<div class="li">'+pic+"<div><b>"+T.n+" · "+SIZE[s.size].n+"</b> "+(s.em?"(hayvon)":"(tuxum)")+"<br><small>Pul: $"+fN(s.inc*mult())+"/s"+(s.em?"":" (ochilgach)")+'<br><span class="cd" data-i="'+i+'"></span></small><br><button data-take="'+i+'" class="g">Olish</button></div></div>';
    }).join(""):"<small>Uyingiz bo'sh.</small>";
  }
  document.querySelectorAll("#homeList .cd").forEach(el=>{const s=slots[+el.dataset.i];if(s)el.textContent=s.em?"Hayvon — pul bermoqda":"Ochilishiga: "+fT(s.hatch-s.time)});
}
$("homeBtn").onclick=()=>{$("home").style.display="flex";renderHome(true)};
$("homeClose").onclick=()=>$("home").style.display="none";
$("homeList").onclick=e=>{const b=e.target.closest("button");if(b&&b.dataset.take!==undefined)takeHome(+b.dataset.take)};
setInterval(()=>{if($("home").style.display==="flex")renderHome()},500);

// ---------- Botlar: biri biroz kuchli, biri biroz kuchsiz; siz bilan birga rivojlanadi ----------
const padCostAt=lv=>Math.round(300*Math.pow(5,lv-1)),homeCostAt=lv=>2000*Math.pow(3.2,lv-1);
const bots=[{n:"Bot Alfa",fac:1.2,sk:4,lane:0},{n:"Bot Beta",fac:0.8,sk:2,lane:2}].map(d=>{
  const av=R3?buildAvatar():null;
  return {id:1+Math.floor(Math.random()*10000000),n:d.n,fac:d.fac,sk:d.sk,lane:d.lane,slots:[],pen:1,padLv:1,vy:0,kx:0,ky:0,stun:0,bat:false,onP:false,x:60,y:d.lane*LH+LH/2,h:0,f:0,ph:0,mv:false,
    st:"idle",t:2+Math.random()*3,spd:0,item:null,sp:null,esc:true,cutX:0,deliv:0,coins:0,
    view:{x:60,y:d.lane*LH+LH/2,tx:60,ty:d.lane*LH+LH/2,h:0,f:0,m:0,ph:0,sk:d.sk,it:0,av}};
});
function dropEgg(it,x,y){     // tutilganda oq zonadan keyingi tuxum yerda qoladi (olib kelib olish mumkin)
  const sp={id:spots.length,n:0,z:it.z,ex:x,ey:y,egg:true,rs:0,pop:1,special:false,dropped:true,tier:it.tier,size:it.size,ttl:90};
  spots.push(sp);
  if(R3&&eggGeoG){const m=new THREE.Mesh(eggGeoG,lam(0xffffff));m.castShadow=true;scene.add(m);eggM.push(m)}
  return sp;
}
function botDeliver(b){     // tuxum bazaga yetdi: bot uni o'z qo'rasiga ekadi
  const it=b.item,cap=penCap(b.pen);
  if(b.slots.length>=cap){const ia=b.slots.findIndex(q=>q.em);if(ia>=0){b.coins+=b.slots[ia].inc*120;b.slots.splice(ia,1)}}
  if(b.slots.length<cap){const ps=penSpot(b.slots,b.lane);b.slots.push({tier:it.tier,size:it.size,inc:eggInc(it.tier,it.size,it.z.k),hatch:TIER[it.tier].h,time:0,em:null,px:ps[0],py:ps[1]})}   // bot ham tuxumni qo'raga ekadi
  b.deliv++;b.item=null;b.st="idle";b.t=3;b.mv=false;
}
let wasNight=false;
function nightHome(){     // tun tushganda bazadan tashqaridagilar bazaga qaytariladi; bazada bo'lsa hech narsa bo'lmaydi
  if(P.x>=BASE){
    P.x=70;P.y=myLane*LH+LH/2;P.h=0;P.vy=0;P.lock=false;P.dm=0;padCool=false;lx=P.x;ly=P.y;trail.length=0;
    say("🌙 Tun tushdi — bazangizga qaytarildingiz");
  }
  for(const b of bots)if(b.x>=BASE){
    if(b.item)botDeliver(b);       // olib ketayotgan tuxum bazaga yetgan hisoblanadi
    b.x=60;b.y=b.lane*LH+LH/2;b.h=0;b.vy=0;b.kx=b.ky=0;b.stun=0;b.st="idle";b.t=3+Math.random()*2;b.mv=false;
  }
}
function botGo(b,tx,ty,spPx,dt){
  const dx=tx-b.x,dy=ty-b.y,d=Math.hypot(dx,dy);
  if(d<3){b.mv=false;return true}
  const s=Math.min(d,spPx*dt),ox=b.x;
  b.x+=dx/d*s;b.y+=dy/d*s;wallClamp(b,ox);
  b.f=Math.atan2(dy,dx);b.mv=true;b.ph+=Math.min(.5,s*.07);
  return d-s<3;
}
function updateBots(dt){
  for(const b of bots){
    // Bot tezligi o'zidan o'zi oshmaydi: treadmillda mashq qiladi, tanga topgach o'zi kuchaytiradi
    if(b.padLv<15&&b.spd>=capAt(b.padLv)*0.97&&b.coins>=padCostAt(b.padLv)){b.coins-=padCostAt(b.padLv);b.padLv++}
    else if(b.pen<15&&b.coins>=homeCostAt(b.pen)*3){b.coins-=homeCostAt(b.pen);b.pen++}
    for(const q of b.slots){      // botning o'z qo'rasi: tuxum ochiladi, hayvon pul beradi
      q.time+=sec(dt);
      if(!q.em&&q.time>=q.hatch)q.em=TIER[q.tier].a[Math.floor(Math.random()*3)];
      if(q.em)b.coins+=q.inc*(1+0.25*(b.pen-1))*sec(dt);
    }
    simPen(b.slots,b.lane,dt);
    const pdb=pads[b.lane];b.onP=b.st==="idle"&&Math.hypot(b.x-(pdb.x+12),b.y-(pdb.y+pdb.h/2))<8;
    if(b.onP){b.ph+=0.22*dt*(1+b.padLv*0.06);b.f=0;b.spd=Math.min(capAt(b.padLv),b.spd+padRate(b.padLv)*b.fac*sec(dt))}   // bot ham treadmillda yuguradi va tezlik to'playdi
    if(b.kx||b.ky){   // urilgan bot uchib ketadi
      const ox=b.x;b.x=Math.max(14,Math.min(WORLD-14,b.x+b.kx*dt));b.y=Math.max(14,Math.min(FH-14,b.y+b.ky*dt));wallClamp(b,ox);
      b.kx*=Math.pow(0.9,dt);b.ky*=Math.pow(0.9,dt);if(Math.hypot(b.kx,b.ky)<0.3)b.kx=b.ky=0;
    }
    b.vy-=0.04*dt;b.h+=b.vy*dt;if(b.h<=0){b.h=0;b.vy=0}
    if(b.stun>0){b.stun-=dt;b.mv=false;continue}             // bir lahza o'ziga kelolmaydi
    if(b.st==="idle"){
      const pd=pads[b.lane];botGo(b,pd.x+12,pd.y+pd.h/2,numPx(b.spd),dt);   // bo'sh paytda o'z maydonida turadi
      b.t-=sec(dt);
      if(b.t<=0&&!isNight()){
        let cand=[];   // kuchi yetadigan eng yuqori zonadagi tuxumlar
        for(let k=ZN;k>=1&&!cand.length;k--)cand=spots.filter(s=>s.egg&&!s.dropped&&s.z.k===k&&b.spd*SIZE[s.size].sl>s.z.gs*1.02);
        if(cand.length){b.sp=cand[Math.floor(Math.random()*cand.length)];b.st="walk"}else b.t=2;   // kuchi yetmasa treadmillda mashq qiladi
      }
    }else if(b.st==="walk"){
      if(!b.sp.egg){b.st="idle";b.t=1}
      else if(botGo(b,b.sp.ex,b.sp.ey,numPx(b.spd),dt)){b.st="hold";b.t=3}
    }else if(b.st==="hold"){      // tuxum olish uchun 3 soniya
      b.mv=false;b.t-=sec(dt);
      if(!b.sp.egg){b.st="idle";b.t=1}
      else if(b.t<=0){
        const sp=b.sp;sp.egg=false;sp.rs=sp.special?TIER[sp.tier].cyc:15;netAll({t:"take",i:sp.id});
        b.item={tier:sp.tier,size:sp.size,sp,z:sp.z};
        const eff=b.spd*SIZE[sp.size].sl;
        b.esc=eff>sp.z.gs&&(eff>sp.z.gs*1.25||Math.random()<0.65);   // zo'rg'a yetsa ba'zan tutiladi (qiynaladi)
        b.cutX=b.x-(b.x-BASE)*(0.3+Math.random()*0.4);   // tutilsa yo'lning bir qismida tutiladi
        b.st="run";
      }
    }else if(b.st==="run"){
      const arrived=botGo(b,BASE-30,b.y,numPx(b.spd*SIZE[b.item.size].sl),dt);
      if(!b.esc&&b.x<=b.cutX){      // qo'riqchi tutdi: tuxum qaytadi, bot uyiga qaytadi
        b.item.sp.egg=true;b.item.sp.pop=1;netAll({t:"ret",i:b.item.sp.id});
        b.item=null;b.x=60;b.y=b.lane*LH+LH/2;b.st="idle";b.t=4;b.mv=false;
      }else if(arrived||b.x<BASE){
        botDeliver(b);
      }
    }
  }
}
setInterval(()=>{if($("find").style.display==="flex")renderPlayers()},1000);

// ---------- Multiplayer (PeerJS ochiq serveri orqali, ID bo'yicha ulanish) ----------
const MAXP=4,MAXH=1,MYID=1+Math.floor(Math.random()*10000000);   // har safar yangi tasodifiy ID
let peer=null,conns={},remotes={},pend=[],reqQ=[],netT=0;
const pid=id=>"stealegg-"+id,netCount=()=>Object.keys(conns).length;
function netSt(t){$("netSt").textContent=t}
function netAll(m){for(const k in conns){const c=conns[k];if(c.open)c.send(m)}}
function renderPlayers(){
  const hs=Object.keys(conns);
  let h="<b>O'yinchilar ("+(1+bots.length+hs.length)+"/"+MAXP+"):</b><br>🟦 Siz — ID "+MYID+" ⚡"+fN(totSpd());
  bots.forEach(b=>{h+="<br>🤖 "+b.n+" — ID "+b.id+" ⚡"+fN(b.spd)+" ("+(b.fac>1?"biroz kuchliroq":"biroz kuchsizroq")+", "+b.deliv+" tuxum)"});
  hs.forEach(i=>{h+="<br>🟩 ID "+i});
  for(let k=1+bots.length+hs.length;k<MAXP;k++)h+="<br>⬜ Bo'sh joy — 3-o'yinchi uchun (ID kiritib ulaning)";
  $("plist").innerHTML=h;
}
function newRemote(id){
  const r={id,lane:3,slots:[],pen:1,padLv:1,x:70,y:3*LH+LH/2,tx:70,ty:3*LH+LH/2,h:0,f:0,m:0,ph:0,sk:0,it:0,av:R3?buildAvatar():null};
  remotes[id]=r;return r;
}
function poseRemote(r){
  r.x+=(r.tx-r.x)*0.3;r.y+=(r.ty-r.y)*0.3;
  const A=r.av;if(!A)return;
  const L=A.userData.L,air=r.h>0.02,up=air||!!r.it,sw=Math.sin(r.ph)*0.9*(r.m?1:0);
  A.position.set(X3(r.x),r.h,Z3(r.y));
  let af=A.userData.f===undefined?r.f:A.userData.f;af+=(((r.f-af+Math.PI*3)%(Math.PI*2))-Math.PI)*0.3;A.userData.f=af;A.rotation.y=-af;
  L.lL.rotation.z=air?0.25:sw;L.lR.rotation.z=air?-0.25:-sw;L.aL.rotation.z=up?2.7:-sw;L.aR.rotation.z=up?2.7:sw;
  A.userData.T.material.color.set(skinCol(r.sk));
}
function link(c,id){
  conns[id]=c;c.mid=id;pend=pend.filter(x=>x!==id);
  if(!remotes[id])newRemote(id);
  renderPlayers();netSt("✅ ID "+id+" bilan ulandingiz!");
}
function sendPeers(c){c.send({t:"peers",list:Object.keys(conns).map(Number).filter(x=>x!==c.mid)})}
function accept(c,id){
  link(c,id);
  remotes[id].lane=myLane===3?1:3;                           // yangi o'yinchiga bo'sh qo'ra beriladi
  c.send({t:"acc",id:MYID,lane:myLane,yours:remotes[id].lane});
  c.send({t:"spots",s:spots.filter(e=>!e.dropped).map(e=>[e.egg?1:0,e.rs,e.tier,e.size,e.n])});   // dunyo holati bir xil bo'lishi uchun
  sendPeers(c);
}
function drop(c){
  const id=c.mid;
  if(id&&conns[id]===c){
    delete conns[id];const r=remotes[id];
    if(r&&r.av&&scene)scene.remove(r.av);
    delete remotes[id];renderPlayers();netSt("ID "+id+" chiqib ketdi");
  }
}
function showReq(){      // o'ng tomonda 6cm x 3cm oyna: "Ha / Yo'q"
  const b=$("req");
  if(!reqQ.length){b.style.display="none";return}
  $("reqTxt").textContent="ID "+reqQ[0].id+" siz bilan o'ynamoqchi. Qabul qilasizmi?";
  b.style.display="flex";
}
$("reqYes").onclick=()=>{const q=reqQ.shift();if(q&&q.c.open)accept(q.c,q.id);showReq()};
$("reqNo").onclick=()=>{
  const q=reqQ.shift();
  if(q&&q.c.open){q.c.send({t:"deny"});setTimeout(()=>{try{q.c.close()}catch(e){}},300)}
  showReq();
};
function onNet(c,m){
  if(!m||!m.t)return;
  if(m.t==="req"){
    if(conns[m.id]||netCount()>=MAXH){c.send({t:"deny"});setTimeout(()=>{try{c.close()}catch(e){}},300);return}
    if(m.intro)accept(c,m.id);else{reqQ.push({c,id:m.id});showReq()}
  }else if(m.t==="acc"){
    link(c,m.id);
    if(m.yours!==undefined){myLane=m.yours;slots.forEach(q=>{q.ax=undefined});const r=remotes[m.id];if(r)r.lane=m.lane}
    sendPeers(c);
  }
  else if(m.t==="deny"){pend=[];netSt("❌ O'yinchi ulanishni rad etdi");try{c.close()}catch(e){}}
  else if(m.t==="pos"){
    const r=remotes[m.id]||newRemote(m.id);
    r.tx=m.x;r.ty=m.y;r.h=m.h;r.f=m.f;r.m=m.m;r.ph=m.ph;r.sk=m.sk;r.it=m.it;
  }else if(m.t==="slots"){
    const r=remotes[m.id];
    if(r){r.pen=m.lv;r.padLv=m.pl||1;const old=r.slots;
      r.slots=m.s.map((v,i)=>{const o=old[i],it={tier:v[0],size:v[1],em:v[2]||null,inc:v[3],px:v[4],py:v[5]};
        if(o&&o.em===it.em)Object.assign(it,{ax:o.ax,ay:o.ay,tx:o.tx,ty:o.ty,st:o.st,w:o.w,ph:o.ph,sp:o.sp,flip:o.flip,age:o.age,mvx:o.mvx,mvy:o.mvy});return it});}
  }else if(m.t==="take"){const e=spots[m.i];if(e){e.egg=false;e.rs=e.special?TIER[e.tier].cyc:15}}
  else if(m.t==="ret"){const e=spots[m.i];if(e){e.egg=true;e.pop=1}}
  else if(m.t==="spots"){m.s.forEach((v,i)=>{const e=spots[i];if(e){e.egg=!!v[0];e.rs=v[1];e.tier=v[2];e.size=v[3];e.n=v[4]}})}
  else if(m.t==="peers"){m.list.forEach(id=>{if(id!==MYID&&!conns[id]&&!pend.includes(id))connectTo(id,true)})}
}
function connectTo(id,intro){
  if(!(id>=1&&id<=10000000)||id!==Math.floor(id)){netSt("ID 1 dan 10 000 000 gacha bo'lishi kerak");return}
  if(id===MYID){netSt("Bu sizning o'z ID ingiz");return}
  if(!peer||!peer.open){netSt("Tarmoq hali tayyor emas, bir ozdan keyin urinib ko'ring");return}
  if(conns[id]||pend.includes(id)){netSt("Bu o'yinchi bilan allaqachon ulangansiz yoki kutilmoqda");return}
  if(netCount()>=MAXH){netSt("Xona to'lgan (siz + 2 bot + 1 o'yinchi)");return}
  const c=peer.connect(pid(id),{reliable:true});
  pend.push(id);netSt("ID "+id+" ga so'rov yuborildi, uning tasdig'i kutilmoqda...");
  c.on("open",()=>c.send({t:"req",id:MYID,intro:!!intro}));
  c.on("data",d=>onNet(c,d));
  c.on("close",()=>{pend=pend.filter(x=>x!==id);drop(c)});
  setTimeout(()=>{if(pend.includes(id)&&!conns[id]){pend=pend.filter(x=>x!==id);netSt("Javob kelmadi");try{c.close()}catch(e){}}},30000);
}
function netInit(){
  if(typeof Peer==="undefined"){netSt("Tarmoq kutubxonasi yuklanmadi (internet kerak)");return}
  try{
    peer=new Peer(pid(MYID));
    peer.on("open",()=>netSt("Tayyor. Sizning ID ingiz: "+MYID));
    peer.on("connection",c=>{
      c.on("data",d=>onNet(c,d));
      c.on("close",()=>{reqQ=reqQ.filter(q=>q.c!==c);showReq();drop(c)});
    });
    peer.on("error",e=>netSt("Xato: "+e.type+(e.type==="peer-unavailable"?" (bunday ID li o'yinchi topilmadi)":"")));
  }catch(e){netSt("Tarmoq xatosi")}
}
// ---------- Kod kiritish joyi ----------
const CODES={xiz7:()=>{
  coins+=888e15;                         // 888Qa pul
  padLv=Math.max(padLv,11);              // 1T tezlik ishlashi uchun maksimal tezlik chegarasi yetarli bo'lishi kerak (Lv 11 = 3.6T)
  spd=Math.max(spd,1e12);                // 1T tezlik
  return "Kod qabul qilindi: +888Qa pul va 1T tezlik berildi";
}};
function redeem(){
  const c=$("codeIn").value.trim().toLowerCase(),fn=Object.prototype.hasOwnProperty.call(CODES,c)?CODES[c]:null;
  if(!c){$("codeSt").textContent="Kodni kiriting";return}
  if(!fn){$("codeSt").textContent="❌ Noto'g'ri kod";return}
  const m=fn();$("codeSt").textContent="✅ "+m;say("🔑 "+m);$("codeIn").value="";saveGame();
}
$("codeBtn").onclick=()=>{$("code").style.display="flex";$("codeSt").textContent="";setTimeout(()=>$("codeIn").focus(),50)};
$("codeClose").onclick=()=>{$("code").style.display="none";$("codeIn").blur()};
$("codeGo").onclick=redeem;
$("codeIn").addEventListener("keydown",e=>{if(e.key==="Enter")redeem()});
$("findBtn").onclick=()=>{$("find").style.display="flex";$("myId").textContent=MYID;renderPlayers()};
$("findClose").onclick=()=>{$("find").style.display="none";$("findIn").blur()};
$("findGo").onclick=()=>connectTo(Math.floor(+$("findIn").value));
$("findIn").addEventListener("keydown",e=>{if(e.key==="Enter")$("findGo").onclick()});
$("myId").textContent=MYID;
function setQ(v){q4k=v;$("qBtn").textContent="🖥 4K: "+(v?"yoqilgan":"o'chiq");resize();if(!v)say("4K o'chirildi (tezroq ishlaydi)")}
$("qBtn").onclick=()=>setQ(!q4k);
netInit();
setTimeout(()=>{$("help").style.display="none"},20000);

// ---------- Saqlash: shu telefon/brauzerda, chiqib ketilgan joydan davom etadi ----------
const SAVE_KEY="steal-egg-save-v2";
function saveGame(){
  try{
    const it=P.item?{tier:P.item.tier,size:P.item.size,z:P.item.z.k,sp:spots.indexOf(P.item.sp)}:null;
    localStorage.setItem(SAVE_KEY,JSON.stringify({coins,spd,padLv,homeLv,skin,owned:[...owned],inv,gt,yaw,pitch,x:P.x,y:P.y,item:it,
      slots:slots.map(s=>({tier:s.tier,size:s.size,inc:s.inc,hatch:s.hatch,time:s.time,em:s.em,px:s.px,py:s.py})),
      spots:spots.filter(e=>!e.dropped).map(e=>({egg:e.egg,rs:e.rs,tier:e.tier,size:e.size,n:e.n})),t:Date.now()}));
  }catch(e){}
}
function loadGame(){
  let d=null;try{d=JSON.parse(localStorage.getItem(SAVE_KEY))}catch(e){}
  if(!d||typeof d.coins!=="number")return;
  const el=Math.max(0,(Date.now()-(d.t||Date.now()))/1000);      // o'yindan tashqarida o'tgan vaqt
  coins=d.coins;spd=d.spd||0;padLv=Math.min(15,Math.max(1,d.padLv||1));homeLv=Math.min(14,Math.max(0,d.homeLv||0));
  (d.owned||[]).forEach(i=>SKINS[i]&&owned.add(i));skin=SKINS[d.skin]&&owned.has(d.skin)?d.skin:0;
  yaw=d.yaw||0;pitch=d.pitch||0.75;gt=d.gt||0;inv=Array.isArray(d.inv)?d.inv.slice(0,INV_MAX):[];renderInv();
  slots=(d.slots||[]).slice(0,maxSlots()).map(s=>({...s,time:s.time+el}));
  slots.forEach((s,i)=>{if(s.px===undefined){const q=slotXY(i,myLane);s.px=q[0];s.py=q[1]}});
  (d.spots&&d.spots.length===spots.length?d.spots:[]).forEach((v,i)=>{const e=spots[i];if(!e)return;e.egg=v.egg;e.tier=v.tier;e.size=v.size;e.n=v.n||0;e.rs=v.egg?0:v.rs-el;e.pop=0});
  P.x=Math.max(P.r,Math.min(WORLD-P.r,d.x||70));P.y=Math.max(P.r,Math.min(FH-P.r,d.y||FH/2));lx=P.x;ly=P.y;
  if(d.item&&d.spots&&d.spots.length===spots.length&&zones[d.item.z-1]&&spots[d.item.sp])P.item={tier:d.item.tier,size:d.item.size,sp:spots[d.item.sp],z:zones[d.item.z-1],inv:inv.find(x=>x.hot)};
  inv.forEach(x=>{if(x.hot&&!P.item)x.hot=false});
}
loadGame();
setInterval(saveGame,2000);
document.addEventListener("visibilitychange",()=>{if(document.hidden)saveGame()});
addEventListener("pagehide",saveGame);
if(R3)init3D();
requestAnimationFrame(loop);
  }

ready(function(){
    Promise.all([
      load("https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"),
      load("https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js")
    ]).then(startGame);
  });
})();

Comments 0

…

3D Egg Stealing Multiplayer Game in JavaScript and Canvas

Recommended

Comments 0