js+css实现二维平面足球游戏代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由minimax-m3.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, maximum-scale=1.0, user-scalable=no" />
<title>平面足球对战 · Flat Football Duel</title>
<style>
  :root{
    --bg:#080d18;
    --panel:#101a2e;
    --panel2:#0c1524;
    --line:#1e2c49;
    --txt:#e8eefb;
    --dim:#8496b4;
    --blue:#3b82f6;
    --red:#fb7185;
    --acc:#22d3ee;
    --gold:#fbbf24;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:
      radial-gradient(1100px 520px at 50% -12%, #1a2a4d 0%, rgba(26,42,77,0) 70%),
      radial-gradient(800px 500px at 100% 100%, #16233f 0%, rgba(22,35,63,0) 65%),
      var(--bg);
    color:var(--txt);
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .wrap{max-width:1180px;margin:0 auto;padding:16px 16px 40px}

  /* ===== 顶栏 ===== */
  header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
  .logo{display:flex;align-items:center;gap:10px}
  .ball{
    width:30px;height:30px;border-radius:50%;
    background:
      radial-gradient(circle at 32% 28%, #fff 0 34%, #dfe6f2 34% 100%);
    box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.45);
    position:relative;flex:none;
  }
  .ball::after{
    content:"";position:absolute;inset:8px;border-radius:50%;
    background:#0f172a;clip-path:polygon(50% 0,95% 32%,79% 90%,21% 90%,5% 32%);
    opacity:.82;
  }
  h1{font-size:19px;margin:0;letter-spacing:.5px;font-weight:700}
  h1 span{color:var(--acc)}
  .sub{font-size:12px;color:var(--dim);margin-top:2px}
  .spacer{flex:1}
  .btn{
    appearance:none;border:1px solid var(--line);background:var(--panel);
    color:var(--txt);padding:8px 14px;border-radius:10px;font-size:13px;cursor:pointer;
    font-family:inherit;transition:.15s;white-space:nowrap;
  }
  .btn:hover{border-color:#33456d;background:#152340;transform:translateY(-1px)}
  .btn:active{transform:translateY(0)}
  .btn.primary{
    background:linear-gradient(180deg,#2ea7f5,#1d6fd4);
    border-color:#3ba7f7;color:#fff;font-weight:700;
    box-shadow:0 6px 18px rgba(37,145,235,.35);
  }
  .btn.primary:hover{filter:brightness(1.08)}
  .btn.on{border-color:var(--acc);color:var(--acc);box-shadow:inset 0 0 0 1px rgba(34,211,238,.35)}

  /* ===== 记分条 ===== */
  .scorebar{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    background:linear-gradient(180deg,var(--panel),var(--panel2));
    border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:12px;
  }
  .team{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
  .dot{width:12px;height:12px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.07)}
  .dot.b{background:var(--blue)} .dot.r{background:var(--red)}
  .nums{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums;font-size:26px;font-weight:800;letter-spacing:1px}
  .nums .b{color:#7db4ff}.nums .r{color:#ff9aa8}.nums .sep{color:#3d4c6b}
  .clock{
    font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;color:var(--gold);
    background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);
    padding:3px 12px;border-radius:9px;min-width:84px;text-align:center;
  }
  .clock.warn{color:#ff6b6b;background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.35);animation:pulse .8s infinite}
  @keyframes pulse{50%{opacity:.55}}
  .poss{display:flex;flex-direction:column;gap:4px;min-width:190px;flex:1}
  .poss .lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--dim)}
  .bar{height:7px;border-radius:99px;background:#1b2740;overflow:hidden;display:flex}
  .bar i{display:block;height:100%;transition:width .3s}
  .bar i.b{background:linear-gradient(90deg,#2563eb,#60a5fa)}
  .bar i.r{background:linear-gradient(90deg,#fb7185,#f43f5e)}
  .chip{font-size:11px;color:var(--dim);border:1px solid var(--line);padding:4px 9px;border-radius:99px}

  /* ===== 舞台 ===== */
  .stage{
    position:relative;border-radius:16px;overflow:hidden;
    border:1px solid var(--line);background:#0c1423;
    box-shadow:0 24px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.03);
  }
  canvas{display:block;width:100%;height:auto;touch-action:none}

  .overlay{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    background:rgba(6,10,20,.82);backdrop-filter:blur(7px);padding:20px;z-index:5;
  }
  .overlay.hide{display:none}
  .card{
    width:min(560px,100%);background:linear-gradient(180deg,#131e33,#0d1626);
    border:1px solid #25344f;border-radius:18px;padding:26px;text-align:center;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
  }
  .card h2{margin:0 0 6px;font-size:26px;letter-spacing:1px}
  .card h2 small{display:block;font-size:12px;color:var(--dim);letter-spacing:2px;font-weight:400;margin-top:6px;text-transform:uppercase}
  .card p{color:var(--dim);font-size:13px;line-height:1.7;margin:12px 0 18px}
  .seg{display:flex;gap:8px;justify-content:center;margin:0 0 18px;flex-wrap:wrap}
  .seg .btn{padding:8px 18px}
  .keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:8px;margin:18px 0 4px;text-align:left}
  .keys div{background:#0c1524;border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:12px;color:var(--dim)}
  .keys b{display:inline-block;min-width:52px;color:var(--txt);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
    background:#1a2740;border:1px solid #2c3d60;border-bottom-width:2px;border-radius:5px;padding:2px 6px;text-align:center;margin-right:6px}
  .scorers{margin:14px 0 0;font-size:12.5px;color:var(--dim);line-height:1.9;text-align:left}
  .scorers b{color:var(--txt)}
  .bigScore{font-size:52px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:2px;margin:6px 0 2px}
  .bigScore .b{color:#7db4ff}.bigScore .r{color:#ff9aa8}.bigScore .s{color:#4a5b7d;font-size:30px}

  /* ===== 提示 ===== */
  .tips{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
  .tip{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--dim);line-height:1.8}
  .tip h.........完整代码请登录后点击上方下载按钮下载查看