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">
<title>孤城箭影 · Castle Archer</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=Noto+Serif+SC:wght@600;900&display=swap" rel="stylesheet">
<style>
:root{
  --gold:#d9b36c; --gold2:#f4d795; --blood:#a32c21; --hp1:#e05038; --hp2:#7d1d15;
  --ink:#0e0b08; --panel:rgba(20,15,10,.88); --line:rgba(154,122,66,.55);
  --disp:'Cinzel','Noto Serif SC',serif; --body:'Noto Serif SC','Songti SC','SimSun',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#0a0806;color:#e9dcc3;font-family:var(--body);overscroll-behavior:none}
canvas#c{position:fixed;inset:0;display:block}
.hidden{opacity:0!important;pointer-events:none!important}
.panel{background:linear-gradient(160deg,var(--panel),rgba(10,8,5,.9));border:1px solid var(--line);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  padding:10px 16px;position:relative}
.panel::before{content:"";position:absolute;left:0;top:0;width:14px;height:14px;border-left:2px solid var(--gold);border-top:2px solid var(--gold);opacity:.8}
.btn{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:.35em;text-indent:.35em;color:var(--gold2);
  background:linear-gradient(#2a2016,#150f08);border:1px solid #8a6d3f;cursor:pointer;padding:15px 42px;position:relative;overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .22s,box-shadow .22s,border-color .22s}
.btn:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 0 26px rgba(217,179,108,.28),inset 0 0 14px rgba(217,179,108,.12)}
.btn:active{transform:translateY(1px)}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(244,215,149,.18),transparent);transition:left .5s}
.btn:hover::after{left:130%}
.btn.small{font-size:13px;padding:9px 20px;letter-spacing:.2em}
kbd{font-family:var(--disp);font-size:12px;color:var(--gold2);background:#241a10;border:1px solid #5a4a33;border-bottom:3px solid #5a4a33;border-radius:4px;padding:2px 8px;margin:0 2px}
#hud{position:fixed;inset:0;pointer-events:none;z-index:5;transition:opacity .4s}
#vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 58%,rgba(5,3,2,.5) 100%)}
#hurt{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 34%,rgba(170,22,10,.6) 100%);opacity:0}
#lowhp{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 40%,rgba(150,10,5,.55) 100%);opacity:0}
#lowhp.on{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.15}50%{opacity:.75}}
#hpPanel{position:absolute;top:18px;left:18px;min-width:250px}
#hpPanel .lab{font-size:11px;letter-spacing:.4em;color:var(--gold);opacity:.85}
#hpBar{position:relative;height:15px;margin-top:6px;background:#17100a;border:1px solid #4a3a24;overflow:hidden}
#hpGhost{position:absolute;inset:0;width:100%;background:rgba(240,220,190,.4);transition:width .8s .3s}
#hpFill{position:absolute;inset:0;width:100%;background:linear-gradient(90deg,var(--hp2),var(--hp1));transition:width .15s}
#hpFill::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);background-size:220% 100%;animation:sheen 2.8s linear infinite}
@keyframes sheen{from{background-position:200% 0}to{background-position:-40% 0}}
#hpNum{font-family:var(--disp);font-weight:800;font-size:20px;color:#f3e2c0;position:absolute;right:0;top:-4px;text-shadow:0 1px 3px #000}
#wavePanel{position:absolute;top:18px;right:18px;display:flex;gap:22px;align-items:baseline;padding:10px 22px}
#wavePanel .st{text-align:center}
#wavePanel .lab{font-size:10px;letter-spacing:.35em;color:var(--gold);opacity:.8;display:block}
#wavePanel .val{font-family:var(--disp);font-weight:800;font-size:24px;color:#f3e2c0}
#toasts{position:absolute;top:86px;right:18px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.toast{font-size:14px;color:#e9dcc3;background:rgba(15,11,7,.85);border-right:3px solid var(--gold);padding:6px 14px;animation:tIn .3s ease both}
.toast.gold{color:var(--gold2);border-color:var(--blood);font-weight:900}
@keyframes tIn{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
#quiver{position:absolute;right:18px;bottom:20px;display:flex;gap:7px;align-items:flex-end;padding:10px 14px}
#quiver .lab{font-size:10px;letter-spacing:.3em;color:var(--gold);writing-mode:vertical-rl;margin-right:4px}
.slot{width:16px;height:46px;position:relative;opacity:.9}
.slot svg{width:100%;height:100%}
.slot.empty{opacity:.18;filter:grayscale(1)}
.slot .fill{position:absolute;left:2px;right:2px;bottom:2px;background:rgba(217,179,108,.5);height:0}
#quiver.dry{animation:shakeX .3s}
@keyframes shakeX{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
#radarWrap{position:absolute;left:18px;bottom:20px;width:150px;height:150px;border-radius:50%;border:1px solid var(--line);
  background:radial-gradient(circle,rgba(30,22,12,.85),rgba(10,7,4,.9));box-shadow:0 0 20px rgba(0,0,0,.5),inset 0 0 30px rgba(0,0,0,.6)}
#radarWrap::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,190,90,.22),transparent 70deg);animation:sweep 3.2s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
#radar{position:absolute;inset:0;border-radius:50%}
#cross{position:absolute;left:50%;top:50%;--sp:12px}
#cross .dot{position:absolute;width:4px;height:4px;background:var(--gold2);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px #000}
#cross .tk{position:absolute;background:var(--gold2);box-shadow:0 0 3px rgba(0,0,0,.9);transition:transform .08s}
#cross .t{width:2px;height:9px;left:-1px;top:calc(-9px - var(--sp))}
#cross .b{width:2px;height:9px;left:-1px;top:var(--sp)}
#cross .l{width:9px;height:2px;top:-1px;left:calc(-9px - var(--sp))}
#cross .r{width:9px;height:2px;top:-1px;left:var(--sp)}
#drawRing{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-50%)}
#drawRing circle{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:188.5;stroke-dashoffset:188.5;transform:rotate(-90deg);transform-origin:center;opacity:.9}
#drawRing.full circle{stroke:#ffd76a;filter:drop-shadow(0 0 6px rgba(255,215,106,.9))}
#hitmark{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%) scale(.4);opacity:0}
#hitmark.show{animation:hm .22s ease-out}
#hitmark.head svg *{stroke:#ffd76a}
@keyframes hm{0%{opacity:1;transform:translate(-50%,-50%) .........完整代码请登录后点击上方下载按钮下载查看