代码语言：html

所属分类：其他

代码由minimax-m3.1-flash ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：仙侠3d国风网游

代码标签： three 三维 有声 仙侠 国风 网页 游戏 代码

下面为部分代码预览，完整代码请点击下载或在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, minimum-scale=1, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#0b1a19" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>墨影仙踪 · 剑冢斩妖</title>
<style>
/* ===================== 全局与水墨基础样式 ===================== */
:root{
  --ink:#141c1b;
  --paper:#e6dcc4;
  --paper-2:#d3c5a6;
  --jade:#2f8a74;
  --gold:#e8c070;
  --crimson:#b52a20;
  --celadon:#a9cfbe;
  --fs: clamp(13px, 2.7vmin, 20px);
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; padding:0; width:100%; height:100%;
  background:#08110f; overflow:hidden; color:#f2ead6;
  font-family:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  touch-action:none; user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}
html{ font-size:var(--fs); }
body{ position:fixed; inset:0; }
#app{ position:fixed; inset:0; overflow:hidden; }
canvas#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }

/* 后期叠加层：暗角 + 泛光感 + 受伤红闪 + 狂暴 */
#fxLayer{ position:absolute; inset:0; pointer-events:none; z-index:5; }
#vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 42%, rgba(4,10,10,.26) 74%, rgba(3,7,7,.62) 100%);
  mix-blend-mode:multiply;
}
#grain{
  position:absolute; inset:0; opacity:.06; mix-blend-mode:overlay;
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, rgba(0,0,0,.5) 1px 2px);
  background-size:100% 3px;
}
#rageFx{
  position:absolute; inset:0; opacity:0; transition:opacity .5s ease;
  background:radial-gradient(ellipse at 50% 50%, rgba(190,30,20,0) 35%, rgba(170,20,14,.55) 100%);
}
#hurtFx{
  position:absolute; inset:0; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(200,40,25,0) 45%, rgba(190,25,20,.5) 100%);
}
#flashFx{ position:absolute; inset:0; opacity:0; background:#fff5dc; }

/* ===================== 通用宣纸面板 ===================== */
.xuan{
  position:relative;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(255,253,245,.95), rgba(228,217,192,.9) 55%, rgba(200,186,155,.92));
  color:#241d16;
  border:1px solid rgba(60,45,30,.38);
  box-shadow:0 .35rem 1.1rem rgba(0,0,0,.45), inset 0 0 2.4rem rgba(122,92,50,.22);
}
.xuan::after{
  content:''; position:absolute; inset:.22rem; border:1px solid rgba(96,72,42,.24);
  pointer-events:none;
}
/* 朱红印章按钮 */
.seal{
  font-family:"STKaiti","KaiTi","Kaiti SC","STKaiti",serif;
  background:linear-gradient(#c03327,#96170f);
  color:#f7ecd4; border:none; border-radius:.28rem;
  padding:.42rem 1.1rem; font-size:.95rem; letter-spacing:.16em;
  box-shadow:0 .18rem .5rem rgba(0,0,0,.45), inset 0 0 .6rem rgba(255,220,180,.18);
  cursor:pointer; transform:rotate(-1.2deg);
  transition:transform .12s ease, filter .12s ease;
}
.seal:active{ transform:rotate(-1.2deg) scale(.96); filter:brightness(1.15); }
#muteBtn{
  position:absolute; right:max(.9rem, env(safe-area-inset-right)); top:max(.8rem, env(safe-area-inset-top));
  z-index:30; pointer-events:auto; padding:.3rem .62rem; font-size:.78rem; letter-spacing:.1em;
}
.vertical{ writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.14em; }

/* ===================== HUD ===================== */
#hud{ position:absolute; inset:0; z-index:10; pointer-events:none; }
#hud > *{ pointer-events:none; }

#topLeft{
  position:absolute; left:max(.9rem, env(safe-area-inset-left)); top:max(.8rem, env(safe-area-inset-top));
  display:flex; gap:.6rem; align-items:flex-start;
}
.sealMedallion{
  width:2.6rem; height:2.6rem; flex:0 0 auto; display:grid; place-items:center;
  font-family:"STKaiti","KaiTi",serif; font-size:1.2rem; color:#f6e7c8;
  background:linear-gradient(#3b2a22,#1d1512);
  border:.16rem solid rgba(232,192,112,.75); border-radius:.25rem;
  box-shadow:0 .2rem .5rem rgba(0,0,0,.5), inset 0 0 .8rem rgba(232,192,112,.25);
}
.bars{ display:flex; flex-direction:column; gap:.38rem; min-width:11rem; }
.bar{
  position:relative; height:1.05rem; border-radius:.2rem; overflow:hidden;
  background:linear-gradient(rgba(12,20,19,.88), rgba(20,30,28,.75));
  border:1px solid rgba(228,214,180,.38);
  box-shadow:inset 0 0 .6rem rgba(0,0,0,.6);
  clip-path:polygon(0 0,100% 0,99.2% 100%,0% 100%);
}
.bar .chip{
  position:absolute; inset:0; transform-origin:left center; background:rgba(255,232,190,.55);
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.bar .fill{
  position:absolute; inset:0; transform-origin:left center;
  transition:transform .12s linear;
}
.bar.hp .fill{ background:linear-gradient(90deg,#8d1f18,#d24a30 55%,#f4ab5c); box-shadow:0 0 .8rem rgba(230,90,50,.6); }
.bar.mp .fill{ background:linear-gradient(90deg,#175a74,#41a8b8 55%,#a6ece2); box-shadow:0 0 .8rem rgba(70,190,200,.5); }
.bar .tag{
  position:absolute; left:.42rem; top:50%; transform:translateY(-50%);
  font-size:.72rem; letter-spacing:.18em; color:#f6eed8; text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.bar .num{
  position:absolute; right:.45rem; top:50%; transform:translateY(-50%);
  font-size:.72rem; color:#e9dcbe; opacity:.9; text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.bar.mp{ height:.78rem; }
#comboBadge{
  margin-top:.1rem; font-family:"STKaiti","KaiTi",serif; font-size:1.05rem; color:#f2d38a;
  text-shadow:0 0 .6rem rgba(232,192,112,.8); opacity:0; transition:opacity .25s ease;
}
#comboBadge.on{ opacity:1; }

/* Boss 血条 */
#bossBar{
  position:absolute; left:50%; transform:translateX(-50%) translateY(-140%);
  top:max(1rem, env(safe-area-inset-top));
  width:min(62vw, 28rem); opacity:0; transition:opacity .6s ease, transform .6s ease;
}
#bossBar.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.bossHead{ display:flex; align-items:center; gap:.5rem; margin-bottom:.28rem; }
.bossName{
  font-family:"STKaiti","KaiTi",serif; font-size:1.05rem; letter-spacing:.12em;
  color:#f4e4c0; text-shadow:0 0 .8rem rgba(200,40,25,.7), 0 2px 3px rgba(0,0,0,.9);
}
.bossSub{ font-size:.7rem; color:#d6c8a6; opacity:.8; margin-left:auto; letter-spacing:.1em; }
.bossTrack{
  position:relative; height:1rem; border:1px solid rgba(232,214,180,.45);
  background:linear-gradient(rgba(10,16,16,.9),rgba(22,14,14,.85));
  box-shadow:inset 0 0 .8rem rgba(0,0,0,.7), 0 .2rem .6rem rgba(0,0,0,.45);
  overflow:hidden;
}
.bossTrack .fill{
  position:absolute; inset:0; transform-origin:left center;
  background:linear-gradient(90deg,#6d110c,#b52a20 45%,#e8843a 85%,#f6d27a);
  box-shadow:0 0 1rem rgba(220,80,40,.7);
  transition:transform .15s linear;
}
.bossTrack .ghost{ position:absolute; inset:0; transform-origin:left center; background:rgba(255,235,200,.35); transition:transform .7s ease .1s; }
.bossRage{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(220,40,25,0),rgba(255,90,50,.35)); opacity:0; transition:opacity .4s; }
.bossRage.on{ opacity:1; }

/* 技能按钮 */
#skillBar{
  position:absolute; right:max(.9rem, env(safe-area-inset-right)); bottom:max(1rem, env(safe-area-inset-bottom));
  display:flex; align-items:flex-end; gap:.55rem; pointer-events:none;
}
.skill{
  position:relative; width:3.6rem; height:3.6rem; border-radius:50%;
  pointer-events:auto; border:none; padding:0; cursor:pointer;
  background:radial-gradient(circle at 34% 26%, rgba(255,250,236,.95), rgba(212,199,172,.9) 55%, rgba(168,152,120,.92));
  box-shadow:0 .3rem .7rem rgba(0,0,0,.5), inset 0 0 1rem rgba(90,66,36,.3);
  color:#2a211a; font-family:"STKaiti","KaiTi",serif;
  display:grid; place-items:center;
}
.skill .glyph{ font-size:1.25rem; letter-spacing:0; z-index:2; }
.skill .key{
  position:absolute; bottom:.28rem; left:50%; transform:translateX(-50%);
  font-size:.56rem; opacity:.62; font-family:ui-monospace,Menlo,monospace; z-index:2;
}
.skill .cd{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:3;
  background:conic-gradient(rgba(10,16,16,.72) var(--a,0deg), rgba(0,0,0,0) 0);
}
.skill .charge{
  position:absolute; left:6%; right:6%; bottom:6%; height:0%; bottom:6%;
  border-radius:50%; z-index:1; overflow:hidden;
  background:linear-gradient(0deg, rgba(240,196,106,.85), rgba(240,196,106,.15));
  pointer-events:none;
}
.skill.pressed{ transform:scale(.93); }
.skill.locked{ filter:grayscale(.55) brightness(.8); }

/* 摇杆 */
#stickZone{
  position:absolute; left:0; bottom:0; width:46%; height:58%;
  pointer-events:auto; touch-action:none;
}
#stickBase{
  position:absolute; width:8.6rem; height:8.6rem; border-radius:50%;
  left:max(1.4rem, env(safe-area-inset-left)); bottom:max(1.5rem, env(safe-area-inset-bottom));
  background:radial-gradient(circle at 50% 50%, rgba(240,232,212,.10), rgba(20,30,28,.28) 70%, rgba(20,30,28,0));
  border:1px solid rgba(226,214,182,.32); opacity:0; transition:opacity .25s;
  box-shadow:inset 0 0 2rem rgba(0,0,0,.35);
}
#stickKnob{
  position:absolute; width:3.4rem; height:3.4rem; border-radius:50%; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 36% 30%, rgba(255,252,240,.92), rgba(214,200,168,.82) 60%, rgba(150,136,104,.85));
  box-shadow:0 .25rem .6rem rgba(0,0,0,.5);
  opacity:0; transition:opacity .2s;
}
#stickZone.active #stickBase, #stickZone.active #stickKnob{ opacity:1; }
body.touch #stickZone{ display:block; }
body.touch #stickBase{ opacity:.5; }
body.touch #stickKnob{ opacity:.55; }
body.touch #stickZone.active #stickBase{ opacity:1; }
body.touch #stickZone.active #stickKnob{ opacity:1; }
body:not(.touch) #stickZone{ display:none; }

/* 操作提示 */
#hints{
  position:absolute; left:max(1rem, env(safe-area-inset-left)); bottom:max(1rem, env(safe-area-inset-bottom));
  font-size:.72rem; letter-spacing:.1em; color:rgba(238,226,198,.62);
  text-shadow:0 2px 4px rgba(0,0,0,.8); line-height:1.8;
}
body.touch #hints{ display:none; }
#spellHint{
  position:absolute; left:50%; transform:translateX(-50%); bottom:max(1rem, env(safe-area-inset-bottom));
  font-size:.78rem; letter-spacing:.14em; color:#f0d59a; opacity:0; transition:opacity .25s;
  text-shadow:0 0 .8rem rgba(232,192,112,.7), 0 2px 4px rgba(0,0,0,.9);
}

/* ===================== 剧情卷轴 ===================== */
#story{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:max(1.6rem, env(safe-area-inset-bottom));
  width:min(92vw, 44rem); z-index:20; opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
#story.on{ opacity:1; pointer-events:auto; }
#storyBox{
  position:relative; padding:1rem 1.2rem 1.1rem 4.2rem; min-height:7.4rem;
  border-radius:.2rem;
  background:
    radial-gradient(130% 100% at 12% 0%, rgba(255,252,242,.97), rgba(226,214,188,.94) 55%, rgba(196,181,148,.95));
  border:1px solid rgba(60,45,30,.4);
  box-shadow:0 .5rem 1.4rem rgba(0,0,0,.6), inset 0 0 3rem rgba(122,92,50,.22);
  color:#231c15;
}
#storyBox::before, #storyBox::after{
  content:''; position:absolute; left:-.5rem; right:-.5rem; height:.55rem; border-radius:.3rem;
  background:linear-gradient(#6b4a2f,#3b2718);
  box-shadow:0 .12rem .4rem rgba(0,0,0,.5), inset 0 .1rem .2rem rgba(255,220,170,.25);
}
#storyBox::before{ top:-.32rem; }
#storyBox::after{ bottom:-.32rem; }
#speaker{
  position:absolute; left:.6rem; top:.9rem; bottom:.9rem; width:2.4rem;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:.5rem;
  font-family:"STKaiti","KaiTi",serif; font-size:1.05rem; letter-spacing:.2em; color:#2f2519;
}
#speaker .sealDot{
  width:1.35rem; height:1.35rem; margin-top:auto; border-radius:.2rem;
  background:linear-gradient(#c03327,#96170f); color:#f7ecd4;
  display:grid; place-items:center; font-size:.7rem; box-shadow:0 .15rem .35rem rgba(0,0,0,.4);
}
#storyText{ font-size:1.02rem; line-height:1.95; letter-spacing:.06em; min-height:3.9rem; }
#storyText .cursor{
  display:inline-block; width:.55rem; height:1rem; margin-left:.12rem; vertical-align:-.12rem;
  background:#8a1d14; animation:blink .7s steps(1,end) infinite;
}
@keyframes blink{ 50%{opacity:0} }
#skipBtn{
  position:absolute; right:.5rem; top:-2.1rem; pointer-events:auto;
  font-size:.7rem; padding:.24rem .7rem; letter-spacing:.1em;
}

/* ===================== 开始 / 结算 幕 ===================== */
.overlay{
  position:absolute; inset:0; z-index:40; display:grid; place-items:center;
  background:radial-gradient(ellipse at 50% 40%, rgba(8,18,17,.38), rgba(4,8,8,.88));
  backdrop-filter:blur(2px);
}
.overlay.hidden{ display:none; }
#startScreen{ cursor:pointer; }
#startInner{ display:flex; flex-direction:column; align-items:center; gap:1.2rem; }
#gameTitle{
  font-family:"STKaiti","KaiTi",serif; font-size:clamp(2.4rem,9vmin,4.6rem);
  color:#f2e6c8; letter-spacing:.3em; margin-right:-.3em; white-space:nowrap;
  flex:0 0 auto; height:max-content;
  text-shadow:0 0 1.4rem rgba(90,220,190,.35), 0 .4rem 1rem rgba(0,0,0,.8);
}
#gameSub{
  font-family:"STKaiti","KaiTi",serif; font-size:clamp(.85rem,2.6vmin,1.2rem);
  color:#cfe3d4; letter-spacing:.42em; opacity:.85; white-space:nowrap;
  flex:0 0 auto; text-shadow:0 2px 6px rgba(0,0,0,.8);
}
#startTip{
  margin-top:1rem; font-size:.82rem; letter-spacing:.2em; color:rgba(240,226,196,.8);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }
#toast{
  position:absolute; left:50%; transform:translateX(-50%); top:max(4.5rem, calc(env(safe-area-inset-top) + 4rem));
  z-index:60; max-width:min(88vw,34rem); padding:.6rem 1rem; border-radius:.2rem;
  background:rgba(24,32,30,.92); border:1px solid rgba(232,214,170,.45); color:#f0e2c0;
  font-size:.78rem; line-height:1.7; letter-spacing:.05em; text-align:center;
  box-shadow:0 .4rem 1rem rgba(0,0,0,.6); display:none;
}
#toast.on{ display:block; }
#endScreen{ }
#endInner{
  width:min(90vw,26rem); padding:1.6rem 1.4rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
}
#endTitle{
  font-family:"STKaiti","KaiTi",serif; font-size:2.2rem; letter-spacing:.28em; margin-right:-.28em; color:#3a2a1c;
}
#endSub{ font-size:.85rem; line-height:2; color:#4a3a29; letter-spacing:.08em; }
#endStats{ width:100%; font-size:.8rem; color:#42342a; line-height:2; letter-spacing:.06em; }
#endStats b{ color:#8a1d14; font-weight:600; }
@media (max-width:520px){
  .bars{ min-width:8.6rem; }
  #hints{ font-size:.66rem; }
  #storyBox{ padding:.85rem .8rem .9rem 3.6rem; min-height:6.6rem; }
  #speaker{ width:2rem; font-size:.9rem; }
  #storyText{ font-size:.92rem; }
}
</style>
</head>
<body>
<div id="app">
  <canvas id="scene"></canvas>
  <div id="fxLayer">
    <div id="vignette"></div>
    <div id="rageFx"></div>
    <div id="hurtFx"></div>
    <div id="flashFx"></div>
    <div id="grain"></div>
  </div>

  <div id="hud">
    <div id="topLeft">
      <div class="sealMedallion">剑</div>
      <div class="bars">
        <div class="bar hp"><div class="chip" id="hpChip"></div><div class="fill" id="hpFill"></div><span class="tag">生命</span><span class="num" id="hpNum">220/220</span></div>
        <div class="bar mp"><div class="chip" id="mpChip"></div><div class="fill" id="mpFill"></div><span class="tag">灵力</span><span class="num" id="mpNum">100/100</span></div>
        <div id="comboBadge">连击 ×<span id="comboNum">0</span></div>
      </div>
    </div>

    <div id="bossBar">
      <div class="bossHead">
        <span class="bossName" id="bossName">魔尊 · 噬影</span>
        <span class="bossSub" id="bossSub">剑冢之主</span>
      </div>
      <div class="bossTrack"><div class="ghost" id="bossGhost"></div><div class="fill" id="bossFill"></div><div class="bossRage" id="bossRage"></div></div>
    </div>

    <div id="skillBar">
      <button class="skill" data-act="dodge">.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论