three实现三维足球游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由glm-5.3-flash 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.0">
<title>绿茵小将 · Three.js 3D 迷你足球</title>
<style>
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0a1a2f;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    user-select: none; -webkit-user-select: none; }
  canvas { display: block; }
  /* 半透明玻璃质感面板 */
  .glass { background: rgba(13, 32, 58, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 16px; color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
  /* ===== 顶部记分 HUD ===== */
  #hudRoot { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
  #scoreboard { position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    padding: 8px 22px; display: flex; align-items: center; gap: 12px;
    font-size: 18px; font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
  .team.blue { color: #7ec8ff; } .team.red { color: #ff9d8a; }
  #scoreboard .num { font-size: 26px; min-width: 24px; text-align: center; }
  #clock { font-variant-numeric: tabular-nums; color: #ffe27a; margin-left: 6px; padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.25); font-size: 20px; }
  #clock.hurry { color: #ff5f5f; animation: blink 1s steps(2) infinite; }
  @keyframes blink { 50% { opacity: 0.35; } }
  /* ===== 中央提示文字 ===== */
  #msg { position: absolute; top: 26%; left: 50%; transform: translate(-50%, -50%);
    font-size: clamp(30px, 5.5vw, 58px); font-weight: 900; color: #fff; letter-spacing: 3px;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), 0 0 34px rgba(255, 220, 100, 0.4);
    opacity: 0; transition: opacity 0.25s; }
  #msg.pop { opacity: 1; animation: msgin 0.45s cubic-bezier(0.2, 1.6, 0.4, 1); }
  @keyframes msgin { from { transform: translate(-50%, -50%) scale(0.4); } to { transform: translate(-50%, -50%) scale(1); } }
  /* ===== 耐力 / 蓄力条 ===== */
  #staminaWrap { position: absolute; left: 18px; bottom: 18px; padding: 10px 16px;
    display: flex; align-items: center; gap: 10px; font-size: 13px; color: #dcecff; }
  #powerWrap { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
    padding: 10px 16px; display: flex; align-items: center; gap: 10px; font-size: 13px;
    color: #dcecff; opacity: 0; transition: opacity 0.15s; }
  .bar { width: 160px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
  .bar > div { height: 100%; width: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #43e97b, #38f9d7); transition: width 0.1s linear; }
  #powerFill { background: linear-gradient(90deg, #ffe259, #ffa751, #ff5f5f) !important; }
  #hint { position: absolute; right: 18px; bottom: 18px; padding: 8px 14px; font-size: 12px; color: #cfe8ff; opacity: 0.9; }
  /* ===== 进球白闪 ===== */
  #flash { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%); }
  #flash.go { animation: flashanim 0.65s ease-out; }
  @keyframes flashanim { 0% { opacity: 1; } 100% { opacity: 0; } }
  /* ===== 开始 / 结束面板 ===== */
  .panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 40;
    padding: 32px 44px; text-align: center; max-width: min(92vw, 540px); }
  .panel h1 { margin: 0 0 6px; font-size: clamp(30px, 6vw, 46px); letter-spacing: 8px; }
  .panel .sub { margin: 0 0 18px; color: #9fd0ff; font-size: 13px; letter-spacing: 3px; }
  .controls { list-style: none; margin: 0 auto 26px; padding: 0; color: #e8f4ff; font-size: 14px;
    line-height: 2.15; text-align: left; display: inline-block; }
  .controls kbd { display: inline-block; min-width: 24px; padding: 1px 8px; margin: 0 3px; border-radius: 6px;
    background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); font-family: inherit; font-size: 12px; text-align: center; }
  .panel button { pointer-events: auto; cursor: pointer; border: none; border-radius: 999px;
    padding: 13px 48px; font-size: 18px; font-weight: 800; letter-spacing: 4px; color: #0b2b4a;
    background: linear-gradient(135deg, #7ee8fa, #4dd2ff 55%, #2f9dff);
    box-shadow: 0 6px 22px rgba(77, 210, 255, 0.45); transition: transform 0.15s, box-shadow 0.15s; }
  .panel button:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 26px rgba(77, 210, 255, 0.55); }
  .panel button:active { transform: scale(0.96); }
  .foot { margin: 16px 0 0; font-size: 11px; color: #8fb8d9; letter-spacing: 1px; }
  #finalScore { font-size: clamp(44px, 9vw, 76px); font-weight: 900; margin: 6px 0 2px; letter-spacing: 4px; }
  #endSub { color: #ffe27a; font-size: 18px; margin-bottom: 22px; letter-spacing: 2px; }
  .hidden { display: none !important; }
  @media (max-width: 640px) { .panel { padding: 24px 18px; } .controls { font-size: 12px; } }
</style>
<!-- 通过 importmap 引入 Three.js（ES Module），除此之外无任何外部资源 -->
<script type="importmap">
  { "imports": { "three": "https://unpkg.com/three@0.160.0/build/three.module.js" } }
</script>
</head>
<body>
  <!-- 顶部 HUD -->
  <div id="hudRoot">
    <div id="scoreboard" class="glass">
      <span class="team blue">蓝队</span><span class="num" id="scoreBlue">0</span><span>:</span><span class="num" id="scoreRed">0</span><span class="team red">红队</span>
      <span id="clock">90s</span>
    </div>
    <div id="msg"></div>
    <div id="staminaWrap" class="glass"><span>体力</span><div class="bar"><div id="staminaFill"></div></div></div>
    <div id="powerWrap" class="glass"><span>力量</span><div class="bar"><div id="powerFill"></div></div></div>
    <div id=&qu.........完整代码请登录后点击上方下载按钮下载查看