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>实弹靶场 · STEEL RANGE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Rajdhani:wght@500;600;700&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --amber:#ffb648; --amber2:#ffd28a; --red:#ff5340; --ink:#0a0d12;
  --panel:rgba(10,14,20,.82); --line:rgba(255,182,72,.30); --dim:#8fa0b3;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);
  font-family:'Rajdhani','Noto Sans SC',system-ui,sans-serif;color:#e8edf4;user-select:none}
canvas{display:block}

/* ---------- 危险条纹 ---------- */
.hz{position:fixed;left:0;right:0;height:10px;z-index:40;pointer-events:none;opacity:.9;
  background:repeating-linear-gradient(-45deg,#e8a92c 0 16px,#14171d 16px 32px)}
.hz.top{top:0}.hz.bot{bottom:0}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
.hpanel{position:absolute;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--amber);padding:10px 18px;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.lbl{font-size:10px;letter-spacing:3px;color:var(--dim);font-weight:600}
#scoreBox{top:26px;left:26px}
#scoreVal{font-family:'Rajdhani';font-weight:700;font-size:46px;line-height:1;color:var(--amber2);
  text-shadow:0 0 14px rgba(255,170,60,.35)}
#scoreVal.bump{animation:bump .18s}
@keyframes bump{40%{transform:scale(1.16);color:#fff}}
#streakVal{font-size:14px;font-weight:700;color:#ff8b4a;height:18px;letter-spacing:1px}
#timeBox{top:26px;right:26px;text-align:right;border-left:none;border-right:3px solid var(--amber);
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px)}
#timeVal{font-family:'Rajdhani';font-weight:700;font-size:44px;line-height:1;color:var(--amber2)}
#timeVal.low{color:var(--red);animation:blink .5s infinite alternate}
@keyframes blink{to{opacity:.45}}
#ammoRow{display:flex;gap:4px;justify-content:flex-end;margin-top:8px}
#ammoRow b{width:7px;height:20px;border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg,#ffd98f,#c8801f);box-shadow:0 0 4px rgba(255,180,70,.4);transition:opacity .15s}
#ammoRow b.dim{opacity:.15;box-shadow:none}
#reloadHint{font-size:12px;color:var(--red);font-weight:700;height:16px;margin-top:4px;letter-spacing:2px}
#hintBar{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:2px;color:rgba(200,212,226,.55)}
#hintBar em{color:var(--amber);font-style:normal;font-weight:700}

/* 准星 */
#cross{position:fixed;left:50%;top:50%;z-index:12;--sp:9px}
#cross i{position:absolute;background:#ffcf7d;box-shadow:0 0 5px rgba(255,183,77,.9)}
#cross .u{width:2px;height:9px;left:-1px;top:calc(-9px - var(--sp))}
#cross .d{width:2px;height:9px;left:-1px;top:var(--sp)}
#cross .l{height:2px;width:9px;top:-1px;left:calc(-9px - var(--sp))}
#cross .r{height:2px;width:9px;top:-1px;left:var(--sp)}
#cross b{position:absolute;width:3px;height:3px;left:-1.5px;top:-1.5px;border-radius:50%;background:#ffcf7d}
/* 命中标记 */
#hitmark{position:fixed;left:50%;top:50%;z-index:13;opacity:0;transition:opacity .14s}
#hitmark.show{opacity:1;transition:none}
#hitmark i{position:absolute;width:2.5px;height:9px;left:-1.25px;top:-11px;background:#fff;
  box-shadow:0 0 6px #ffd28a;transform-origin:50% 11px}
#hitmark i:nth-child(1){transform:rotate(45deg)} #hitmark i:nth-child(2){transform:rotate(135deg)}
#hitmark i:nth-child(3){transform:rotate(225deg)} #hitmark i:nth-child(4){transform:rotate(315deg)}
#hitmark.bull i{background:var(--red);box-shadow:0 0 8px var(--red)}
/* 飘分 */
.pop{position:fixed;z-index:14;transform:translate(-50%,-50%);pointer-events:none;
  font-family:'Rajdhani';font-weight:700;font-size:22px;color:var(--amber2);
  text-shadow:0 0 10px rgba(255,150,40,.8);animation:popUp .8s e.........完整代码请登录后点击上方下载按钮下载查看