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

代码语言：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:translateX(-50%);grid-template-columns:repeat(10, 34px)}
    #d-s{bottom:14px;left:50%;transform:translateX(-50%);grid-template-columns:repeat(10, 34px)}
    #d-w{left:14px;top:50%;transform:translateY(-50%);grid-template-columns:repeat(2, 34px)}
    #d-e{right:14px;top:50%;transform:translateY(-50%);grid-template-columns:repeat(2, 34px)}

    /* 风位罗盘 */
    .compass{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:160px;height:160px;border-radius:50%;
      border:1px solid #0b2b22;
      box-shadow: inset 0 0 0 2px #114536, 0 6px 20px #0008;
      display:grid;place-items:center;color:#cbd5e1
    }
    .compass .ring{
      position:absolute;inset:8px;border-radius:50%;border:1px dashed #13614b30
    }
    .compass .label{position:absolute;font-weight:700}
    .compass .label.e{top:50%;right:6px;transform:translateY(-50%)}
    .compass .label.w{top:50%;left:6px;transform:translateY(-50%)}
    .compass .label.n{top:6px;left:50%;transform:translateX(-50%)}
    .compass .label.s{bottom:6px;left:50%;transform:translateX(-50%)}
    .compass .label.active{color:#22d3ee;text-shadow:0 0 10px #22d3ee99}
    .compass .core{width:56px;height:56px;border-radius:50%;background:#0d2b22;border:1px solid #13443a;display:grid;place-items:center}
    .compass .core .wind{font-size:18px;color:#a7f3d0}

    /* 四个方位的容器 */
    #seat-n{grid-column:2;grid-row:1}
    #seat-s{grid-column:2;grid-row:3}
    #seat-w{grid-column:1;grid-row:2}
    #seat-e{grid-column:3;grid-row:2}

    /* 牌样式（正面/背面） */
    .tile{
      width:38px;height:56px;border-radius:6px;border:1px solid var(--tile-edge);
      background:linear-gradient(180deg,#fff,#f1f5f9);color:var(--tile-font);
      display:flex;align-items:center;justify-content:center;font-weight:800;user-select:none;
      box-shadow:0 2px 6px #0007;position:relative;font-size:14px;letter-spacing:0.5px
    }
    .tile:before{
      content:'';position:absolute;inset:0;border-radius:6px;
      box-shadow:inset 0 4px 8px #ffffffcc, inse.........完整代码请登录后点击上方下载按钮下载查看