js实现新手入门四川麻将游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：js实现新手入门四川麻将游戏代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>四川麻将 · 新手教学版</title>
<style>
:root{
  --felt:#0d5c3f; --felt-dark:#073b28; --gold:#ffd54f;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  background:radial-gradient(ellipse at center,var(--felt) 0%,var(--felt-dark) 100%);
  color:#fff;overflow:hidden;user-select:none;
}
/* ---------- 通用 ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;z-index:100;padding:14px}
.btn{
  border:none;border-radius:10px;color:#fff;cursor:pointer;padding:10px 20px;font-size:15px;
  background:linear-gradient(180deg,#4a8f68,#2e6b4a);box-shadow:0 3px 6px rgba(0,0,0,.4);
  transition:transform .1s;font-family:inherit;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn.big{font-size:19px;padding:13px 34px}
.btn.small{font-size:13px;padding:6px 12px}
.btn.gold{background:linear-gradient(180deg,#f2b705,#c88a00);color:#3a2a00;font-weight:bold}
.note{font-size:13px;color:#cfe8d8;line-height:1.7;margin:8px 0}
.gold{color:var(--gold)}
/* ---------- 欢迎页 ---------- */
.welcome-box{background:linear-gradient(160deg,#14563c,#0a3524);border:2px solid rgba(255,213,79,.55);border-radius:20px;padding:36px 44px;text-align:center;max-width:560px;box-shadow:0 14px 50px rgba(0,0,0,.7)}
.w-title{font-size:46px;font-weight:bold;color:var(--gold);text-shadow:0 3px 8px rgba(0,0,0,.6)}
.w-sub{font-size:17px;color:#bfe3cd;margin:6px 0 20px}
#w-tiles{display:flex;justify-content:center;gap:5px;margin-bottom:22px}
.w-feats{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap;justify-content:center}
.w-feats>div{background:rgba(255,255,255,.08);border-radius:12px;padding:12px 14px;font-size:13px;line-height:1.6;width:150px;text-align:left}
.welcome-box .btn{display:block;width:100%;margin-top:10px}
/* ---------- 弹窗 ---------- */
.modal-box{background:#143d2b;border:2px solid rgba(255,213,79,.5);border-radius:16px;padding:24px;max-width:680px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 12px 44px rgba(0,0,0,.65)}
.modal-box h2{color:var(--gold);margin-bottom:12px;font-size:22px}
.modal-box h3{margin:16px 0 6px;color:#a5d6a7;font-size:16px;border-left:4px solid var(--gold);padding-left:8px}
.modal-box p,.modal-box li{font-size:14px;line-height:1.8;color:#e8f5ec}
.modal-box ul,.modal-box ol{padding-left:22px}
.rule-row{display:flex;gap:18px;flex-wrap:wrap;margin:8px 0}
.rule-row>div{background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;font-size:13px}
.ex{display:inline-flex;gap:3px;margin-top:6px;vertical-align:middle}
.fan-table,.score-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:14px}
.fan-table th,.fan-table td,.score-table th,.score-table td{border:1px solid rgba(255,255,255,.25);padding:6px 10px;text-align:center}
.fan-table th,.score-table th{background:rgba(255,213,79,.15);color:var(--gold)}
.pos{color:#81c784;font-weight:bold}.neg{color:#ef9a9a;font-weight:bold}
/* ---------- 定缺 ---------- */
.que-options{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap;justify-content:center}
.que-card{background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.25);border-radius:14px;padding:16px 18px;cursor:pointer;text-align:center;transition:.15s;width:180px}
.que-card:hover{border-color:var(--gold);transform:translateY(-4px);background:rgba(255,213,79,.12)}
.que-suit{font-size:34px;font-weight:bold}
.que-count{font-size:13px;margin:6px 0}
.que-count .rec{background:#c62828;color:#fff;border-radius:8px;padding:1px 7px;font-size:11px}
.que-tiles{display:flex;gap:2px;justify-content:center;flex-wrap:wrap;min-height:42px}
/* ---------- 游戏布局 ---------- */
#game{display:flex;flex-direction:column;height:100vh}
#topbar{height:46px;display:flex;align-items:center;gap:12px;padding:0 12px;background:rgba(0,0,0,.38);font-size:14px;flex-shrink:0}
#topbar .logo{font-weight:bold;color:var(--gold)}
#queInfo{font-size:13px;color:#ffe082}
.spacer{flex:1}
#table{flex:1;display:grid;grid-template-columns:168px 1fr 168px;grid-template-rows:auto 1fr auto;grid-template-areas:". top ." "left center right" ". bottom .";gap:6px;padding:6px 10px;min-height:0;overflow:hidden}
.parea{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:0;overflow:hidden}
#p2{grid-area:top}#p3{grid-area:left;justify-content:center}#p1{grid-area:right;justify-content:center}#p0{grid-area:bottom}
#center{grid-area:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:0}
.pinfo{display:flex;align-items:center;gap:6px;font-size:12px;background:rgba(0,0,0,.38);padding:3px 10px;border-radius:14px;white-space:nowrap}
.pname.active{color:var(--gold);font-weight:bold;text-shadow:0 0 8px rgba(255,213,79,.8)}
.que-badge{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.3);padding:0 6px;border-radius:9px;fon.........完整代码请登录后点击上方下载按钮下载查看