js+css实现简化版打麻将人机对战游戏代码
代码语言:html
所属分类:游戏
代码描述:js+css实现简化版打麻将人机对战游戏代码,这个游戏是一个简化版的四人麻将,您将与三个电脑AI对战。以下是根据代码逻辑制定的游戏规则和玩法说明: 1. 游戏目标 游戏的目标是胡牌 (Win)。胡牌意味着将你手中的14张牌(13张手牌 + 1张刚摸的牌)组成一个符合规则的牌型。 2. 获胜牌型 在这个游戏中,有两种获胜牌型: 标准胡牌 (4个面子 + 1个对子) 对子 (Pair): 两张完全一样的牌。例如:两个"五万",两个"红中"。 面子 (Meld): 一个三张牌的组合。有两种类型: 顺子 (Cho
代码标签: js css 简化版 打 麻将 人机 对战 游戏 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>四人麻将 (人机对战)</title> <style> :root { --table-bg: #00684a; --player-bg: #00523b; --tile-bg: #fdfbe4; --tile-border: #bcaea0; --tile-face: #e9e2c9; --text-color: #fff; --action-btn-bg: #c0392b; /* SVG Fill Colors */ --dots-color: #2c3e50; --bams-color: #27ae60; --cracks-color: #c0392b; --honors-color: #2980b9; } body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .game-table { position: relative; width: 90vw; height: 90vh; max-width: 1000px; max-height: 1000px; background-color: var(--table-bg); border-radius: 50%; border: 10px solid #3a1e0b; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .center-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 20px; } .game-info { background: rgba(0,0,0,0.3); color: white; padding: 15px; border-radius: 10px; text-align: center; font-size: 1.2em; width: 200px; } .player-area { position: absolute; } .player-info { color: var(--text-color); font-weight: bold; text-align: center; margin-bottom: 10px; min-width: 150px; } .player-info .wind-indicator { color: #ffd700; } /* Player Positions */ #player-human { bottom: 2%; left: 50%; transform: translateX(-50%); } #player-right { top: 50%; right: -37%; transform: translateY(-50%) rotate(-90deg); } #player-top { top: 2%; left: 50%; transform: translateX(-50%) rotate(180deg); } #player-left { top: 50%; left: -37%; transform: translateY(-50%) rotate(90deg); } .hand { display: flex; gap: 5px; } .hand .new-tile { margin-left: 20px; } .tile { width: 50px; height: 70px; background-color: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 4px; box-shadow: 1px 1px 3px rgba(0,0,0,0.3); display: flex; justify-content: center; align-items: center; position: relative; user-select: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .tile::before { /* Tile face shading */ content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px; background: var(--tile-face); border: 1px solid #fff; border-radius: 2px; } .tile-content { position: relative; z-index: 1; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .tile-content svg { width: 85%; height: 85%; } .tile.hidden { background-color: #2ecc71; border-color: #27ae60; } .tile.hidden .tile-content { display: none; } .tile.hidden::before { background: #27ae60; } .human-hand .tile:hover { transform: translateY(-10px); } .human-hand .tile.selected { transform: translateY(-10px); box-shadow: 0 0 15px #f1c40f; } /* SVG Tile Colors */ .tile.dots .tile-content svg { fill: var(--dots-color); } .tile.bams .tile-content svg { fill: var(--bams-color); } .tile.cracks .tile-content svg { fill: var(--cracks-color); } .tile.honors .tile-content svg { fill: var(--honors-color); } .discard-pool { position: absolute; width: 240px; height: 120px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; transform-origin: center; } .discard-pool .tile { width: 38px; height: 52px; font-size: 18px; cursor: default; } .discard-pool .tile:hover { transform: none; } #discard-pool-human { bottom: 25%; left: 50%; transform: translateX(-50%); } #discard-pool-right { top: 50%; right: 22%; transform: translateY(-50%) rotate(-90deg); } #discard-pool-top { top: 25%; left: 50%; transform: translateX(-50%) rotate(180deg); } #discard-pool-left { top: 50%; left: 22%; transform: translateY(-50%) rotate(90deg); } #action-panel { position: absolute; bottom: 20%; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 100; } #action-panel button { padding: 15px 30px; font-size: 18px; font-weight: bold; border: none; border-radius: 8px; color: #fff; cursor: pointer; box-shadow: 0 4px 8px rgba(0,0,0,0.3); background-color: var(--action-btn-bg); display: none; /* Hidden by default */ } </style> </head> <body> <div class="game-table"> <!-- Player Areas --> <div class="player-area" id="player-human"> <div class="player-info"><span class="wind-indicator">東</span> 你</div> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0