js实现人机对战的打麻将游戏代码-html代码-BFW代码库

js实现人机对战的打麻将游戏代码

代码语言：html

所属分类：游戏

代码描述：js实现人机对战的打麻将游戏代码，可ai机器托管。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>JS 麻将（人机对战 · 四方布局 · 拟真UI）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root{
      --bg:#0a0f1c;
      --felt:#0e3a2a; /* 台呢 */
      --felt2:#0a2c20;
      --panel:#0c1428cc;--text:#e5e7eb;--muted:#94a3b8;--accent:#22d3ee;--good:#22c55e;--warn:#f59e0b;--bad:#ef4444;
      --tile:#f9fafb;--tile-edge:#d1d5db;--tile-font:#111827;--tile-back1:#334155;--tile-back2:#1f2937;
      --glow:#22d3ee;
    }
    html,body{height:100%;margin:0;background:radial-gradient(1200px 800px at 50% -200px,#0b1022,#060913) fixed;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial}
    #app{max-width:1220px;margin:12px auto;padding:10px}

    /* 顶部栏 */
    .topbar{
      display:flex;gap:10px;align-items:center;flex-wrap:wrap;
      background:linear-gradient(180deg,#0b1224,#0a1120);border:1px solid #1f2a44;border-radius:12px;
      padding:10px 12px;box-shadow:0 10px 30px #0006, inset 0 1px 0 #ffffff09
    }
    .chip{display:inline-flex;gap:6px;align-items:center;border:1px solid #223053;background:#0b152a;border-radius:999px;padding:4px 10px}
    button{
      background:#0b152a;border:1px solid #243250;color:var(--text);border-radius:8px;padding:6px 10px;
      outline:none;transition:.2s;box-shadow:inset 0 0 0 1px #0003;cursor:pointer
    }
    button.primary{background:linear-gradient(180deg,#1f3b74,#1b3364);border-color:#2b478a}
    button:disabled{opacity:.55;cursor:not-allowed}

    /* 四方麻将桌布局 */
    .table{
      margin-top:12px;
      display:grid;
      grid-template-columns: 1fr 620px 1fr;
      grid-template-rows: 170px 620px 230px;
      gap:12px;
      align-items:stretch;
    }

    .seat{
      background:linear-gradient(180deg,#0b1224,#0a1120);
      border:1px solid #1f2a44;border-radius:12px;padding:10px;
      box-shadow:0 10px 30px #0006, inset 0 1px 0 #ffffff09;
      display:flex;flex-direction:column;gap:8px;overflow:hidden
    }
    .seat .name{display:flex;justify-content:space-between;align-items:center;color:#cbd5e1;font-size:14px}
    .seat .name .tag{color:#94a3b8;font-size:12px}
    .hand{display:flex;gap:6px;align-items:flex-end;flex-wrap:nowrap}
    .hand.wrap{flex-wrap:wrap}
    .hand.v{flex-direction:column;align-items:flex-start;height:100%;overflow:hidden}
    .melds{display:flex;gap:6px;flex-wrap:wrap;min-height:38px}
    .melds.v{flex-direction:column}
    /* 中心牌河 + 风位罗盘 */
    .center{
      grid-column:2;grid-row:2;
      position:relative;border-radius:18px;
      background:radial-gradient(900px 600px at 50% 40%, var(--felt), var(--felt2));
      border:1px solid #103325;
      box-shadow: inset 0 10px 60px #0008, inset 0 0 0 2px #042a1e;
    }
    .disc-grid{
      position:absolute;display:grid;gap:6px;
    }
    /* 牌河各方布局（尽量接近真实摆放） */
    #d-n{top:14px;left:50%;transform:transl.........完整代码请登录后点击上方下载按钮下载查看