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

代码语言：html

所属分类：其他

代码由glm-5.3-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, maximum-scale=1, user-scalable=no">
<meta name="theme-color" content="#071009">
<title>平面足球对战 · Soccer Duel</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:radial-gradient(1200px 800px at 50% 18%,#15382b,#071009);
  display:flex;align-items:center;justify-content:center;
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:#e8f2e8;overflow:hidden;
}
#stage{position:relative}
canvas{display:block;border-radius:14px;touch-action:none;
  box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;
  background:rgba(5,12,9,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:14px}
.overlay.hidden{display:none}
.panel{width:min(440px,92%);max-height:96%;overflow:auto;
  background:rgba(10,24,18,.94);border:1px solid rgba(255,255,255,.12);border-radius:18px;
  padding:22px 26px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
h1{font-size:30px;text-align:center;letter-spacing:3px;
  background:linear-gradient(90deg,#7dd3fc,#fff 45%,#fca5a5);
  -webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:24px;text-align:center;letter-spacing:2px;margin-bottom:6px}
.sub{text-align:center;color:#8fae98;font-size:12px;letter-spacing:4px;margin:4px 0 14px}
.optrow{margin:11px 0}
.optlabel{font-size:12px;color:#9fb8a6;margin-bottom:6px;letter-spacing:2px}
.seg{display:flex;gap:8px}
.seg button{flex:1;padding:8px 0;border:1px solid rgba(255,255,255,.16);border-radius:10px;
  background:rgba(255,255,255,.05);color:#cfe3d3;font-size:14px;cursor:pointer;transition:.15s}
.seg button:hover{background:rgba(255,255,255,.12)}
.seg button.sel{background:linear-gradient(135deg,#2563eb,#38bdf8);border-color:transparent;
  color:#fff;font-weight:700;box-shadow:0 4px 14px rgba(37,99,235,.4)}
.btnrow{display:flex;gap:10px;margin-top:14px}
.bigbtn{flex:1;padding:12px 0;border:none;border-radius:12px;font-size:16px;font-weight:800;
  letter-spacing:2px;color:#fff;cursor:pointer;transition:.15s}
.bigbtn:hover{filter:brightness(1.12)}
.bigbtn.primary{background:linear-gradient(135deg,#16a34a,#65a30d);box-shadow:0 6px 20px rgba(22,163,74,.45);font-size:18px;padding:13px 0;width:100%;margin-top:14px}
.bigbtn.blue{background:linear-gradient(135deg,#2563eb,#0ea5e9);box-shadow:0 6px 20px rgba(37,99,235,.4)}
.bigbtn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.ctl{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px;line-height:2.15;color:#b9cdbd}
.ctl p{margin:0}
.c1{color:#7fb0ff}.c2{color:#ff9d9d}
kbd{display:inline-block;min-width:24px;padding:2px 6px;margin:0 2px;border-radius:6px;text-align:center;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-bottom-width:3px;
  font:600 12px/1.4 ui-monospace,Consolas,monospace;color:#fff}
#overScore{font-size:52px;font-weight:900;text-align:center;letter-spacing:6px;color:#fff;margin:10px 0 2px;
  font-variant-numeric:tabular-nums}
#overSub{text-align:center;color:#9fb8a6;font-size:14px;min-height:20px;margin-bottom:4px}
#pauseScore{text-align:center;color:#9fb8a6;font-size:14px;margin-bottom:4px}
</style>
</head>
<body>
<div id="stage">
  <canvas id="game"></canvas>

  <!-- 主菜单 -->
  <div id="menu" class="overlay">
    <div class="panel">
      <h1>平面足球对战</h1>
      <div class="sub">SOCCER DUEL · 2D 顶视角足球</div>
      <div class="optrow"><div class="optlabel">对战模式</div>
        <div class="seg" id="segMode">
          <button data-v="1p" class="sel">单人 · vs 电脑</button>
          <button data-v="2p">双人 · 同屏对战</button>
        </div>
      </div>
      <div class="optrow"><div class="optlabel">上场人数</div>
        <div class="seg" id="segSize">
          <button data-v=&qu.........完整代码请登录后点击上方下载按钮下载查看