国标麻将一抽胡

我将创建一个简单的国标麻将一抽胡游戏，玩家每次随机获得一个听牌牌型，然后从一组牌中抽取一张，看是否能胡牌。

思路分析

随机生成各种国标麻将听牌牌型（缺一张即可胡牌）
显示当前牌型，其中一张牌为"？"表示待抽牌
准备一组待抽牌，其中包含可以胡牌的牌和其他无关牌
玩家点击抽牌，显示抽牌结果和是否胡牌

下面是完整代码实现：

<!DOCTYPE html>

<head>

<title>国标麻将一抽胡</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: 'Microsoft YaHei', sans-serif;

}

body {

background: linear-gradient(135deg, #1a5f23 0%, #0d3b1a 100%);

color: #fff;

min-height: 100vh;

padding: 20px;

display: flex;

flex-direction: column;

align-items: center;

}

.container {

max-width: 900px;

width: 100%;

background-color: rgba(0, 0, 0, 0.6);

border-radius: 20px;

padding: 30px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

margin-top: 20px;

}

header {

text-align: center;

margin-bottom: 30px;

width: 100%;

}

h1 {

font-size: 2.8rem;

color: #ffde59;

text-shadow: 3px 3px 0 #d35400;

margin-bottom: 10px;

letter-spacing: 2px;

}

.subtitle {

font-size: 1.2rem;

color: #b8e994;

margin-bottom: 20px;

}

.game-area {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

gap: 30px;

}

.hand-section, .draw-section {

flex: 1;

min-width: 300px;

background-color: rgba(10, 60, 20, 0.7);

border-radius: 15px;

padding: 25px;

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);

}

.section-title {

font-size: 1.8rem;

color: #ffde59;

margin-bottom: 20px;

text-align: center;

border-bottom: 2px solid #ffde59;

padding-bottom: 10px;

}

.current-hand {

display: flex;

flex-wrap: wrap;

gap: 12px;

justify-content: center;

margin-bottom: 25px;

min-height: 120px;

}

.tile {

width: 70px;

height: 100px;

background-color: #fff3cd;

border-radius: 8px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

font-size: 1.8rem;

font-weight: bold;

color: #222;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

transition: all 0.3s;

cursor: default;

position: relative;

overflow: hidden;

}

.tile::before {

content: '';

position: absolute;

top: 5px;

left: 5px;

right: 5px;

bottom: 5px;

border: 1px solid rgba(0, 0, 0, 0.1);

border-radius: 5px;

}

.tile.character {

color: #c0392b;

}

.tile.bamboo {

color: #27ae60;

}

.tile.dot {

color: #2980b9;

}

.tile.wind {

color: #8e44ad;

}

.tile.dragon {

color: #d35400;

}

.tile.missing {

background-color: #ffcccc;

color: #c0392b;

font-size: 2.5rem;

}

.tile-value {

font-size: 1.4rem;

}

.tile-type {

font-size: 1rem;

margin-top: 5px;

}

.hand-info {

background-color: rgba(0, 0, 0, 0.3);

padding: 15px;

border-radius: 10px;

text-align: center;

margin-top: 20px;

}

.hand-info h3 {

color: #ffde59;

margin-bottom: 10px;

}

.draw-options {

display: flex;

flex-wrap: wrap;

gap: 15px;

justify-content: center;

margin-bottom: 30px;

}

.draw-tile {

width: 80px;

height: 110px;

background-color: #fff3cd;

border-radius: 8px;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

font-size: 1.8rem;

font-weight: bold;

color: #222;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);

transition: all 0.3s;

cursor: pointer;

position: relative;

}

.draw-tile:hover {

transform: translateY(-10px);

box-shadow: 0 15px 20px rgba(0, 0, 0, 0.4);

}

.draw-tile:active {

transform: translateY(-5px);

}

.draw-tile.selected {

transform: translateY(-10px);

box-shadow: 0 0 20px #ffde59;

border: 3px solid #ffde59;

}

.draw-button {

display: block;

margin: 30px auto;

padding: 15px 40px;

font-size: 1.5rem;

background: linear-gradient(to bottom, #ffde59, #f39c12);

color: #8b4513;

border: none;

border-radius: 50px;

cursor: pointer;

font-weight: bold;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

transition: all 0.3s;

}

.draw-button:hover {

transform: scale(1.05);

box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);

}

.draw-button:active {

transform: scale(0.98);

}

.draw-button:disabled {

background: #cccccc;

color: #666666;

cursor: not-allowed;

transform: none;

box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

}

.result-section {

margin-top: 40px;

background-color: rgba(0, 0, 0, 0.5);

border-radius: 15px;

padding: 25px;

text-align: center;

display: none;

}

.result-section.show {

display: block;

animation: fadeIn 0.8s;

}

@keyframes fadeIn {

from { opacity: 0; }

to { opacity: 1; }

}

.result-title {

font-size: 2.2rem;

margin-bottom: 15px;

}

.result-win {

color: #2ecc71;

}

.result-lose {

color: #e74c3c;

}

.result-details {

font-size: 1.3rem;

line-height: 1.8;

margin-bottom: 20px;

}

.winning-tile {

display: inline-block;

padding: 5px 15px;

background-color: #fff3cd;

color: #c0392b;

border-radius: 5px;

font-weight: bold;

font-size: 1.4rem;

margin: 0 5px;

}

.stats {

display: flex;

justify-content: space-around;

margin-top: 30px;

background-color: rgba(0, 0, 0, 0.3);

padding: 20px;

border-radius: 15px;

}

.stat-item {

text-align: center;

}

.stat-value {

font-size: 2.5rem;

font-weight: bold;

color: #ffde59;

}

.stat-label {

font-size: 1.1rem;

color: #b8e994;

}

.rules {

margin-top: 30px;

background-color: rgba(10, 60, 20, 0.7);

padding: 20px;

border-radius: 15px;

font-size: 1.1rem;

line-height: 1.6;

}

.rules h3 {

color: #ffde59;

margin-bottom: 10px;

}

.rules ul {

padding-left: 20px;

}

.rules li {

margin-bottom: 8px;

}

footer {

margin-top: 30px;

text-align: center;

color: #b8e994;

font-size: 0.9rem;

width: 100%;

padding-top: 20px;

border-top: 1px solid rgba(255, 255, 255, 0.1);

}

@media (max-width: 768px) {

.game-area {

flex-direction: column;

}

.hand-section, .draw-section {

width: 100%;

}

h1 {

font-size: 2rem;

}

.tile {

width: 55px;

height: 80px;

font-size: 1.5rem;

}

.draw-tile {

width: 65px;

height: 90px;

font-size: 1.5rem;

}

</style>

</head>

<body>

<h1>国标麻将一抽胡</h1>

<p class="subtitle">随机生成听牌牌型，只需一抽即可胡牌！</p>

</header>

</div>

<p id="handDescription">您当前有一个听牌牌型，只需要抽取正确的牌即可胡牌！</p>

</div>

<h2 class="section-title">抽取一张牌</h2>

</div>

<button class="draw-button" id="drawButton">抽取选中的牌</button>

</div>

</div>

</div>

</div>

</div>

<ul>

<li>系统随机生成一个国标麻将听牌牌型（缺一张即可胡牌）</li>

<li>牌型中的"？"表示缺的那张牌</li>

<li>从右侧5张牌中选择一张抽取</li>

<li>如果抽到正确的牌，则胡牌！否则不胡</li>

<li>每次游戏都会随机生成新的牌型和待抽牌</li>

<li>国标麻将胡牌牌型包括：平胡、碰碰胡、混一色等</li>

</ul>

</div>

<p>国标麻将一抽胡游戏 | 仅用于娱乐目的 | 使用HTML5、CSS3和JavaScript开发</p>

</footer>

// 麻将牌数据

const mahjongTiles = {

characters: ['1万', '2万', '3万', '4万', '5万', '6万', '7万', '8万', '9万'],

bamboos: ['1条', '2条', '3条', '4条', '5条', '6条', '7条', '8条', '9条'],

dots: ['1筒', '2筒', '3筒', '4筒', '5筒', '6筒', '7筒', '8筒', '9筒'],

winds: ['东风', '南风', '西风', '北风'],

dragons: ['红中', '发财', '白板']

};

// 所有牌的数组

const allTiles = [

...mahjongTiles.characters,

...mahjongTiles.bamboos,

...mahjongTiles.dots,

...mahjongTiles.winds,

...mahjongTiles.dragons

];

// 预定义的听牌牌型（13张牌+1张听的牌）

const winningHands = [

{

tiles: ["1万", "2万", "3万", "4筒", "5筒", "6筒", "7条", "8条", "9条", "东风", "东风", "东风", "5万", "7万"],

winningTile: "6万",

description: "平胡：基本胡牌牌型，由四组顺子或刻子加一对将组成"

{

tiles: ["1万", "1万", "1万", "3条", "3条", "3条", "5筒", "5筒", "5筒", "北风", "北风", "北风", "红中"],

winningTile: "红中",

description: "碰碰胡：由四组刻子（三张相同）加一对将组成"

{

tiles: ["1万", "2万", "3万", "4万", "5万", "6万", "7万", "8万", "9万", "东风", "东风", "东风", "5万"],

winningTile: "5万",

description: "混一色：由一种花色牌加上字牌组成的胡牌牌型"

{

tiles: ["1条", "2条", "3条", "4条", "4条", "4条", "5条", "6条", "7条", "8条", "8条", "8条", "9条"],

winningTile: "9条",

description: "清一色：全部由同一种花色的牌组成的胡牌牌型"

{

tiles: ["1万", "1万", "1万", "9万", "9万", "9万", "1筒", "2筒", "3筒", "7筒", "8筒", "9筒", "白板"],

winningTile: "白板",

description: "全带幺：所有顺子、刻子、将牌都包含1或9"

{

tiles: ["1万", "1万", "3万", "3万", "5万", "5万", "7万", "7万", "9条", "9条", "东风", "东风", "发财"],

winningTile: "发财",

description: "七对：由七个对子组成的特殊胡牌牌型"

{

tiles: ["1万", "9万", "1条", "9条", "1筒", "9筒", "东风", "南风", "西风", "北风", "红中", "发财", "白板"],

winningTile: "白板",

description: "十三幺：由13种幺九牌各一张，再加上其中任意一张组成"

}

];

// 游戏状态

let gameState = {

currentHand: null,

winningTile: null,

drawOptions: [],

selectedTileIndex: null,

gamesPlayed: 0,

wins: 0

};

// DOM元素

const currentHandEl = document.getElementById('currentHand');

const drawOptionsEl = document.getElementById('drawOptions');

const drawButton = document.getElementById('drawButton');

const resultSection = document.getElementById('resultSection');

const handDescription = document.getElementById('handDescription');

const gamesPlayedEl = document.getElementById('gamesPlayed');

const winsEl = document.getElementById('wins');

const winRateEl = document.getElementById('winRate');

// 初始化游戏

function initGame() {

// 随机选择一个听牌牌型

const handIndex = Math.floor(Math.random() * winningHands.length);

const selectedHand = winningHands[handIndex];

// 复制牌型数组

const handTiles = [...selectedHand.tiles];

gameState.winningTile = selectedHand.winningTile;

// 随机选择一张牌作为缺失的牌（用"？"表示）

const missingTileIndex = Math.floor(Math.random() * handTiles.length);

gameState.currentHand = {

tiles: handTiles,

missingIndex: missingTileIndex,

description: selectedHand.description

};

// 更新描述

handDescription.textContent = selectedHand.description;

// 生成待抽牌选项（包含正确的牌和4张随机牌）

gameState.drawOptions = generateDrawOptions(gameState.winningTile);

gameState.selectedTileIndex = null;

// 更新UI

renderCurrentHand();

renderDrawOptions();

// 隐藏结果

resultSection.classList.remove('show');

// 启用抽牌按钮

drawButton.disabled = true;

drawButton.textContent = "抽取选中的牌";

}

// 生成待抽牌选项

function generateDrawOptions(winningTile) {

const options = [winningTile];

// 添加4张随机牌（不能与正确牌重复）

while (options.length < 5) {

const randomTile = allTiles[Math.floor(Math.random() * allTiles.length)];

if (!options.includes(randomTile) && randomTile !== winningTile) {

options.push(randomTile);

}

// 打乱数组

return shuffleArray(options);

}

// 打乱数组（Fisher-Yates洗牌算法）

function shuffleArray(array) {

const newArray = [...array];

for (let i = newArray.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

newArray\[i\], newArray\[j\]\] = \[newArray\[j\], newArray\[i\]\]; } return newArray; } // 渲染当前手牌 function renderCurrentHand() { currentHandEl.innerHTML = ''; const hand = gameState.currentHand; hand.tiles.forEach((tile, index) =\> { const tileEl = document.createElement('div'); tileEl.className = 'tile'; if (index === hand.missingIndex) { tileEl.classList.add('missing'); tileEl.innerHTML = '？'; } else { // 根据牌的类型添加对应的CSS类 if (tile.includes('万')) tileEl.classList.add('character'); else if (tile.includes('条')) tileEl.classList.add('bamboo'); else if (tile.includes('筒')) tileEl.classList.add('dot'); else if (tile.includes('风')) tileEl.classList.add('wind'); else tileEl.classList.add('dragon'); const tileValue = tile.replace(/\[\^0-9\]/g, '') \|\| tile.substring(0, 1); const tileType = tile.replace(/\[0-9\]/g, '') \|\| tile.substring(1); tileEl.innerHTML = \` \

${tileValue}\ \

${tileType}\ \`; } currentHandEl.appendChild(tileEl); }); } // 渲染抽牌选项 function renderDrawOptions() { drawOptionsEl.innerHTML = ''; gameState.drawOptions.forEach((tile, index) =\> { const tileEl = document.createElement('div'); tileEl.className = 'draw-tile'; // 根据牌的类型添加对应的CSS类 if (tile.includes('万')) tileEl.classList.add('character'); else if (tile.includes('条')) tileEl.classList.add('bamboo'); else if (tile.includes('筒')) tileEl.classList.add('dot'); else if (tile.includes('风')) tileEl.classList.add('wind'); else tileEl.classList.add('dragon'); const tileValue = tile.replace(/\[\^0-9\]/g, '') \|\| tile.substring(0, 1); const tileType = tile.replace(/\[0-9\]/g, '') \|\| tile.substring(1); tileEl.innerHTML = \` \

${tileValue}\ \

${tileType}\ \`; tileEl.addEventListener('click', () =\> selectDrawTile(index)); drawOptionsEl.appendChild(tileEl); }); } // 选择抽牌 function selectDrawTile(index) { // 移除之前选中的样式 document.querySelectorAll('.draw-tile').forEach(tile =\> { tile.classList.remove('selected'); }); // 添加当前选中的样式 document.querySelectorAll('.draw-tile')\[index\].classList.add('selected'); // 更新选中的索引 gameState.selectedTileIndex = index; // 启用抽牌按钮 drawButton.disabled = false; } // 抽取选中的牌 function drawSelectedTile() { if (gameState.selectedTileIndex === null) return; const selectedTile = gameState.drawOptions\[gameState.selectedTileIndex\]; const isWin = selectedTile === gameState.winningTile; // 更新游戏统计 gameState.gamesPlayed++; if (isWin) gameState.wins++; // 更新统计显示 updateStats(); // 显示结果 showResult(isWin, selectedTile); // 禁用抽牌按钮 drawButton.disabled = true; drawButton.textContent = "重新开始游戏"; // 更改按钮功能为重新开始 drawButton.onclick = restartGame; } // 显示结果 function showResult(isWin, selectedTile) { resultSection.innerHTML = ''; const resultTitle = document.createElement('h2'); resultTitle.className = \`result-title ${isWin ? 'result-win' : 'result-lose'}\`; resultTitle.textContent = isWin ? '恭喜胡牌！' : '很遗憾，没有胡牌'; const resultDetails = document.createElement('div'); resultDetails.className = 'result-details'; const winningTileSpan = document.createElement('span'); winningTileSpan.className = 'winning-tile'; winningTileSpan.textContent = gameState.winningTile; const selectedTileSpan = document.createElement('span'); selectedTileSpan.className = 'winning-tile'; selectedTileSpan.textContent = selectedTile; if (isWin) { resultDetails.innerHTML = \` 您抽中了\${selectedTile}\，成功胡牌！ \胡牌牌型：\${gameState.currentHand.name}\ \${gameState.currentHand.description} \`; } else { resultDetails.innerHTML = \` 您抽中了\${selectedTile}\，但这不是胡牌所需要的牌。 \胡牌需要的牌是：\${gameState.winningTile}\ \胡牌牌型：\${gameState.currentHand.name}\ \`; } const restartButton = document.createElement('button'); restartButton.className = 'draw-button'; restartButton.textContent = '再来一局'; restartButton.onclick = restartGame; resultSection.appendChild(resultTitle); resultSection.appendChild(resultDetails); resultSection.appendChild(restartButton); resultSection.classList.add('show'); } // 重新开始游戏 function restartGame() { initGame(); drawButton.onclick = drawSelectedTile; } // 更新统计 function updateStats() { gamesPlayedEl.textContent = gameState.gamesPlayed; winsEl.textContent = gameState.wins; const winRate = gameState.gamesPlayed \> 0 ? Math.round((gameState.wins / gameState.gamesPlayed) \* 100) : 0; winRateEl.textContent = \`${winRate}%\`; } // 初始化事件监听器 drawButton.addEventListener('click', drawSelectedTile); // 初始化游戏 initGame(); // 添加键盘事件支持 document.addEventListener('keydown', (e) =\> { if (e.key \>= '1' \&\& e.key \<= '5') { const index = parseInt(e.key) - 1; if (index \< gameState.drawOptions.length) { selectDrawTile(index); } } else if (e.key === 'Enter' \|\| e.key === ' ') { if (!drawButton.disabled) { drawSelectedTile(); } else if (resultSection.classList.contains('show')) { restartGame(); } } else if (e.key === 'r' \|\| e.key === 'R') { restartGame(); } }); \ \ \ 游戏功能说明 1. 牌型生成：游戏随机生成7种不同的国标麻将听牌牌型，包括平胡、碰碰胡、混一色、清一色、全带幺、七对和十三幺。 2. 游戏流程： · 系统显示一个听牌牌型，其中一张牌用"？"表示缺失 · 右侧显示5张待抽牌，其中一张是正确的胡牌 · 玩家选择一张牌抽取 · 显示结果，告诉玩家是否胡牌 3. 游戏特性： · 每次游戏都会随机生成新的牌型和待抽牌 · 记录游戏统计：游戏次数、胡牌次数和胡牌率 · 支持键盘操作（按1-5选择牌，按Enter或空格键抽取） · 响应式设计，适配各种屏幕尺寸 4. 视觉效果： · 采用麻将主题的绿色和金色配色 · 牌面设计区分不同的花色（万、条、筒、风牌、箭牌） · 动画效果提升游戏体验您可以直接复制上面的代码到HTML文件中，然后在浏览器中打开即可开始游戏！

上一篇：基于大语言模型与高精度OCR融合的智能文档抽取技术，实现了版式无关的自动化信息提取

下一篇：leetcode 3454(扫描线模板题：矩形面积并)