js+css实现简洁版“掼蛋”扑克牌游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js+css实现简洁版掼蛋扑克牌游戏代码，单机人机对战：你（东）和一名 AI 队友（西）对抗另外两名 AI 对手（南、北）。简化规则：实现了掼蛋的核心牌型（单张、对子、三带二、顺子、同花顺、炸弹、天王炸等），但未包含“进贡/还贡”和“打几升级”的复杂多局机制，专注于单局的打牌体验。 AI 智能：AI 具备基本的出牌逻辑，会判断牌型、寻找能压过上家的牌、并在自己出牌时选择合理的牌型。

代码标签： js css 简洁掼蛋扑克牌游戏代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>掼蛋 · 人机对战（精致UI版）</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root{
      --bg:#0a0f1c;--felt:#0a2c20;--felt-dark:#0e3a2a;--panel:#0b1224cc;--text:#e5e7eb;--muted:#94a3b8;
      --accent:#22d3ee;--good:#22c55e;--warn:#f59e0b;--bad:#ef4444;--glass:#0b152acc;--border:#1d2a46;
      --card-bg:#f9fafb;--card-border:#d1d5db;--card-red:#dc2626;--card-black:#111827;
    }
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:radial-gradient(1300px 800px at 50% -220px,#0b1022,#060913) fixed;color:var(--text);
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;overflow:hidden;user-select:none}

    #app{max-width:1300px;height:100%;margin:0 auto;display:flex;flex-direction:column;padding:10px}

    /* 顶栏 */
    .topbar{
      flex-shrink:0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--glass);
      border:1px solid var(--border);border-radius:14px;padding:10px 12px;
      box-shadow:0 10px 30px #0009,inset 0 1px 0 #ffffff10;backdrop-filter:blur(8px)
    }
    button{
      background:#0b152a;border:1px solid #223053;color:var(--text);border-radius:10px;padding:8px 12px;
      outline:none;transition:.2s;cursor:pointer
    }
    button:hover{border-color:#34508c}
    button.primary{background:linear-gradient(180deg,#1f3b74,#1b3364);border-color:#2b478a}
    button:disabled{opacity:.5;cursor:not-allowed}
    .chip{display:inline-flex;gap:6px;align-items:center;border:1px solid #223053;background:#0b152a;border-radius:999px;padding:4px 10px}
    .kbd{display:inline-block;border:1px solid #223053;background:#0b152a;border-radius:6px;padding:2px 6px;font-size:12px}

    /* 牌桌 */
    .table{
      flex-grow:1;position:relative;margin-top:10px;
      background:radial-gradient(1100px 700px at 50% 50%,var(--felt-dark),var(--felt));
      border:1px solid #103325;border-radius:24px;box-shadow:inset 0 10px 60px #0008,inset 0 0 0 2px #042a1e
    }

    /* 玩家区 */
    .player-area{position:absolute;display:flex;flex-direction:column;gap:8px;transition: transform 0.3s ease-out;}
    /* S 南（你） */
    #player-s{bottom:10px;left:50%;transform:translateX(-50%);width:70%;max-width:860px;align-items:center}
    /* N 北（队友） */
    #player-n{top:10px;left:50%;transform:translateX(-50%);width:60%;align-items:center}
    /* W 西（对手） */
    #player-w{left:10px;top:50%;transform:translateY(-50%);width:180px;align-items:flex-start}
    /* E 东（对手） */
    #player-e{right:10px;top:50%;transform:translateY(-50%);width:180px;align-items:flex-end}

    .player-info{
      display:flex;align-items:center;gap:8px;padding:4px 10px;
      background:var(--glass);border:1px solid var(--border);border-radius:12px;backdrop-filter:blur(6px);
      transition: outline 0.2s;
    }
    .player-info.active{outline:2px solid var(--accent)}

    .hand{display:flex;position:relative}
    #player-s .hand{height:100px;margin-bottom:10px;  margin-left: -102%; }
    #player-n .hand{height:60px; }
    #player-w .hand,#player-e .hand{flex-direction:column;width:60px;height:300px;}

    .last-played{
      display:flex;justify-content:center;align-items:center;min-height:80px;
      padding:8px;border-radius:12px;
      background:rgba(0,0,0,0.15);
      border:1px solid rgba(255,255,255,0.08)
    }
    #player-s .last-played{width:100%}
    #player-n .last-played{min-width:300px}
    #player-w .last-played, #player-e .last-played{flex-direction:column;width:100%;min-height:160px}

    /* 卡牌 */
    .card{
      width:70px;height:96px;border-radius:8px;border:1px solid var(--card-border);
      background:var(--card-bg);color:var(--card-black);
      display:flex;flex-direction:column;justify-content:space-between;padding:4px;
      box-shadow:0 4px 10px rgba(0,0,0,0.4);font-weight:700;font-size:18px;
      position:absolute;transition:transform 0.2s, opacity 0.3s;
    }
    .card .rank{margin-left:2px}
    .card .suit{font-size:12px;align-self:flex-end}
    .card.red{color:var(--card-red)}
    .card.joker .rank{font-size:14px;font-weight:bold}
    .card.joker.red{background:linear-gradient(135deg,#fff,#ffdada)}
    .card.joker.black{background:linear-gradient(135deg,#ddd,#ccc)}

    .card.back{background:linear-gradient(135deg,#2c3e50,#1a242f);border-color:#111}
    #player-w .card.back, #player-e .card.back{width:96px;height:70px;transform:rotate(90deg);transform-origin: 50% 50%;}

    /* 玩家手牌交互 */
    #player-s .card{cursor:pointer}
    #player-s .card.selected{transform:translate.........完整代码请登录后点击上方下载按钮下载查看