js+css实现多关卡物理电路接电接线游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现多关卡物理电路接电接线游戏代码，正确接电，防止触电。

下面为部分代码预览，完整代码请点击下载或在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=Noto+Sans+SC:wght@400;500;700;900&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
<style>
:root{--bg:#0c1118;--panel:#161e2a;--panel2:#141c28;--line:#2e3d51;--amber:#ffb02e;--amber2:#ff9d1f;--copper:#e0913f;--red:#ff5148;--blue:#3aa0ff;--green:#2fbf5f;--txt:#e8eef5;--dim:#93a4b8}
*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{font-family:'Noto Sans SC',"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(140,170,210,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,210,.045) 1px,transparent 1px);background-size:44px 44px}
.glowA,.glowB{position:fixed;border-radius:50%;filter:blur(90px);z-index:0;pointer-events:none;opacity:.5}
.glowA{width:480px;height:480px;background:rgba(255,157,31,.13);top:-140px;left:-120px;animation:drift 16s ease-in-out infinite alternate}
.glowB{width:520px;height:520px;background:rgba(58,130,246,.11);bottom:-180px;right:-140px;animation:drift 20s ease-in-out infinite alternate-reverse}
@keyframes drift{to{transform:translate(70px,50px) scale(1.12)}}
.df{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;letter-spacing:.5px}
.hidden{display:none!important}
header{position:relative;z-index:2;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 20px;background:#121924ee;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand .bolt{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:24px;background:linear-gradient(180deg,#ffc857,#ff9d1f);color:#2a1a02;border:2px solid #c97a00;box-shadow:0 0 22px rgba(255,176,46,.45);animation:boltBeat 2.2s ease-in-out infinite}
@keyframes boltBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.brand b{font-family:'ZCOOL QingKe HuangYou',sans-serif;font-size:21px;letter-spacing:1px;display:block;line-height:1.1}
.brand small{color:var(--dim);font-size:10px;letter-spacing:3px}
.pips{display:flex;gap:8px;margin:0 auto}
.pips span{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;font-weight:900;font-size:14px;background:#1c2634;border:2px solid #33445c;color:var(--dim);transition:.25s}
.pips span.done{background:linear-gradient(180deg,#ffc857,#ff9d1f);border-color:#c97a00;color:#2a1a02}
.pips span.cur{border-color:var(--amber);color:var(--amber);animation:pipPulse 1.4s infinite}
@keyframes pipPulse{50%{box-shadow:0 0 0 5px rgba(255,176,46,.15)}}
.stats{display:flex;align-items:center;gap:16px}
.stat{text-align:center}
.stat label{display:block;font-size:11px;color:var(--dim);letter-spacing:2px}
.stat b{font-family:'ZCOOL QingKe HuangYou',sans-serif;font-size:20px;color:var(--amber)}
#fuses{display:flex;gap:5px;justify-content:center;padding-top:3px}
.fuse{width:13px;height:26px;border-radius:4px;position:relative;transition:.3s;background:linear-gradient(180deg,#f7d9a0,#e0913f);border:2px solid #7a5a20;box-shadow:0 0 8px rgba(255,176,46,.35)}
.fuse::before,.fuse::after{content:"";position:absolute;left:1px;right:1px;height:4px;background:#c9d6e5;border-radius:2px}
.fuse::before{top:-2px}.fuse::after{bottom:-2px}
.fuse.blown{background:#2a3140;border-color:#3a4356;filter:grayscale(1);transform:rotate(10deg);box-shadow:none}
.fuse.blown::after{content:"✕";background:none;color:var(--red);font-size:10px;font-weight:900;line-height:4px;text-align:center}
.iconbtn{width:38px;height:38px;border-radius:9px;background:#26313f;border:2px solid #3b4c61;color:var(--txt);font-size:17px;cursor:pointer;transition:.15s}
.iconbtn:hover{border-color:var(--amber);transform:translateY(-2px)}
.hazard{height:9px;background:repeating-linear-gradient(45deg,var(--amber) 0 14px,#161c25 14px 28px)}
main#game{position:relative;z-index:1;display:grid;grid-template-columns:1fr 320px;gap:18px;max-width:1280px;margin:0 auto;padding:18px;user-select:none}
.board-panel{position:relative;background:var(--panel2);border:2px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:inset 0 0 70px rgba(0,0,0,.55),0 12px 34px rgba(0,0,0,.45);background-image:linear-gradient(rgba(140,170,210,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,210,.05) 1px,transparent 1px);background-size:46px 46px}
.board-panel.shake{animation:shake .55s}
@keyframes shake{0%,100%{transform:translate(0)}15%{transform:translate(-9px,4px) rotate(-.7deg)}30%{transform:translate(8px,-5px) rotate(.6deg)}45%{transform:translate(-7px,-3px)}60%{transform:translate(6px,4px) rotate(.5deg)}75%{transform:translate(-4px,2px)}90%{transform:translate(3px,-2px)}}
.screw{position:absolute;width:14px;height:14px;border-radius:50%;z-index:3;background:radial-gradient(circle at 35% 35%,#8b9bb0,#3c4a5d 70%)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:2px;background:#1b2430;transform:rotate(38deg)}
.screw.tl{top:8px;left:8px}.screw.tr{top:8px;right:8px}.screw.bl{bottom:8px;left:8px}.screw.br{bottom:8px;right:8px}
#boardWrap{padding:6px}
svg#board{width:100%;height:auto;display:block}
.side-panel{display:flex;flex-direction:column;gap:13px}
.card{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:14px 15px}
.card h3{font-family:'ZCOOL QingKe HuangYou',sans-serif;color:var(--amber);font-size:18px;letter-spacing:1px;margin-bottom:8px;font-weight:400}
.card p{font-size:13.5px;line-height:1.7;color:#c6d4e4}
.chip{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:6px;font-size:12px;font-weight:700;background:#22304466;border:1px dashed #3d5068;color:var(--dim)}
.hintbox{margin-top:8px;font-size:12.5px;color:#7f93ab;line-height:1.6}
.hintbox b{color:#4ade80}
.warnNote{display:none;margin-top:8px;padding:6px 9px;border-radius:7px;font-size:12.5px;font-weight:700;background:rgba(255,81,72,.12);border:1px solid rgba(255,81,72,.5);color:#ff8d85}
.btn{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;font-weight:400;letter-spacing:1px;border:none;cursor:pointer;border-radius:10px;padding:10px 16px;font-size:16px;transition:transform .12s,box-shadow .12s,filter .12s}
.btn.primary{background:linear-gradient(180deg,#ffc857,#ff9d1f);color:#2a1a02;border:2px solid #c97a00;box-shadow:0 5px 0 #8a4d00,0 8px 20px rgba(255,157,31,.22)}
.btn.primary:hover{filter:brightness(1.........完整代码请登录后点击上方下载按钮下载查看