three实现三维小岛塔防游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

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

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

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>小岛塔防 3D</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box;}
  html,body{width:100%;height:100%;overflow:hidden;background:#0b1a2a;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
    -webkit-user-select:none;user-select:none;}
  #app{position:fixed;inset:0;}
  canvas{display:block;}

  /* ---------- HUD ---------- */
  #hud{position:fixed;top:14px;left:50%;transform:translateX(-50%);
    display:flex;gap:10px;z-index:10;pointer-events:none;}
  .stat{background:rgba(10,22,36,.74);border:1px solid rgba(120,200,255,.28);
    border-radius:12px;padding:7px 16px;color:#a9cbe6;font-size:12px;
    display:flex;flex-direction:column;align-items:center;min-width:76px;
    backdrop-filter:blur(8px);}
  .stat b{font-size:19px;color:#fff;margin-top:1px;font-variant-numeric:tabular-nums;}
  .stat.hp b{color:#ff8a8a;}
  .stat.gold b{color:#ffd75e;}

  /* ---------- 建造栏 ---------- */
  #buildbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
    display:flex;gap:12px;z-index:10;flex-wrap:wrap;justify-content:center;padding:0 10px;}
  .tbtn{background:rgba(10,22,36,.78);border:2px solid rgba(120,200,255,.22);
    border-radius:14px;color:#cfe9ff;padding:9px 18px 9px 13px;cursor:pointer;
    display:flex;align-items:center;gap:10px;transition:.15s;
    backdrop-filter:blur(8px);font-family:inherit;}
  .tbtn:hover{border-color:rgba(120,200,255,.6);transform:translateY(-2px);}
  .tbtn.active{border-color:#63d2ff;background:rgba(28,78,126,.92);
    box-shadow:0 0 20px rgba(99,210,255,.5);}
  .tbtn .dot{width:15px;height:15px;border-radius:50%;flex:none;}
  .tbtn .txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3;}
  .tbtn .txt small{opacity:.6;font-size:11px;}
  .tbtn .txt span{font-size:14px;font-weight:600;color:#fff;}

  /* ---------- 中央提示 ---------- */
  #msg{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);
    color:#fff;font-size:36px;font-weight:800;letter-spacing:5px;
    text-shadow:0 0 26px rgba(99,210,255,.9),0 4px 22px rgba(0,0,0,.65);
    pointer-events:none;opacity:0;transition:opacity .28s;z-index:12;
    text-align:center;white-space:nowrap;}
  #msg.show{opacity:1;}

  /* ---------- 遮罩 ---------- */
  #overlay{position:fixed;inset:0;background:rgba(4,12,22,.84);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    z-index:20;color:#dff1ff;text-align:center;backdrop-filter:blur(4px);padding:20px;}
  #overlay.hidden{display:none;}
  #overlay h1{font-size:42px;letter-spacing:6px;margin-bottom:14px;
    background:linear-gradient(90deg,#63d2ff,#a6ffcb);-webkit-background-clip:text;
    background-clip:text;color:transparent;}
  #overlay p{opacity:.75;margin-bottom:28px;font-size:15px;line-height:1.9;}
  #overlay button{font-family:inherit;font-size:17px;padding:13px 44px;border-radius:40px;
    cursor:pointer;border:2px solid #63d2ff;background:rgba(20,60,100,.6);color:#fff;
    letter-spacing:3px;transition:.2s;}
  #overlay button:hover{background:#63d2ff;color:#03121f;
    box-shadow:0 0 32px rgba(99,210,255,.75);}

  #hint{position:fixed;bottom:92px;left:50%;transform:translateX(-50%);
    color:#9fc9e8;font-size:12px;opacity:.65;z-index:10;pointer-events:none;
    white-space:nowrap;}
  @media (max-width:600px){
    #msg{font-size:24px;letter-spacing:3px;}
    #overlay h1{font-size:.........完整代码请登录后点击上方下载按钮下载查看