three做个三维塔克大战游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由deepseek-4.1-flash 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>森林坦克大战 · Forest Tank Battle</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body {
    width: 100%; height: 100%; overflow: hidden;
    background: #0a0f08;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    user-select: none; -webkit-user-select: none;
  }
  canvas { display: block; }

  #ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

  /* ---------- HUD ---------- */
  #hud {
    position: absolute; inset: 0;
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 22px 26px;
    opacity: 0; transition: opacity .5s;
  }
  #hud.on { opacity: 1; }

  .panel {
    background: rgba(10, 18, 10, .45);
    border: 1px solid rgba(150, 200, 130, .22);
    border-radius: 10px;
    padding: 12px 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  #hpLabel {
    font-size: 12px; letter-spacing: 3px; color: #a9c99a;
    margin-bottom: 8px; text-transform: uppercase;
  }
  #hpBar {
    width: 230px; height: 12px; border-radius: 6px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
  }
  #hpFill {
    height: 100%; width: 100%;
    background: linear-gradient(90deg, #5fd35f, #9be36a);
    border-radius: 5px;
    transition: width .22s ease, background .3s;
    box-shadow: 0 0 12px rgba(120, 230, 110, .55);
  }
  #hpNum { font-size: 11px; color: #7d9b70; margin-top: 6px; letter-spacing: 1px; }

  #stats { text-align: right; }
  #stats .big {
    font-size: 30px; font-weight: 700; color: #e8f5dd;
    text-shadow: 0 0 18px rgba(140, 220, 120, .45);
    line-height: 1;
  }
  #stats .sub { font-size: 11px; letter-spacing: 3px; color: #8fae80; margin-top: 6px; }

  /* ---------- 准星 ---------- */
  #crosshair {
    position: absolute; left: 50%; top: 50%;
    width: 34px; height: 34px; margin: -17px 0 0 -17px;
    opacity: 0; transition: opacity .4s;
  }
  #crosshair.on { opacity: .9; }
  #crosshair::before, #crosshair::after {
    content: ''; position: absolute; background: rgba(190, 255, 160, .75);
  }
  #crosshair::before { left: 50%; top: 0; width: 1.5px; height: 10px; margin-left: -0.75px; box-shadow: 0 24px 0 rgba(190,255,160,.75); }
  #crosshair::after  { top: 50%; left: 0; height: 1.5px; width: 10px; margin-top: -0.75px; box-shadow: 24px 0 0 rgba(190,255,160,.75); }
  #crossDot {
    position: absolute; left: 50%; top: 50%;
    width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px;
    border-radius: 50%; background: rgba(190,255,160,.9);
    box-shadow: 0 0 6px rgba(190,255,160,.9);
  }
  #crossRing {
    position: absolute; inset: 6px;
    border: 1px solid rgba(190,255,160,.35);
    border-radius: 50%;
  }

  /* ---------- 受伤闪屏 ---------- */
  #dmgFlash {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(180,0,0,0) 35%, rgba(170,10,10,.75) 100%);
    opacity: 0; transition: opacity .35s ease-out;
  }

  /* ---------- 全屏界面 ---------- */
  .screen {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    background: radial-gradient(ellipse at center, rgba(8,16,8,.55) 0%, rgba(3,7,3,.92) 100%);
    pointer-events: auto;
    transition: opacity .55s ease;
  }
  .screen.hidden { opacity: 0; pointer-events: none; }

  .screen h1 {
    font-size: clamp(30px, 6vw, 62px);
    font-weight: 800;
    letter-spacing: 6px;
    color: #e9f7dd;
    text-shadow: 0 0 30px rgba(120, 220, 100, .55), 0 4px 0 rgba(0,0,0,.5);
    margin-bottom: 8px;
  }
  .screen h1 small {
    display: block; font-size: 13px; letter-spacing: 10px;
    font-weight: 400; color: #86a877; margin-top: 14px;
  }
  .screen .desc {
    color: #a6c197; font-size: 14px; line-height: 2;
    margin: 26px 0 34px; letter-spacing: 1px; max-width: 520px;
  }
  .screen .desc b { color: #d3ecbe; font-weight: 600; }
  .keys { display: flex; gap: 26px; margin-bottom: 30px; flex-wrap: wrap; justify-content: center; }
  .keyItem { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #8fae80; font-size: 11px; letter-spacing: 1px; }
  .keyCap {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 32px; padding: 0 10px;
    border-radius: 6px;
    background: linear-gradient(180deg, rgba(90,130,70,.35), rgba(30,50,25,.5));
    border: 1px solid rgba(150,200,130,.3);
    color: #d6efc4; font-size: 13px; font-weight: 600;
    box-shadow: 0 2px 0 rgba(0,0,0,.4);
  }

  button {
    pointer-events:.........完整代码请登录后点击上方下载按钮下载查看