# HTML 实现"出牌阶段将手牌置于牌堆顶"功能 以下是一个简单的HTML实现，模拟卡牌游戏中将手牌放到牌堆顶的操作： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>卡牌游戏模拟</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; } .game-area { display: flex; justify-content: space-around; width: 100%; margin-bottom: 20px; } .deck, .hand { border: 2px solid #333; border-radius: 10px; padding: 15px; min-height: 150px; width: 45%; text-align: center; } .card { display: inline-block; width: 60px; height: 90px; background-color: white; border: 1px solid #000; border-radius: 5px; margin: 5px; line-height: 90px; text-align: center; cursor: pointer; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); } .deck .card { background-color: #f0f0f0; } .controls { margin-top: 20px; } button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background-color: #45a049; } .phase-indicator { margin-bottom: 20px; font-size: 18px; font-weight: bold; } </style> </head> <body> <div class="phase-indicator">当前阶段: <span id="phase">出牌阶段</span></div> <div class="game-area"> <div class="deck"> <h3>牌堆</h3> <div id="deck-cards"></div> </div> <div class="hand"> <h3>手牌</h3> <div id="hand-cards"></div> </div> </div> <div class="controls"> <button id="end-phase">结束阶段</button> <button id="reset">重置</button> </div> <script> // 初始化牌堆和手牌 let deck = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; let hand = ['♥A', '♠2', '♦3', '♣4', '♥5']; let isPlayingPhase = true; // 渲染牌堆和手牌 function renderCards() { const deckContainer = document.getElementById('deck-cards'); const handContainer = document.getElementById('hand-cards'); deckContainer.innerHTML = ''; handContainer.innerHTML = ''; // 渲染牌堆 deck.forEach(card => { const cardElement = document.createElement('div'); cardElement.className = 'card'; cardElement.textContent = card; deckContainer.appendChild(cardElement); }); // 渲染手牌 hand.forEach(card => { const cardElement = document.createElement('div'); cardElement.className = 'card'; cardElement.textContent = card; // 只有在出牌阶段才能操作手牌 if (isPlayingPhase) { cardElement.addEventListener('click', () => moveCardToTop(card)); } handContainer.appendChild(cardElement); }); } // 将手牌移动到牌堆顶部 function moveCardToTop(card) { // 从手牌中移除 const index = hand.indexOf(card); if (index !== -1) { hand.splice(index, 1); // 添加到牌堆顶部 deck.unshift(card); // 重新渲染 renderCards(); } } // 结束当前阶段 document.getElementById('end-phase').addEventListener('click', () => { isPlayingPhase = !isPlayingPhase; document.getElementById('phase').textContent = isPlayingPhase ? '出牌阶段' : '其他阶段'; renderCards(); }); // 重置游戏 document.getElementById('reset').addEventListener('click', () => { deck = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; hand = ['♥A', '♠2', '♦3', '♣4', '♥5']; isPlayingPhase = true; document.getElementById('phase').textContent = '出牌阶段'; renderCards(); }); // 初始渲染 renderCards(); </script> </body> </html> ``` ## 代码说明 1. HTML结构: - 创建了牌堆区域和手牌区域 - 添加了阶段指示器和控制按钮 2. CSS样式: - 设计了卡牌的基本外观 - 设置了游戏区域的布局 - 添加了交互效果如悬停和点击 3. JavaScript功能: - 初始化牌堆和手牌数据 - `renderCards()`函数负责渲染卡牌到界面 - `moveCardToTop()`函数实现将手牌移动到牌堆顶部的逻辑 - 阶段切换功能，限制只有在出牌阶段才能操作手牌 ## 注意事项 1. 在实际游戏中，牌堆通常是隐藏的，这里为了演示显示所有牌堆内容 2. 移动卡牌时使用了数组的`unshift()`方法将卡牌添加到牌堆顶部 3. 阶段切换功能模拟了游戏的不同阶段，限制特定阶段的操作 4. 这个实现是基础演示，实际游戏可能需要更复杂的规则和动画效果 [2025-07-28 13:55:51 | AI写代码神器 | 1411点数解答]