three实现三维扔炮竹炸毁东西闯关游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维扔炮竹炸毁东西闯关游戏代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爆竹贺岁 · 三维炸翻全场</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0a0c1e;font-family:'Noto Sans SC',sans-serif;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0}
canvas{display:block;touch-action:none}
#vignette{position:fixed;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse at center,transparent 55%,rgba(6,2,10,.55) 100%)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
.panel{background:linear-gradient(160deg,rgba(64,12,16,.92),rgba(32,8,11,.92));border:2px solid #d9a441;border-radius:12px;box-shadow:0 0 0 3px rgba(90,20,24,.5),0 8px 24px rgba(0,0,0,.5),inset 0 0 24px rgba(0,0,0,.45);color:#ffe9c4}
#panel-left{position:absolute;top:16px;left:16px;min-width:200px;padding:14px 18px 12px}
.hud-title{font-family:'Ma Shan Zheng';font-size:27px;color:#ffd76a;letter-spacing:5px;text-shadow:0 0 14px rgba(255,150,40,.55);line-height:1;margin-bottom:10px;border-bottom:1px dashed rgba(217,164,65,.4);padding-bottom:8px}
.row{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:3px 0;letter-spacing:2px}
.row b{font-size:18px;color:#ffd76a;display:inline-block}
.row .ico{font-size:14px;letter-spacing:1px}
.row .ico.low{color:#ff6655;animation:blink .5s infinite alternate}
@keyframes blink{to{opacity:.35}}
#score.pop{animation:scorePop .3s ease}
@keyframes scorePop{50%{transform:scale(1.45);color:#fff}}
#panel-right{position:absolute;top:16px;right:16px;display:flex;gap:10px;pointer-events:auto}
button.icon{width:46px;height:46px;font-size:20px;border-radius:11px;cursor:pointer;color:#ffd76a;background:linear-gradient(160deg,rgba(64,12,16,.92),rgba(32,8,11,.92));border:2px solid #d9a441;transition:.15s;box-shadow:0 4px 12px rgba(0,0,0,.4)}
button.icon:hover{transform:translateY(-2px);box-shadow:0 0 16px rgba(255,160,50,.4)}
#hint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(24,9,12,.7);border:1px solid rgba(217,164,65,.5);padding:8px 20px;border-radius:999px;color:#f3d9a4;font-size:13px;letter-spacing:1px;white-space:nowrap}
kbd{background:#3a1114;border:1px solid #d9a441;border-radius:5px;padding:1px 7px;font-size:12px;color:#ffd76a;margin:0 2px;font-family:inherit}
#banner{position:absolute;top:26%;left:50%;transform:translate(-50%,-50%);font-family:'Ma Shan Zheng';font-size:86px;color:#ffd76a;text-shadow:0 4px 0 #7a1218,0 0 36px rgba(255,120,40,.7);opacity:0;letter-spacing:12px;white-space:nowrap}
#banner.show{animation:bannerIn 1.9s ease forwards}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}30%{transform:translate(-50%,-50%) scale(1)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
#combo{position:absolute;top:13%;left:50%;transform:translateX(-50%);font-family:'Ma Shan Zheng';font-size:46px;color:#ffdf8a;text-shadow:0 0 18px rgba(255,140,40,.85),0 3px 0 #7a1218;opacity:0;letter-spacing:5px}
#combo.show{animation:comboPop 1.1s ease forwards}
@keyframes comboPop{0%{opacity:0;transform:translateX(-50%) scale(.5)}20%{opacity:1;transform:translateX(-50%) scale(1.18)}36%{transform:translateX(-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.05)}}
#floats{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.float{position:absolute;left:0;top:0;font-family:'Ma Shan Zheng';font-size:27px;color:#ffd76a;text-shadow:0 2px 2px #000,0 0 12px rgba(255,140,40,.6);white-space:nowrap;will-change:transform,opacity}
.float.small{font-size:18px;color:#ffe9c4;font-family:'Noto Sans SC';font-weight:700}

/* ---------- 覆盖层 ---------- */
#overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(16,6,10,.2) 0%,rgba(10,4,8,.8) 100%);padding:20px}
#overlay.hidden{display:none}
.card{position:relative;background:linear-gradient(165deg,#5c1118 0%,#3a0a10 55%,#2a070b 100%);border:3px solid #d9a441;border-radius:16px;padding:38px 56px 36px;text-align:center;box-shadow:0 0 0 6px rgba(90,20,24,.55),0 20px 70px rgba(0,0,0,.6),0 0 60px rgba(255,120,40,.2),inset 0 0 44px rgba(0,0,0,.5);max-width:620px;pointer-events:auto}
.card::before,.card::after{content:'❖';position:absolute;color:#d9a441;font-size:18px;opacity:.9}
.card::before{top:10px;left:14px}.card::after{bottom:10px;right:14px}
.lant{display:inline-block;font-size:42px;animation:swing 2.6s ease-in-out infinite;transform-origin:top center;filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
.lant.r{animation-delay:-1.3s}
@keyframes swing{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-8deg)}}
.card h1{font-family:'Ma Shan Zheng';font-size:74px;color:#ffd76a;letter-spacing:14px;text-shadow:0 3px 0 #6e0f16,0 0 32px rgba(255,140,40,.55);line-height:1.15;margin:2px 0 4px}
.card h2{font-family:'Ma Shan Zheng';font-size:54px;letter-spacing:8px;margin-bottom:6px}
h2.win{color:#ffd76a;text-shadow:0 3px 0 #6e0f1.........完整代码请登录后点击上方下载按钮下载查看