three实现三维光影解谜游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维光影解谜游戏，转动光源，阴影退去之处才会浮出可行走的石板；一旦脚下的光熄灭，就会坠入黑暗。共 4 章，含音效、粒子、移动端虚拟按键。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="theme-color" content="#04060d">
<title>光径 · Where Light Falls</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@300;400;700&family=Noto+Serif+SC:wght@600&display=swap" rel="stylesheet">
<style>
:root{ --gold:#ffc46b; --cyan:#5df2d8; --ink:#04060d; --panel:rgba(9,13,25,.72); --line:rgba(255,196,107,.32); }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:#dfe6f5;font-family:'Noto Sans SC',sans-serif;overflow:hidden;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0}
canvas{display:block;touch-action:none;cursor:grab}
canvas.drag{cursor:grabbing}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:5;background:radial-gradient(ellipse at 50% 42%,transparent 52%,rgba(2,4,10,.62) 100%)}
#grain{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:.05;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.6"/></svg>')}
.hud{position:fixed;z-index:10;transition:opacity .6s}
body:not(.ingame) .hud{opacity:0;pointer-events:none}
#hudLeft{top:20px;left:22px}
#chapter{font-family:'Ma Shan Zheng';font-size:32px;line-height:1;color:var(--gold);text-shadow:0 0 22px rgba(255,170,70,.45)}
#chapHint{margin-top:8px;font-size:12.5px;letter-spacing:.12em;color:#9fb0d0}
#hudRight{top:20px;right:22px;display:flex;align-items:center;gap:14px}
.stat{font-size:12px;color:#8fa2c4;letter-spacing:.1em;text-align:right}
.stat b{display:block;font-size:17px;color:#eef3ff;font-weight:700;font-variant-numeric:tabular-nums}
#dial{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;position:relative;background:rgba(255,196,107,.05);flex:none}
#dial::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#6f7fa3}
#dialRot{position:absolute;inset:0}
#dialDot{position:absolute;top:3px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
#muteBtn{width:38px;height:38px;border:1px solid var(--line);background:var(--panel);color:var(--gold);border-radius:6px;font-size:16px;cursor:pointer}
#muteBtn:hover{background:rgba(255,196,107,.14)}
#legend{bottom:16px;left:50%;transform:translateX(-50%);font-size:12px;color:#8fa2c4;letter-spacing:.08em;background:var(--panel);border:1px solid rgba(90,110,160,.25);padding:8px 18px;border-radius:6px;white-space:nowrap}
kbd{display:inline-block;min-width:20px;text-align:center;padding:2px 6px;margin:0 2px;border:1px solid rgba(255,196,107,.4);border-bottom-width:2px;border-radius:4px;background:#141b2e;color:var(--gold);font-family:inherit;font-size:11px}
#toast{top:16%;left:50%;transform:translateX(-50%) translateY(8px);z-index:12;font-family:'Ma Shan Zheng';font-size:30px;color:#ffe6bd;text-shadow:0 0 26px rgba(255,170,70,.5);opacity:0;transition:all .5s;pointer-events:none;position:fixed;letter-spacing:.2em}
#toast.show{opacity:1;t.........完整代码请登录后点击上方下载按钮下载查看