project0_67.html 73 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875
  1. <!DOCTYPE html>
  2. <html lang="ru">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Механические волны — неон</title>
  7. <style>
  8. :root{
  9. --neon-pink:#ff2ec4;
  10. --neon-cyan:#00e5ff;
  11. --neon-purple:#a259ff;
  12. --neon-green:#39ff14;
  13. --text:#e8e6ff;
  14. }
  15. *{box-sizing:border-box;margin:0;padding:0;}
  16. html,body{height:100%;}
  17. body{
  18. background:radial-gradient(circle at 20% 20%, #1a0033 0%, #0a0014 60%, #000 100%);
  19. color:var(--text);
  20. font-family:'Segoe UI','Trebuchet MS',sans-serif;
  21. overflow:hidden;
  22. }
  23. #app{position:relative;width:100%;height:100vh;overflow:hidden;}
  24. .scene{
  25. position:absolute;inset:0;display:none;flex-direction:column;
  26. align-items:center;justify-content:center;padding:80px 24px 24px;
  27. animation:fadeIn .6s ease;overflow-y:auto;
  28. }
  29. .scene.active{display:flex;}
  30. @keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
  31. h1,h2{font-weight:800;letter-spacing:2px;text-transform:uppercase;text-align:center;}
  32. h1{font-size:clamp(1.8rem,5vw,3.5rem);color:#fff;
  33. text-shadow:0 0 10px var(--neon-pink),0 0 30px var(--neon-pink),0 0 60px var(--neon-purple);
  34. margin-bottom:20px;}
  35. h2{font-size:clamp(1.3rem,3.5vw,2rem);color:#fff;
  36. text-shadow:0 0 8px var(--neon-cyan),0 0 20px var(--neon-cyan);margin-bottom:16px;}
  37. p{max-width:720px;text-align:center;line-height:1.6;opacity:.9;}
  38. .btn{
  39. background:transparent;color:var(--neon-cyan);
  40. border:2px solid var(--neon-cyan);padding:12px 28px;margin:8px;
  41. font-size:1rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  42. border-radius:8px;cursor:pointer;transition:.25s;
  43. box-shadow:0 0 12px rgba(0,229,255,.6), inset 0 0 12px rgba(0,229,255,.15);
  44. }
  45. .btn:hover{background:var(--neon-cyan);color:#000;
  46. box-shadow:0 0 25px var(--neon-cyan),0 0 60px var(--neon-cyan);transform:translateY(-2px);}
  47. .btn.pink{color:var(--neon-pink);border-color:var(--neon-pink);
  48. box-shadow:0 0 12px rgba(255,46,196,.6), inset 0 0 12px rgba(255,46,196,.15);}
  49. .btn.pink:hover{background:var(--neon-pink);color:#000;box-shadow:0 0 25px var(--neon-pink);}
  50. .btn.green{color:var(--neon-green);border-color:var(--neon-green);}
  51. .btn.green:hover{background:var(--neon-green);color:#000;box-shadow:0 0 25px var(--neon-green);}
  52. .btn:disabled{opacity:.35;cursor:not-allowed;transform:none;}
  53. .topbar{
  54. position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;
  55. align-items:center;padding:10px 16px;z-index:10;font-size:.8rem;
  56. letter-spacing:2px;text-transform:uppercase;color:var(--neon-cyan);
  57. text-shadow:0 0 8px var(--neon-cyan);
  58. }
  59. .topbar .progress{flex:1;height:4px;margin:0 16px;background:rgba(255,255,255,.1);
  60. border-radius:2px;overflow:hidden;}
  61. .topbar .progress div{height:100%;width:0%;
  62. background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  63. box-shadow:0 0 12px var(--neon-cyan);transition:width .5s;}
  64. .icon-btn{background:transparent;border:1px solid var(--neon-cyan);color:var(--neon-cyan);
  65. border-radius:6px;padding:4px 10px;cursor:pointer;font-size:.75rem;}
  66. .icon-btn:hover{background:var(--neon-cyan);color:#000;}
  67. canvas{display:block;max-width:100%;}
  68. .canvas-wrap{border:1px solid rgba(0,229,255,.3);border-radius:12px;
  69. box-shadow:0 0 30px rgba(162,89,255,.35), inset 0 0 30px rgba(0,229,255,.1);
  70. background:rgba(0,0,0,.35);padding:8px;margin:16px 0;}
  71. .controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:16px 0;}
  72. .slider-box{display:flex;flex-direction:column;align-items:center;
  73. background:rgba(255,255,255,.04);padding:10px 16px;border-radius:10px;
  74. border:1px solid rgba(255,46,196,.35);}
  75. .slider-box label{font-size:.75rem;letter-spacing:2px;text-transform:uppercase;
  76. color:var(--neon-pink);margin-bottom:6px;}
  77. input[type=range]{-webkit-appearance:none;width:160px;height:4px;
  78. background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  79. border-radius:2px;outline:none;}
  80. input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;
  81. border-radius:50%;background:#fff;box-shadow:0 0 12px var(--neon-cyan);cursor:pointer;}
  82. input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;
  83. background:#fff;box-shadow:0 0 12px var(--neon-cyan);cursor:pointer;}
  84. .tubes{display:flex;flex-direction:column;gap:12px;width:min(760px,100%);margin:12px 0;}
  85. .tube{position:relative;height:44px;border-radius:22px;background:rgba(255,255,255,.05);
  86. border:1px solid rgba(0,229,255,.3);overflow:hidden;}
  87. .tube .label{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  88. font-size:.8rem;letter-spacing:2px;color:var(--neon-cyan);z-index:2;}
  89. .tube .impulse{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  90. width:20px;height:20px;border-radius:50%;
  91. background:radial-gradient(circle,#fff,var(--neon-pink));
  92. box-shadow:0 0 20px var(--neon-pink);opacity:0;}
  93. .tube .impulse.run{animation:run linear forwards;}
  94. @keyframes run{0%{left:0;opacity:1;}100%{left:100%;opacity:1;}}
  95. .quiz-options{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px;}
  96. .quiz-options .btn{min-width:120px;}
  97. .quiz-options .btn.correct{background:var(--neon-green);color:#000;
  98. border-color:var(--neon-green);box-shadow:0 0 25px var(--neon-green);}
  99. .quiz-options .btn.wrong{background:#ff2e4c;color:#fff;border-color:#ff2e4c;}
  100. .modal{position:absolute;inset:0;background:rgba(0,0,0,.75);display:none;
  101. align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(4px);}
  102. .modal.active{display:flex;}
  103. .modal-content{background:linear-gradient(145deg,#160028,#0a0014);
  104. border:1px solid var(--neon-cyan);border-radius:14px;padding:28px;
  105. max-width:520px;width:90%;box-shadow:0 0 40px rgba(0,229,255,.5);text-align:center;}
  106. .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  107. gap:14px;width:min(800px,100%);margin:16px 0;}
  108. .card{perspective:1000px;height:130px;cursor:pointer;}
  109. .card-inner{position:relative;width:100%;height:100%;transition:transform .6s;
  110. transform-style:preserve-3d;}
  111. .card.flipped .card-inner{transform:rotateY(180deg);}
  112. .card-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  113. border-radius:12px;padding:12px;text-align:center;backface-visibility:hidden;
  114. border:1px solid var(--neon-purple);
  115. background:linear-gradient(145deg,rgba(162,89,255,.15),rgba(0,229,255,.08));
  116. box-shadow:0 0 20px rgba(162,89,255,.4);font-weight:700;}
  117. .card-face.back{transform:rotateY(180deg);font-weight:400;font-size:.85rem;
  118. border-color:var(--neon-cyan);color:#cfeaff;}
  119. .pairs{display:grid;grid-template-columns:1fr 1fr;gap:24px;width:min(700px,100%);margin:16px 0;}
  120. .pair-col{display:flex;flex-direction:column;gap:10px;}
  121. .pair-item{padding:10px 14px;border-radius:8px;cursor:pointer;
  122. border:1px solid var(--neon-cyan);background:rgba(0,229,255,.05);
  123. text-align:center;font-size:.9rem;transition:.2s;}
  124. .pair-item:hover{background:rgba(0,229,255,.2);}
  125. .pair-item.selected{background:var(--neon-pink);color:#000;}
  126. .pair-item.matched{opacity:.35;pointer-events:none;border-color:var(--neon-green);}
  127. .molecules{position:relative;width:min(700px,100%);height:120px;
  128. border:1px dashed rgba(0,229,255,.4);border-radius:12px;margin:16px 0;
  129. background:rgba(0,0,0,.3);}
  130. .molecule{position:absolute;top:50%;transform:translate(-50%,-50%);
  131. width:26px;height:26px;border-radius:50%;
  132. background:radial-gradient(circle,#fff,var(--neon-cyan));
  133. box-shadow:0 0 15px var(--neon-cyan);cursor:pointer;transition:left .3s;}
  134. .molecule.placed{background:radial-gradient(circle,#fff,var(--neon-green));
  135. box-shadow:0 0 15px var(--neon-green);}
  136. .target{position:absolute;top:50%;transform:translate(-50%,-50%);
  137. width:30px;height:30px;border-radius:50%;border:2px dashed var(--neon-pink);}
  138. .progress-quiz{width:min(600px,100%);height:6px;border-radius:3px;
  139. background:rgba(255,255,255,.1);margin:16px 0;overflow:hidden;}
  140. .progress-quiz div{height:100%;width:0;
  141. background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan));
  142. transition:width .4s;}
  143. .question{font-size:1.15rem;text-align:center;max-width:700px;margin:16px 0;line-height:1.5;}
  144. .result-score{font-size:4rem;font-weight:900;color:#fff;
  145. text-shadow:0 0 20px var(--neon-pink),0 0 40px var(--neon-purple);}
  146. .hint{font-size:.8rem;color:var(--neon-pink);letter-spacing:1px;
  147. margin-top:8px;min-height:1.2em;}
  148. .table{font-size:.85rem;color:#cfeaff;margin-top:8px;text-align:center;line-height:1.8;}
  149. .table span{color:var(--neon-cyan);font-weight:700;}
  150. </style>
  151. </head>
  152. <body>
  153. <div id="app">
  154. <div class="topbar">
  155. <span id="sceneLabel">СЦЕНА 1 / 7</span>
  156. <div class="progress"><div id="progressBar"></div></div>
  157. <button class="icon-btn" id="soundToggle" type="button">🔊 ЗВУК</button>
  158. </div>
  159. <!-- SCENE 1 -->
  160. <section class="scene active" id="scene1">
  161. <canvas id="bgCanvas" width="900" height="500"
  162. style="position:absolute;top:0;left:0;width:100%;height:100%;opacity:.35;pointer-events:none;"></canvas>
  163. <div style="position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;">
  164. <h1>Механические волны</h1>
  165. <p>Интерактивный курс: колебания, звук и среды распространения.</p>
  166. <p class="hint">Наушники приветствуются 🎧</p>
  167. <div style="margin-top:24px;">
  168. <button class="btn" id="btnStart" type="button">▶ Начать курс</button>
  169. <button class="btn pink" id="btnWhat" type="button">Что такое волна?</button>
  170. </div>
  171. </div>
  172. </section>
  173. <!-- SCENE 2 -->
  174. <section class="scene" id="scene2">
  175. <h2>Что такое механическая волна?</h2>
  176. <p>Это распространение колебаний в упругой среде. Частицы колеблются, но не переносятся вместе с волной.</p>
  177. <div class="canvas-wrap"><canvas id="chainCanvas" width="800" height="200"></canvas></div>
  178. <div class="controls">
  179. <div class="slider-box">
  180. <label>Частота: <span id="freqVal">3</span> Гц</label>
  181. <input type="range" id="freqSlider" min="1" max="10" value="3">
  182. </div>
  183. <div class="slider-box">
  184. <label>Амплитуда: <span id="ampVal">25</span> px</label>
  185. <input type="range" id="ampSlider" min="5" max="40" value="25">
  186. </div>
  187. <button class="btn green" id="btnPush" type="button">Толкнуть</button>
  188. </div>
  189. <p class="hint" id="scene2Hint">Толчков: 0 / 3</p>
  190. <button class="btn" id="btnNext2" type="button" disabled>Далее →</button>
  191. </section>
  192. <!-- SCENE 3 -->
  193. <section class="scene" id="scene3">
  194. <h2>Среда распространения. Скорость звука</h2>
  195. <p>Чем плотнее и упруже среда — тем быстрее идёт звук.</p>
  196. <div class="tubes">
  197. <div class="tube"><span class="label">Воздух ≈ 343 м/с</span><div class="impulse" data-speed="2.4"></div></div>
  198. <div class="tube"><span class="label">Вода ≈ 1480 м/с</span><div class="impulse" data-speed="1.2"></div></div>
  199. <div class="tube"><span class="label">Сталь ≈ 5100 м/с</span><div class="impulse" data-speed="0.5"></div></div>
  200. </div>
  201. <button class="btn" id="btnImpulse" type="button">Запустить импульс</button>
  202. <p class="question" style="margin-top:20px;">В какой среде звук распространяется быстрее всего?</p>
  203. <div class="quiz-options" id="quiz3">
  204. <button class="btn" data-ans="air" type="button">Воздух</button>
  205. <button class="btn" data-ans="water" type="button">Вода</button>
  206. <button class="btn" data-ans="steel" type="button">Сталь</button>
  207. </div>
  208. <button class="btn" id="btnNext3" type="button" disabled style="margin-top:20px;">Далее →</button>
  209. </section>
  210. <!-- SCENE 4 -->
  211. <section class="scene" id="scene4">
  212. <h2>Колебания: период, частота, амплитуда</h2>
  213. <div style="display:flex;flex-wrap:wrap;justify-content:center;gap:16px;">
  214. <div class="canvas-wrap"><canvas id="oscCanvas" width="360" height="260"></canvas></div>
  215. <div class="canvas-wrap"><canvas id="waveCanvas" width="360" height="260"></canvas></div>
  216. </div>
  217. <div class="controls">
  218. <div class="slider-box">
  219. <label>Амплитуда: <span id="ampVal2">60</span></label>
  220. <input type="range" id="ampSlider2" min="20" max="100" value="60">
  221. </div>
  222. <div class="slider-box">
  223. <label>Период: <span id="perVal">1.2</span> с</label>
  224. <input type="range" id="perSlider" min="4" max="30" value="12">
  225. </div>
  226. <button class="btn pink" id="btnCheck4" type="button">Проверить понимание</button>
  227. </div>
  228. <p class="table">Формулы: <span>T = 1/ν</span> · <span>ν = 1/T</span> · <span>v = λν</span></p>
  229. <button class="btn" id="btnNext4" type="button" disabled>Далее →</button>
  230. </section>
  231. <!-- SCENE 5 -->
  232. <section class="scene" id="scene5">
  233. <h2>Виды волн. Звук — продольная волна</h2>
  234. <div class="controls">
  235. <button class="btn" id="btnLong" type="button">Продольная</button>
  236. <button class="btn pink" id="btnTrans" type="button">Поперечная</button>
  237. </div>
  238. <div class="canvas-wrap"><canvas id="typeCanvas" width="800" height="200"></canvas></div>
  239. <p>Собери «звук»: кликни по молекуле — она встанет в ближайшую позицию сжатия/разрежения.</p>
  240. <div class="molecules" id="molecules"></div>
  241. <p class="hint" id="scene5Hint">Размещено: 0 / 6</p>
  242. <button class="btn" id="btnNext5" type="button" disabled>Далее →</button>
  243. </section>
  244. <!-- SCENE 6 -->
  245. <section class="scene" id="scene6">
  246. <h2>Применение звуковых волн</h2>
  247. <p>Нажми на карточку, чтобы узнать подробнее.</p>
  248. <div class="cards" id="cards">
  249. <div class="card"><div class="card-inner">
  250. <div class="card-face">Эхолокация</div>
  251. <div class="card-face back">Летучие мыши и дельфины определяют препятствия по отражённому ультразвуку.</div>
  252. </div></div>
  253. <div class="card"><div class="card-inner">
  254. <div class="card-face">УЗИ</div>
  255. <div class="card-face back">Медицинская визуализация: ультразвук отражается от границ тканей.</div>
  256. </div></div>
  257. <div class="card"><div class="card-inner">
  258. <div class="card-face">Сейсмология</div>
  259. <div class="card-face back">По сейсмическим волнам изучают строение Земли и землетрясения.</div>
  260. </div></div>
  261. <div class="card"><div class="card-inner">
  262. <div class="card-face">Музыка</div>
  263. <div class="card-face back">Струны и столбы воздуха создают стоячие волны — ноты.</div>
  264. </div></div>
  265. </div>
  266. <p>Собери пару: пример ↔ физическое явление.</p>
  267. <div class="pairs">
  268. <div class="pair-col" id="pairLeft"></div>
  269. <div class="pair-col" id="pairRight"></div>
  270. </div>
  271. <p class="hint" id="scene6Hint">Собрано пар: 0 / 4</p>
  272. <button class="btn" id="btnNext6" type="button" disabled>К тестированию →</button>
  273. </section>
  274. <!-- SCENE 7 -->
  275. <section class="scene" id="scene7">
  276. <h2 id="quizTitle">Итоговое тестирование</h2>
  277. <div class="progress-quiz"><div id="quizProgress"></div></div>
  278. <p class="question" id="quizQuestion">…</p>
  279. <div class="quiz-options" id="quizOptions"></div>
  280. <div id="quizResult" style="display:none;flex-direction:column;align-items:center;">
  281. <div class="result-score" id="finalScore">0</div>
  282. <p id="finalText" style="margin:16px 0;"></p>
  283. <button class="btn pink" id="btnRestart" type="button">Пройти заново</button>
  284. </div>
  285. </section>
  286. <!-- MODAL -->
  287. <div class="modal" id="modal">
  288. <div class="modal-content">
  289. <h2 id="modalTitle">…</h2>
  290. <p id="modalText" style="margin:16px 0;">…</p>
  291. <button class="btn" id="modalClose" type="button">Закрыть</button>
  292. </div>
  293. </div>
  294. </div>
  295. <script>
  296. /* ================= ЯДРО: НАВИГАЦИЯ + ЗВУК + МОДАЛКА ================= */
  297. var AudioCtx = window.AudioContext || window.webkitAudioContext;
  298. var audioCtx = null;
  299. var soundOn = true;
  300. function ensureAudio(){
  301. try{
  302. if(!audioCtx) audioCtx = new AudioCtx();
  303. if(audioCtx.state === 'suspended') audioCtx.resume();
  304. }catch(e){}
  305. }
  306. function beep(freq, dur, type, vol){
  307. if(!soundOn || !audioCtx) return;
  308. try{
  309. var o = audioCtx.createOscillator();
  310. var g = audioCtx.createGain();
  311. o.type = type || 'sine';
  312. o.frequency.value = freq || 440;
  313. g.gain.setValueAtTime(vol || 0.12, audioCtx.currentTime);
  314. g.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + (dur || 0.15));
  315. o.connect(g); g.connect(audioCtx.destination);
  316. o.start(); o.stop(audioCtx.currentTime + (dur || 0.15));
  317. }catch(e){}
  318. }
  319. function correctSound(){ beep(880,0.12,'triangle',0.18); setTimeout(function(){ beep(1320,0.15,'triangle',0.18); },110); }
  320. function wrongSound(){ beep(220,0.25,'sawtooth',0.15); }
  321. function clickSound(){ beep(600,0.06,'square',0.08); }
  322. var scenes = ['scene1','scene2','scene3','scene4','scene5','scene6','scene7'];
  323. var currentScene = 0;
  324. function goToScene(idx){
  325. if(idx < 0 || idx >= scenes.length) return;
  326. var all = document.querySelectorAll('.scene');
  327. for(var i=0;i<all.length;i++) all[i].classList.remove('active');
  328. document.getElementById(scenes[idx]).classList.add('active');
  329. currentScene = idx;
  330. document.getElementById('sceneLabel').textContent = 'СЦЕНА ' + (idx+1) + ' / ' + scenes.length;
  331. document.getElementById('progressBar').style.width = (idx/(scenes.length-1)*100) + '%';
  332. clickSound();
  333. if(idx === 3 && typeof startOscillators === 'function') startOscillators();
  334. if(idx === 4 && typeof initMolecules === 'function') initMolecules();
  335. if(idx === 5 && typeof initPairs === 'function') initPairs();
  336. if(idx === 6 && typeof startQuiz === 'function') startQuiz();
  337. }
  338. var modal = document.getElementById('modal');
  339. function openModal(title, text){
  340. document.getElementById('modalTitle').textContent = title;
  341. document.getElementById('modalText').textContent = text;
  342. modal.classList.add('active');
  343. }
  344. document.getElementById('modalClose').addEventListener('click', function(){
  345. modal.classList.remove('active'); clickSound();
  346. });
  347. modal.addEventListener('click', function(e){ if(e.target === modal) modal.classList.remove('active'); });
  348. document.getElementById('soundToggle').addEventListener('click', function(e){
  349. soundOn = !soundOn;
  350. e.target.textContent = soundOn ? '🔊 ЗВУК' : '🔇 ВЫКЛ';
  351. if(soundOn){ ensureAudio(); clickSound(); }
  352. });
  353. /* ================= ФОН ================= */
  354. var bgCanvas = document.getElementById('bgCanvas');
  355. var bgCtx = bgCanvas.getContext('2d');
  356. var bgT = 0;
  357. function drawBg(){
  358. var W = bgCanvas.width, H = bgCanvas.height;
  359. bgCtx.clearRect(0,0,W,H);
  360. for(var k=0;k<3;k++){
  361. bgCtx.beginPath();
  362. bgCtx.strokeStyle = k===0 ? 'rgba(255,46,196,.5)' : k===1 ? 'rgba(0,229,255,.5)' : 'rgba(162,89,255,.5)';
  363. bgCtx.lineWidth = 2;
  364. bgCtx.shadowBlur = 20;
  365. bgCtx.shadowColor = bgCtx.strokeStyle;
  366. for(var x=0;x<W;x+=4){
  367. var y = H/2 + Math.sin(x*0.02 + bgT + k*1.3) * (60 + k*20);
  368. if(x===0) bgCtx.moveTo(x,y); else bgCtx.lineTo(x,y);
  369. }
  370. bgCtx.stroke();
  371. }
  372. bgCtx.shadowBlur = 0;
  373. bgT += 0.03;
  374. requestAnimationFrame(drawBg);
  375. }
  376. drawBg();
  377. /* ================= ГЛАВНАЯ: КНОПКИ ================= */
  378. document.getElementById('btnStart').addEventListener('click', function(){
  379. ensureAudio();
  380. clickSound();
  381. goToScene(1); // ← ПЕРЕХОД НА СЦЕНУ 2 (начало курса)
  382. });
  383. document.getElementById('btnWhat').addEventListener('click', function(){
  384. ensureAudio();
  385. clickSound();
  386. openModal(
  387. 'Что такое волна?',
  388. 'Механическая волна — это процесс распространения колебаний в упругой среде. Частицы среды колеблются около положения равновесия, а сама волна переносит энергию, но не вещество. Примеры: звук в воздухе, волны на воде, сейсмические волны в Земле.'
  389. );
  390. });
  391. /* ================= SCENE 2: цепочка ================= */
  392. (function(){
  393. var c = document.getElementById('chainCanvas');
  394. var ctx = c.getContext('2d');
  395. var t = 0, amp = 25, freq = 3, pushTime = -999, pushes = 0;
  396. document.getElementById('freqSlider').addEventListener('input', function(e){
  397. freq = +e.target.value;
  398. document.getElementById('freqVal').textContent = freq;
  399. });
  400. document.getElementById('ampSlider').addEventListener('input', function(e){
  401. amp = +e.target.value;
  402. document.getElementById('ampVal').textContent = amp;
  403. });
  404. document.getElementById('btnPush').addEventListener('click', function(){
  405. pushTime = t; pushes++;
  406. document.getElementById('scene2Hint').textContent = 'Толчков: ' + pushes + ' / 3';
  407. beep(300 + pushes*100, 0.15, 'triangle', 0.2);
  408. if(pushes >= 3){
  409. document.getElementById('btnNext2').disabled = false;
  410. document.getElementById('scene2Hint').textContent = 'Отлично! Можно идти дальше.';
  411. }
  412. });
  413. document.getElementById('btnNext2').addEventListener('click', function(){ goToScene(2); });
  414. function loop(){
  415. var W = c.width, H = c.height;
  416. ctx.clearRect(0,0,W,H);
  417. var N = 12, spacing = W/(N+1);
  418. t += 0.03;
  419. var pts = [];
  420. for(var i=0;i<N;i++){
  421. var x = spacing*(i+1);
  422. var delay = i*0.25/Math.max(freq,1);
  423. var dt = t - pushTime - delay;
  424. var off;
  425. if(dt > 0){
  426. off = Math.sin(dt*freq*2*Math.PI) * amp * Math.exp(-dt*1.2);
  427. } else {
  428. off = Math.sin(t*freq*0.5) * amp * 0.15;
  429. }
  430. pts.push({x:x, y:H/2 + off});
  431. }
  432. ctx.strokeStyle = 'rgba(0,229,255,.5)';
  433. ctx.lineWidth = 2;
  434. ctx.shadowBlur = 10; ctx.shadowColor = '#00e5ff';
  435. for(var j=0;j<pts.length-1;j++){
  436. ctx.beginPath();
  437. ctx.moveTo(pts[j].x, pts[j].y);
  438. ctx.lineTo(pts[j+1].x, pts[j+1].y);
  439. ctx.stroke();
  440. }
  441. for(var k=0;k<pts.length;k++){
  442. ctx.beginPath();
  443. ctx.fillStyle = '#ff2ec4';
  444. ctx.shadowBlur = 20; ctx.shadowColor = '#ff2ec4';
  445. ctx.arc(pts[k].x, pts[k].y, 10, 0, Math.PI*2);
  446. ctx.fill();
  447. }
  448. ctx.shadowBlur = 0;
  449. requestAnimationFrame(loop);
  450. }
  451. loop();
  452. })();
  453. /* ================= SCENE 3: трубы + квиз ================= */
  454. document.getElementById('btnImpulse').addEventListener('click', function(){
  455. clickSound();
  456. var imps = document.querySelectorAll('#scene3 .impulse');
  457. for(var i=0;i<imps.length;i++){
  458. imps[i].style.animationDuration = imps[i].dataset.speed + 's';
  459. imps[i].classList.remove('run');
  460. void imps[i].offsetWidth;
  461. imps[i].classList.add('run');
  462. }
  463. });
  464. var q3 = document.querySelectorAll('#quiz3 .btn');
  465. for(var qi=0; qi<q3.length; qi++){
  466. (function(b){
  467. b.addEventListener('click', function(){
  468. if(b.dataset.ans === 'steel'){
  469. b.classList.add('correct'); correctSound();
  470. document.getElementById('btnNext3').disabled = false;
  471. } else {
  472. b.classList.add('wrong'); wrongSound();
  473. }
  474. });
  475. })(q3[qi]);
  476. }
  477. document.getElementById('btnNext3').addEventListener('click', function(){ goToScene(3); });
  478. /* ================= SCENE 4: маятник + волна ================= */
  479. var oscCanvas = document.getElementById('oscCanvas');
  480. var oscCtx = oscCanvas.getContext('2d');
  481. var waveCanvas = document.getElementById('waveCanvas');
  482. var waveCtx = waveCanvas.getContext('2d');
  483. var oscT = 0, oscAmp = 60, oscPeriod = 1.2;
  484. var oscRunning = false;
  485. document.getElementById('ampSlider2').addEventListener('input', function(e){
  486. oscAmp = +e.target.value;
  487. document.getElementById('ampVal2').textContent = oscAmp;
  488. });
  489. document.getElementById('perSlider').addEventListener('input', function(e){
  490. oscPeriod = +e.target.value / 10;
  491. document.getElementById('perVal').textContent = oscPeriod.toFixed(1);
  492. });
  493. function startOscillators(){
  494. if(oscRunning) return;
  495. oscRunning = true;
  496. oscT = 0;
  497. requestAnimationFrame(drawOsc);
  498. }
  499. function drawOsc(){
  500. oscT += 0.04;
  501. var W = oscCanvas.width, H = oscCanvas.height;
  502. oscCtx.clearRect(0,0,W,H);
  503. // ось
  504. oscCtx.strokeStyle = 'rgba(0,229,255,.3)';
  505. oscCtx.lineWidth = 1;
  506. oscCtx.beginPath(); oscCtx.moveTo(W/2,30); oscCtx.lineTo(W/2,H-30); oscCtx.stroke();
  507. // маятник
  508. var ang = Math.sin(oscT* (2*Math.PI/oscPeriod)) * (oscAmp/200);
  509. var len = 120, cx = W/2, cy = 40;
  510. var bx = cx + Math.sin(ang)*len;
  511. var by = cy + Math.cos(ang)*len;
  512. oscCtx.strokeStyle = '#a259ff';
  513. oscCtx.lineWidth = 2;
  514. oscCtx.shadowBlur = 12; oscCtx.shadowColor = '#a259ff';
  515. oscCtx.beginPath(); oscCtx.moveTo(cx, cy); oscCtx.lineTo(bx, by); oscCtx.stroke();
  516. oscCtx.beginPath();
  517. oscCtx.fillStyle = '#ff2ec4';
  518. oscCtx.shadowBlur = 25; oscCtx.shadowColor = '#ff2ec4';
  519. oscCtx.arc(bx, by, 14, 0, Math.PI*2);
  520. oscCtx.fill();
  521. oscCtx.shadowBlur = 0;
  522. // правый — осциллограмма волны
  523. var WW = waveCanvas.width, WH = waveCanvas.height;
  524. waveCtx.clearRect(0,0,WW,WH);
  525. waveCtx.strokeStyle = 'rgba(0,229,255,.2)';
  526. waveCtx.lineWidth = 1;
  527. waveCtx.beginPath(); waveCtx.moveTo(0, WH/2); waveCtx.lineTo(WW, WH/2); waveCtx.stroke();
  528. waveCtx.strokeStyle = '#00e5ff';
  529. waveCtx.lineWidth = 2;
  530. waveCtx.shadowBlur = 15; waveCtx.shadowColor = '#00e5ff';
  531. waveCtx.beginPath();
  532. for(var x=0; x<WW; x++){
  533. var y = WH/2 + Math.sin((x/WW)*Math.PI*4 + oscT*(2*Math.PI/oscPeriod)) * oscAmp;
  534. if(x===0) waveCtx.moveTo(x,y); else waveCtx.lineTo(x,y);
  535. }
  536. waveCtx.stroke();
  537. waveCtx.shadowBlur = 0;
  538. requestAnimationFrame(drawOsc);
  539. }
  540. document.getElementById('btnCheck4').addEventListener('click', function(){
  541. ensureAudio();
  542. openModal(
  543. 'Проверь себя',
  544. 'Если период T = 2 с, то частота ν = 1/T = 0,5 Гц. А если частота ν = 4 Гц, то период T = 1/ν = 0,25 с. Запомни: T и ν — взаимно обратные величины.'
  545. );
  546. document.getElementById('btnNext4').disabled = false;
  547. correctSound();
  548. });
  549. document.getElementById('btnNext4').addEventListener('click', function(){ goToScene(4); });
  550. /* ================= SCENE 5: виды волн + молекулы ================= */
  551. var typeCanvas = document.getElementById('typeCanvas');
  552. var typeCtx = typeCanvas.getContext('2d');
  553. var typeT = 0;
  554. var waveType = 'long'; // long | trans
  555. document.getElementById('btnLong').addEventListener('click', function(){
  556. waveType = 'long'; clickSound(); initMolecules(); resetNext5();
  557. });
  558. document.getElementById('btnTrans').addEventListener('click', function(){
  559. waveType = 'trans'; clickSound(); initMolecules(); resetNext5();
  560. });
  561. function resetNext5(){
  562. document.getElementById('btnNext5').disabled = true;
  563. document.getElementById('scene5Hint').textContent = 'Размещено: 0 / 6';
  564. }
  565. function drawType(){
  566. var W = typeCanvas.width, H = typeCanvas.height;
  567. typeCtx.clearRect(0,0,W,H);
  568. typeT += 0.05;
  569. if(waveType === 'long'){
  570. // продольная — сжатия/разрежения
  571. var N = 40;
  572. for(var i=0;i<N;i++){
  573. var baseX = (i+1) * (W/(N+1));
  574. var shift = Math.sin(typeT - i*0.3) * 12;
  575. var x = baseX + shift;
  576. var density = 0.5 + 0.5 * Math.sin(typeT - i*0.3);
  577. typeCtx.beginPath();
  578. typeCtx.fillStyle = 'rgba(255,46,196,' + (0.4 + density*0.6) + ')';
  579. typeCtx.shadowBlur = 15; typeCtx.shadowColor = '#ff2ec4';
  580. typeCtx.arc(x, H/2, 6 + density*3, 0, Math.PI*2);
  581. typeCtx.fill();
  582. }
  583. typeCtx.shadowBlur = 0;
  584. typeCtx.fillStyle = '#00e5ff';
  585. typeCtx.font = '14px Segoe UI';
  586. typeCtx.fillText('Продольная (звук в воздухе)', 20, 30);
  587. } else {
  588. // поперечная — синусоида
  589. typeCtx.strokeStyle = 'rgba(0,229,255,.4)';
  590. typeCtx.lineWidth = 2;
  591. typeCtx.beginPath();
  592. for(var x2=0; x2<W; x2+=4){
  593. var y2 = H/2 + Math.sin(x2*0.02 + typeT) * 50;
  594. if(x2===0) typeCtx.moveTo(x2,y2); else typeCtx.lineTo(x2,y2);
  595. }
  596. typeCtx.stroke();
  597. for(var k=0;k<20;k++){
  598. var xx = (k+1) * (W/21);
  599. var yy = H/2 + Math.sin(xx*0.02 + typeT) * 50;
  600. typeCtx.beginPath();
  601. typeCtx.fillStyle = '#ff2ec4';
  602. typeCtx.shadowBlur = 15; typeCtx.shadowColor = '#ff2ec4';
  603. typeCtx.arc(xx, yy, 6, 0, Math.PI*2);
  604. typeCtx.fill();
  605. }
  606. typeCtx.shadowBlur = 0;
  607. typeCtx.fillStyle = '#00e5ff';
  608. typeCtx.font = '14px Segoe UI';
  609. typeCtx.fillText('Поперечная (волны на воде, струна)', 20, 30);
  610. }
  611. requestAnimationFrame(drawType);
  612. }
  613. drawType();
  614. /* молекулы */
  615. var molPlaced = 0;
  616. function initMolecules(){
  617. var box = document.getElementById('molecules');
  618. box.innerHTML = '';
  619. molPlaced = 0;
  620. var W = box.clientWidth || 700;
  621. // цели (позиции сжатия/разрежения)
  622. var targetPos = [0.12, 0.25, 0.40, 0.55, 0.70, 0.85];
  623. window._molTargets = targetPos.map(function(p){ return p*W; });
  624. // пунктирные цели
  625. targetPos.forEach(function(p){
  626. var t = document.createElement('div');
  627. t.className = 'target';
  628. t.style.left = (p*100) + '%';
  629. box.appendChild(t);
  630. });
  631. // молекулы в случайных позициях
  632. for(var i=0;i<6;i++){
  633. (function(idx){
  634. var m = document.createElement('div');
  635. m.className = 'molecule';
  636. var startPct = [0.05, 0.20, 0.35, 0.50, 0.65, 0.80][idx] * 100;
  637. // перемешаем стартовые
  638. startPct = 5 + Math.random()*90;
  639. m.style.left = startPct + '%';
  640. m.dataset.idx = idx;
  641. m.addEventListener('click', function(){
  642. if(m.classList.contains('placed')) return;
  643. // ставим в ближайшую незанятую цель
  644. var used = {};
  645. var placed = document.querySelectorAll('#molecules .molecule.placed');
  646. for(var j=0;j<placed.length;j++) used[placed[j].dataset.target] = true;
  647. var best = -1, bestDist = 1e9;
  648. for(var k=0;k<targetPos.length;k++){
  649. if(used[k]) continue;
  650. var d = Math.abs(targetPos[k]*100 - parseFloat(m.style.left));
  651. if(d < bestDist){ bestDist = d; best = k; }
  652. }
  653. if(best === -1) return;
  654. m.style.left = (targetPos[best]*100) + '%';
  655. m.dataset.target = best;
  656. m.classList.add('placed');
  657. molPlaced++;
  658. beep(500 + molPlaced*80, 0.1, 'triangle', 0.15);
  659. document.getElementById('scene5Hint').textContent = 'Размещено: ' + molPlaced + ' / 6';
  660. if(molPlaced >= 6){
  661. document.getElementById('btnNext5').disabled = false;
  662. document.getElementById('scene5Hint').textContent = 'Отлично! Звук собран 🎵';
  663. correctSound();
  664. }
  665. });
  666. box.appendChild(m);
  667. })(i);
  668. }
  669. }
  670. document.getElementById('btnNext5').addEventListener('click', function(){ goToScene(5); });
  671. /* ================= SCENE 6: карточки + пары ================= */
  672. var pairData = [
  673. { left: 'Эхолокация', right: 'Отражение ультразвука' },
  674. { left: 'УЗИ', right: 'Отражение от тканей' },
  675. { left: 'Сейсмология', right: 'Сейсмические волны' },
  676. { left: 'Музыка', right: 'Стоячие волны' }
  677. ];
  678. var pairsDone = 0;
  679. var selectedLeft = null;
  680. function initPairs(){
  681. pairsDone = 0;
  682. selectedLeft = null;
  683. document.getElementById('scene6Hint').textContent = 'Собрано пар: 0 / 4';
  684. document.getElementById('btnNext6').disabled = true;
  685. var leftCol = document.getElementById('pairLeft');
  686. var rightCol = document.getElementById('pairRight');
  687. leftCol.innerHTML = ''; rightCol.innerHTML = '';
  688. // левая колонка по порядку
  689. pairData.forEach(function(p, i){
  690. var d = document.createElement('div');
  691. d.className = 'pair-item';
  692. d.textContent = p.left;
  693. d.dataset.idx = i;
  694. d.dataset.side = 'left';
  695. d.addEventListener('click', function(){
  696. if(d.classList.contains('matched')) return;
  697. var sel = document.querySelectorAll('#pairLeft .pair-item.selected');
  698. for(var s=0;s<sel.length;s++) sel[s].classList.remove('selected');
  699. d.classList.add('selected');
  700. selectedLeft = d;
  701. clickSound();
  702. });
  703. leftCol.appendChild(d);
  704. });
  705. // правая колонка перемешана
  706. var shuffled = pairData.map(function(p,i){ return {text:p.right, idx:i}; });
  707. shuffled.sort(function(){ return Math.random()-0.5; });
  708. shuffled.forEach(function(item){
  709. var d = document.createElement('div');
  710. d.className = 'pair-item';
  711. d.textContent = item.text;
  712. d.dataset.idx = item.idx;
  713. d.dataset.side = 'right';
  714. d.addEventListener('click', function(){
  715. if(d.classList.contains('matched')) return;
  716. if(!selectedLeft){ wrongSound(); return; }
  717. if(selectedLeft.dataset.idx === d.dataset.idx){
  718. selectedLeft.classList.add('matched');
  719. selectedLeft.classList.remove('selected');
  720. d.classList.add('matched');
  721. selectedLeft = null;
  722. pairsDone++;
  723. correctSound();
  724. document.getElementById('scene6Hint').textContent = 'Собрано пар: ' + pairsDone + ' / 4';
  725. if(pairsDone >= 4){
  726. document.getElementById('btnNext6').disabled = false;
  727. document.getElementById('scene6Hint').textContent = 'Все пары собраны! 🎉';
  728. }
  729. } else {
  730. wrongSound();
  731. d.classList.add('wrong');
  732. setTimeout(function(){ d.classList.remove('wrong'); }, 400);
  733. }
  734. });
  735. rightCol.appendChild(d);
  736. });
  737. }
  738. // карточки — переворот
  739. var cards = document.querySelectorAll('#cards .card');
  740. for(var ci=0; ci<cards.length; ci++){
  741. cards[ci].addEventListener('click', function(){
  742. this.classList.toggle('flipped');
  743. clickSound();
  744. });
  745. }
  746. document.getElementById('btnNext6').addEventListener('click', function(){ goToScene(6); });
  747. /* ================= SCENE 7: ТЕСТ ================= */
  748. var quizQuestions = [
  749. { q: 'Что переносит механическая волна?', a: ['Вещество', 'Энергию', 'Заряд', 'Массу'], c: 1 },
  750. { q: 'В какой среде звук распространяется быстрее всего?', a: ['Воздух', 'Вода', 'Сталь', 'Вакуум'], c: 2 },
  751. { q: 'Формула связи периода и частоты:', a: ['T = ν', 'T = 1/ν', 'T = ν²', 'T = 2ν'], c: 1 },
  752. { q: 'Звук — это какая волна?', a: ['Поперечная', 'Продольная', 'Электромагнитная', 'Стоячая'], c: 1 },
  753. { q: 'Скорость звука в воздухе примерно равна:', a: ['34 м/с', '343 м/с', '3430 м/с', '3 м/с'], c: 1 },
  754. { q: 'Что такое амплитуда?', a: ['Число колебаний в секунду', 'Максимальное отклонение от равновесия', 'Время одного колебания', 'Длина волны'], c: 1 },
  755. { q: 'Единица измерения частоты:', a: ['Гц', 'м', 'с', 'кг'], c: 0 },
  756. { q: 'Могут ли механические волны распространяться в вакууме?', a: ['Да', 'Нет', 'Только звук', 'Только свет'], c: 1 },
  757. { q: 'Связь скорости, длины волны и частоты:', a: ['v = λ/ν', 'v = λ·ν', 'v = ν/λ', 'v = λ+ν'], c: 1 },
  758. { q: 'Ультразвук — это:', a: ['ν < 20 Гц', 'ν > 20 кГц', 'ν = 20 Гц', 'Любой звук'], c: 1 }
  759. ];
  760. var qIndex = 0, qScore = 0;
  761. function startQuiz(){
  762. qIndex = 0; qScore = 0;
  763. document.getElementById('quizResult').style.display = 'none';
  764. document.getElementById('quizQuestion').style.display = 'block';
  765. document.getElementById('quizOptions').style.display = 'flex';
  766. document.getElementById('quizTitle').textContent = 'Итоговое тестирование';
  767. showQuestion();
  768. }
  769. function showQuestion(){
  770. var q = quizQuestions[qIndex];
  771. document.getElementById('quizProgress').style.width = (qIndex / quizQuestions.length * 100) + '%';
  772. document.getElementById('quizQuestion').textContent = (qIndex+1) + '. ' + q.q;
  773. var opts = document.getElementById('quizOptions');
  774. opts.innerHTML = '';
  775. q.a.forEach(function(text, i){
  776. var b = document.createElement('button');
  777. b.className = 'btn';
  778. b.type = 'button';
  779. b.textContent = text;
  780. b.addEventListener('click', function(){
  781. // блокируем остальные
  782. var all = opts.querySelectorAll('.btn');
  783. for(var k=0;k<all.length;k++) all[k].disabled = true;
  784. if(i === q.c){
  785. b.classList.add('correct');
  786. qScore++;
  787. correctSound();
  788. } else {
  789. b.classList.add('wrong');
  790. all[q.c].classList.add('correct');
  791. wrongSound();
  792. }
  793. setTimeout(function(){
  794. qIndex++;
  795. if(qIndex < quizQuestions.length){
  796. showQuestion();
  797. } else {
  798. showResult();
  799. }
  800. }, 900);
  801. });
  802. opts.appendChild(b);
  803. });
  804. }
  805. function showResult(){
  806. document.getElementById('quizProgress').style.width = '100%';
  807. document.getElementById('quizQuestion').style.display = 'none';
  808. document.getElementById('quizOptions').style.display = 'none';
  809. var res = document.getElementById('quizResult');
  810. res.style.display = 'flex';
  811. var pct = Math.round(qScore / quizQuestions.length * 100);
  812. document.getElementById('finalScore').textContent = qScore + ' / ' + quizQuestions.length;
  813. var grade = pct >= 90 ? 'Отлично! 🏆' : pct >= 70 ? 'Хорошо! 👍' : pct >= 50 ? 'Неплохо, но повтори материал.' : 'Попробуй пройти курс заново.';
  814. document.getElementById('finalText').textContent = pct + '% — ' + grade;
  815. if(pct >= 70) correctSound(); else wrongSound();
  816. }
  817. document.getElementById('btnRestart').addEventListener('click', function(){
  818. clickSound();
  819. goToScene(0);
  820. });
  821. </script>