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

代码语言：html

所属分类：其他

代码由qwen-3.8-max 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">
<title>绿茵对决 · TOP-DOWN FOOTBALL</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bungee&family=Chakra+Petch:wght@400;600;700&display=swap" rel="stylesheet">
<style>
:root{
  --bg0:#08110c; --bg1:#0e1b13;
  --panel:#111a14; --panel2:#0c130f; --line:#26382d;
  --ink:#e9f2ea; --mut:#8ba795;
  --amber:#ffb84d; --mint:#8fe0ae;
  --red:#e8402f; --blue:#3168e8;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:"Chakra Petch","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink); user-select:none; overflow-x:hidden;
  background:
    radial-gradient(900px 480px at 12% -6%, rgba(255,214,130,.12), transparent 60%),
    radial-gradient(900px 480px at 88% -6%, rgba(160,220,255,.10), transparent 60%),
    radial-gradient(1400px 900px at 50% 120%, rgba(46,140,75,.16), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 60%);
  min-height:100%;
}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.015) 0 2px, transparent 2px 13px);}
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 34px;position:relative}

/* ===== 顶部 ===== */
header.top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:6px 2px 16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px}
.ball-mark{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:26px;
  background:radial-gradient(circle at 32% 30%, #1d4d2e, #0b2015 70%);
  border:2px solid #2f5c3d; box-shadow:0 6px 18px -6px rgba(0,0,0,.7), inset 0 0 14px rgba(140,255,180,.12);
  animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand h1{font-family:Bungee,"Chakra Petch","Microsoft YaHei",sans-serif;font-weight:400;
  font-size:clamp(26px,3.6vw,38px);letter-spacing:2px;line-height:1;color:#f2f8f1;
  text-shadow:0 3px 0 #0a130d, 0 8px 24px rgba(0,0,0,.5)}
.brand h1 b{color:var(--amber);font-weight:400}
.brand small{display:block;margin-top:5px;font-size:11px;letter-spacing:4px;color:var(--mut);font-weight:600}
.live-chip{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:2px;font-weight:700;
  color:#ffd9d3;background:#1a1210;border:1px solid #4a2620;border-radius:999px;padding:8px 16px}
.live-chip .pulse{width:9px;height:9px;border-radius:50%;background:#ff5340;box-shadow:0 0 10px #ff5340;animation:blink 1.1s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}

/* ===== 计分板 ===== */
.scoreboard{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:10px;
  background:linear-gradient(180deg,#15211a,#0e1712);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;margin-bottom:12px;box-shadow:0 16px 40px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05)}
.team{display:flex;align-items:center;gap:12px}
.team-r{justify-content:flex-end}
.t-crest{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-weight:900;font-size:16px;color:#fff;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.35), 0 4px 10px -4px rgba(0,0,0,.6)}
.t-crest.red{background:linear-gradient(160deg,#ff6a55,#b01f10)}
.t-crest.blue{background:linear-gradient(160deg,#6d97ff,#1c3fa8)}
.t-names b{display:block;font-size:16px;letter-spacing:2px}
.t-names small{font-size:10px;letter-spacing:3px;color:var(--mut)}
.t-score{font-family:Bungee,sans-serif;font-size:34px;line-height:1;min-width:36px;text-align:center;
  color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.4)}
.t-score.pop{animation:pop .55s cubic-bezier(.2,1.8,.4,1)}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.7);color:var(--amber)}100%{transform:scale(1)}}
.clockbox{text-align:center;padding:0 8px}
.clock{font-family:Bungee,sans-serif;font-size:28px;letter-spacing:3px;color:var(--amber);
  background:#070c09;border:1px solid #21332a;border-radius:8px;padding:3px 16px;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.7), 0 0 18px rgba(255,184,77,.10)}
.half{margin-top:4px;font-size:10px;letter-spacing:4px;color:var(--mut);font-weight:700}
.icon-btn{background:#121d16;border:1px solid var(--line);color:var(--ink);border-radius:8px;
  width:42px;height:42px;font-size:17px;cursor:pointer;transition:.15s}
.icon-btn:hover{border-color:var(--amber);transform:translateY(-1px)}

/* ===== 球场舞台 ===== .........完整代码请登录后点击上方下载按钮下载查看