代码语言：html

所属分类：其他

代码由qwen-3.8-max ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：三维小岛塔防游戏

代码标签： 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,user-scalable=no">
<title>孤岛海防 · 3D 塔防</title>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+QingKe+HuangYou&family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
:root{
  --ink:#081627; --panel:rgba(8,24,41,.88); --panel2:rgba(12,34,54,.92);
  --line:#2e5d74; --line2:#3f7d95; --gold:#ffcf6b; --teal:#41dcc8;
  --red:#ff6b5e; --blue:#7fd7ff; --txt:#dff3f2;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#0a2233;
  font-family:'Noto Sans SC',"PingFang SC","Microsoft YaHei",sans-serif;color:var(--txt);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.disp{font-family:'ZCOOL QingKe HuangYou','Noto Sans SC',sans-serif;font-weight:400}
#view{position:fixed;inset:0;touch-action:none;cursor:grab}
#view.drag{cursor:grabbing}#view.pick{cursor:pointer}
/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;display:none;z-index:5}
#hud.on{display:block}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 8px 26px rgba(0,10,20,.45);backdrop-filter:blur(6px)}
#pnlLeft{position:absolute;top:14px;left:14px;padding:10px 16px 12px;min-width:230px}
#lvName{font-size:22px;letter-spacing:2px;color:var(--gold);line-height:1.1}
#waveTxt{font-size:12px;color:#9fd0cc;margin-top:2px;letter-spacing:1px}
.hpwrap{margin-top:8px;height:12px;border-radius:6px;background:#123244;overflow:hidden;border:1px solid #1d4a5e}
#hpFill{height:100%;width:100%;background:linear-gradient(90deg,#39e0c0,#7fe6d2);transition:width .25s;border-radius:6px}
#hpFill.low{background:linear-gradient(90deg,#ff5c4d,#ff9d6b)}
#hpTxt{font-size:11px;color:#9fd0cc;margin-top:3px;display:flex;justify-content:space-between}
#pnlRight{position:absolute;top:14px;right:14px;display:flex;gap:8px;align-items:stretch;pointer-events:auto}
#goldBox{padding:8px 16px;display:flex;flex-direction:column;justify-content:center;text-align:right}
#goldTxt{font-size:26px;color:var(--gold);line-height:1;font-weight:900}
#goldTxt small{font-size:11px;color:#c9b27c;font-weight:400;display:block;letter-spacing:2px}
#goldBox.poor #goldTxt{animation:shakeX .35s}
@keyframes shakeX{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ibtn{pointer-events:auto;width:44px;border:1px solid var(--line);border-radius:10px;background:var(--panel);
  color:var(--txt);font-size:17px;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.ibtn:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.ibtn.act{border-color:var(--teal);color:var(--teal)}
/* ---------- 底栏 ---------- */
#bottomBar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:10px;align-items:flex-end;pointer-events:auto}
.tcard{width:96px;padding:8px 6px 7px;text-align:center;cursor:pointer;transition:.15s;position:relative}
.tcard:hover{transform:translateY(-4px);border-color:var(--gold)}
.tcard.sel{border-color:var(--teal);box-shadow:0 0 14px rgba(65,220,200,.45)}
.tcard.poor{opacity:.45;filter:grayscale(.6)}
.tcard .ico{font-size:24px;line-height:1.15}
.tcard .nm{font-size:13px;font-weight:700}
.tcard .cost{font-size:12px;color:var(--gold);font-weight:700}
.tcard .key{position:absolute;top:3px;left:5px;font-size:10px;color:#7fb0ad;border:1px solid #2c5a6e;border-radius:4px;padding:0 4px}
#waveBtn{padding:12px 20px;font-size:16px;border-radius:10px;border:1px solid #8a6a2c;cursor:pointer;
  background:linear-gradient(180deg,#5a4318,#3c2d10);color:var(--gold);font-weight:900;letter-spacing:2px;transition:.15s}
#waveBtn:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(255,207,107,.25)}
#waveBtn.fight{border-color:#7a2f2a;background:linear-gradient(180deg,#4d1712,#320f0c);color:#ff9c90;cursor:default}
#waveBtn.fight:hover{transform:none;box-shadow:none}
#hint{position:absolute;bottom:96px;left:50%;transform:translateX(-50%);font-size:12px;color:#8fc4c0;
  background:rgba(8,24,41,.6);padding:4px 14px;border-radius:20px;letter-spacing:1px;white-space:nowrap}
/* ---------- 中央横幅 / 提示 ---------- */
#banner{position:fixed;top:20%;left:50%;transform:translateX(-50%);z-index:9;text-align:center;pointer-events:none;opacity:0}
#banner .bt{font-size:44px;color:#fff;letter-spacing:8px;text-shadow:0 0 24px rgba(65,220,200,.8),0 4px 14px rgba(0,0,0,.6)}
#banner .bs{font-size:15px;color:var(--gold);letter-spacing:4px;margin-top:6px}
#banner.show{animation:ban 2.6s ease forwards}
@keyframes ban{0%{opacity:0;transform:translateX(-50%) scale(.85)}12%{opacity:1;transform:translateX(-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.04)}}
#toast{position:fixed;bottom:150px;left:50%;transform:translateX(-50%);z-index:12;background:rgba(10,30,48,.95);
  border:1px solid var(--line2);color:var(--txt);padding:8px 20px;border-radius:8px;font-size:14px;opacity:0;transition:.25s;pointer-events:none;letter-spacing:1px}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-6px)}
#hurt{position:fixed;inset:0;pointer-events:none;z-index:8;box-shadow:inset 0 0 140px rgba(255,60,40,.9);opacity:0}
#hurt.on{animation:hurtA .5s ease}
@keyframes hurtA{0%{opacity:1}100%{opacity:0}}
/* ---------- 弹出菜单 ---------- */
#popup{position:fixed;z-index:15;display:none;min-width:210px;pointer-events:auto}
#popup .ptitle{padding:8px 14px 4px;font-size:14px;font-weight:900;color:var(--gold);letter-spacing:1px;border-bottom:1px solid #1e4152}
#popup .prow{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:.12s;border-bottom:1px solid rgba(30,65,82,.5)}
#popup .prow:hover{background:rgba(65,220,200,.12)}
#popup .prow.poor{opacity:.42;cursor:not-allowed}
#popup .prow .pi{font-size:20px;width:26px;text-align:center}
#popup .prow .pn{font-size:13px;font-weight:700}
#popup .prow .pd{font-size:10px;color:#8fbcb9}
#popup .prow .pc{margin-left:auto;font-size:13px;color:var(--gold);font-weight:900;white-space:nowrap}
#popup .stat{padding:7px 14px;font-size:11px;color:#a9d4d0;line-height:1.7}
#popup .pbtns{display:flex;gap:8px;padding:10px 14px}
#popup .pbtn{flex:1;padding:8px 0;border-radius:8px;border:1px solid var(--line2);background:#123244;color:var(--txt);
  font-size:13px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit}
#popup .pbtn:hover{transform:translateY(-2px)}
#popup .pbtn.up{border-color:#8a6a2c;background:#3c2d10;color:var(--gold)}
#popup .pbtn.sell{border-color:#7a3a34;color:#ff9c90}
#popup .pbtn:disabled{opacity:.4;cursor:not-allowed;transform:none}
#popup .pcls{position:absolute;top:4px;right:8px;cursor:pointer;color:#7fa8b5;font-size:13px}
/* ---------- 开始/结束界面 ---------- */
.scr{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 30%,rgba(8,30,45,.42) 0%,rgba(4,14,26,.9) 78%);transition:opacity .5s}
.scr.hide{opacity:0;pointer-events:none}
#gameTitle{font-size:72px;letter-spacing:14px;color:#fff;text-sh.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论