纸牌接龙是一个经典的单人纸牌游戏，玩家需要按照一定的规则将纸牌排成一堆，并完成接龙。通常，游戏规则要求玩家根据纸牌的点数和花色进行排列，从而逐步完成接龙。尽管规则简单，纸牌的自动排序和发放以及操作逻辑的实现却需要一定的复杂性，尤其是在处理牌堆和规则检查时。
过去，制作一个纸牌接龙游戏需要编写发牌、排序和判断的代码，确保游戏的逻辑和UI能够流畅地运行。但现在，通过 Trae IDE，只需要输入简单的指令，Trae 就能够自动帮我完成所有复杂的游戏逻辑和UI设计。接下来，我将分享如何通过 Trae 快速生成一个纸牌接龙游戏，让玩家轻松体验这款经典纸牌游戏。
💡 我的需求其实很简单
我的需求非常明确：制作一个纸牌接龙游戏，功能要求如下：
- 纸牌发放：游戏开始时，纸牌会自动发放到指定位置。规则排列：玩家按规则排列纸牌，通常是按照点数从大到小，交替的红黑花色排列。自动排序：当玩家完成一部分排列时，纸牌会自动移动到正确的顺序。游戏完成：当所有纸牌正确排列完成时，游戏自动判定完成接龙。简洁的UI设计：游戏界面直观，操作简单，纸牌发放和排序清晰明了。
虽然规则看起来简单，但涉及到纸牌的发放、排序、移动和判断等操作，手动实现这些功能依然需要不少的时间。
✨ Trae 如何理解需求并生成代码？
我只需要在 Trae 中输入一句话：
“生成接龙游戏，玩家按规则排列纸牌，最终完成接龙。”
Trae 会自动解析我的需求，并生成完整的纸牌接龙游戏代码，包括：
- 纸牌发放：游戏开始时，纸牌会按照指定规则自动发放到桌面上的不同位置。纸牌排序：玩家按照接龙规则排列纸牌，纸牌会自动按点数和花色排序。游戏规则确保纸牌的排列顺序正确。自动化操作：当玩家操作时，纸牌会自动进行排序和移动，确保游戏逻辑流畅运行。胜利判定：当玩家成功完成接龙后，系统会判定游戏胜利并显示“游戏完成”的提示。简洁的UI设计：游戏界面设计简洁，纸牌的排列和操作非常直观，玩家可以轻松完成接龙任务。
通过简单的指令，Trae 就能为我自动生成一个完整的纸牌接龙游戏，并处理所有复杂的操作和逻辑。
🧩 游戏操作简便，玩法清晰
Trae 生成的纸牌接龙游戏操作非常直观，玩家只需点击纸牌并拖动到正确的位置，游戏会根据规则自动排列纸牌。每次移动纸牌，游戏界面都会即时更新，确保玩家能够清晰看到纸牌的排序进展。
如果玩家完成了某部分接龙，纸牌会自动整理并移动到新的位置，玩家不需要手动去整理纸牌，操作十分流畅。
🛠 游戏拓展，功能轻松加
虽然 Trae 生成的纸牌接龙游戏已经非常完备，但它也支持轻松添加更多功能。例如：
- 多种接龙模式：可以增加不同的接龙玩法，如四堆接龙、空位接龙等，给玩家提供更多的挑战。计时器功能：为游戏加入计时器，记录玩家完成接龙的时间，增加游戏的竞技性。得分系统：可以根据玩家完成接龙的速度和完成度来给出分数。音效和动画：为纸牌的发放、排序和移动添加动画和音效，使游戏更具互动性。
这些新功能都可以通过简单描述，Trae 会自动生成并将它们集成到现有的游戏中。
这就是纸牌接龙游戏开发的新体验
通过这次纸牌接龙游戏的开发，我深刻感受到了 Trae 带来的便利。从纸牌的发放，到玩家的操作，再到排序和判定，Trae 都能够自动帮我完成。这不仅节省了大量开发时间，也提高了开发效率，让我可以更专注于游戏设计和功能扩展。
对于独立开发者或小团队来说，Trae 是一个非常高效的工具，它帮助你将繁琐的逻辑和操作自动化，让你专注于创意和优化。
结语
如果你也想制作一个经典的纸牌接龙游戏，试试 Trae IDE，输入类似的需求：
“生成接龙游戏，玩家按规则排列纸牌，最终完成接龙。”
几秒钟内，Trae 就会生成完整的纸牌接龙游戏代码，带有纸牌发放、排序、玩家操作和胜利判定等功能。你可以直接将它嵌入到你的项目中，甚至根据需求继续扩展和优化。
快来体验一下 Trae，让你的纸牌接龙游戏开发变得更加轻松、有趣！
<!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> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: #076324; color: white; padding: 20px; } .game-container { max-width: 1000px; margin: 0 auto; } .header { display: flex; justify-content: space-between; margin-bottom: 20px; align-items: center; } .title { font-size: 24px; font-weight: bold; } .controls button { padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px; } .controls button:hover { background-color: #45a049; } .game-area { display: grid; grid-template-rows: auto auto; gap: 20px; } .top-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; } .bottom-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; } .card-slot { background-color: rgba(0, 0, 0, 0.2); border: 2px dashed rgba(255, 255, 255, 0.3); border-radius: 8px; height: 120px; position: relative; } .foundation { background-color: rgba(0, 100, 0, 0.5); } .tableau { min-height: 300px; } .card { width: 80px; height: 120px; background-color: white; border-radius: 8px; position: absolute; cursor: pointer; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: all 0.2s ease; user-select: none; } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .card.red { color: red; } .card.black { color: black; } .card-content { display: flex; flex-direction: column; height: 100%; padding: 5px; } .card-value { font-size: 16px; font-weight: bold; } .card-suit { font-size: 16px; } .card-center { display: flex; justify-content: center; align-items: center; flex-grow: 1; font-size: 30px; } .card-back { background-color: #2980b9; background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 10px, transparent 10px, transparent 20px); } .card.dragging { opacity: 0.8; z-index: 1000; } .message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; text-align: center; display: none; z-index: 2000; } .message h2 { margin-bottom: 15px; } .message button { padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; } .timer { font-size: 18px; margin-right: 20px; } .moves { font-size: 18px; } </style></head><body> <div class="game-container"> <div class="header"> <div class="title">纸牌接龙</div> <div class="stats"> <span class="timer">时间: 00:00</span> <span class="moves">移动次数: 0</span> </div> <div class="controls"> <button id="new-game">新游戏</button> <button id="undo">撤销</button> <button id="hint">提示</button> </div> </div> <div class="game-area"> <div class="top-row"> <div class="card-slot stock" id="stock"></div> <div class="card-slot waste" id="waste"></div> <div class="card-slot placeholder"></div> <div class="card-slot foundation" id="foundation-0"></div> <div class="card-slot foundation" id="foundation-1"></div> <div class="card-slot foundation" id="foundation-2"></div> <div class="card-slot foundation" id="foundation-3"></div> </div> <div class="bottom-row"> <div class="card-slot tableau" id="tableau-0"></div> <div class="card-slot tableau" id="tableau-1"></div> <div class="card-slot tableau" id="tableau-2"></div> <div class="card-slot tableau" id="tableau-3"></div> <div class="card-slot tableau" id="tableau-4"></div> <div class="card-slot tableau" id="tableau-5"></div> <div class="card-slot tableau" id="tableau-6"></div> </div> </div> </div> <div class="message" id="win-message"> <h2>恭喜你赢了!</h2> <p>你用了 <span id="final-time"></span> 和 <span id="final-moves"></span> 次移动完成了游戏</p> <button id="play-again">再玩一次</button> </div> <script> document.addEventListener('DOMContentLoaded', () => { // 游戏状态变量 let deck = []; let stock = []; let waste = []; let foundations = [[], [], [], []]; let tableaus = [[], [], [], [], [], [], []]; let selectedCard = null; let selectedStack = []; let selectedSource = null; let moves = 0; let seconds = 0; let timerInterval = null; let moveHistory = []; let isDragging = false; let draggedCard = null; let draggedCards = []; let startX, startY; let offsetX, offsetY; // DOM 元素 const stockElement = document.getElementById('stock'); const wasteElement = document.getElementById('waste'); const foundationElements = [ document.getElementById('foundation-0'), document.getElementById('foundation-1'), document.getElementById('foundation-2'), document.getElementById('foundation-3') ]; const tableauElements = [ document.getElementById('tableau-0'), document.getElementById('tableau-1'), document.getElementById('tableau-2'), document.getElementById('tableau-3'), document.getElementById('tableau-4'), document.getElementById('tableau-5'), document.getElementById('tableau-6') ]; const timerElement = document.querySelector('.timer'); const movesElement = document.querySelector('.moves'); const newGameButton = document.getElementById('new-game'); const undoButton = document.getElementById('undo'); const hintButton = document.getElementById('hint'); const winMessage = document.getElementById('win-message'); const finalTimeElement = document.getElementById('final-time'); const finalMovesElement = document.getElementById('final-moves'); const playAgainButton = document.getElementById('play-again'); // 初始化游戏 initGame(); // 事件监听器 newGameButton.addEventListener('click', initGame); undoButton.addEventListener('click', undoMove); hintButton.addEventListener('click', showHint); playAgainButton.addEventListener('click', () => { winMessage.style.display = 'none'; initGame(); }); stockElement.addEventListener('click', dealFromStock); // 初始化游戏函数 function initGame() { // 重置游戏状态 deck = createDeck(); stock = [...deck]; waste = []; foundations = [[], [], [], []]; tableaus = [[], [], [], [], [], [], []]; selectedCard = null; selectedStack = []; selectedSource = null; moves = 0; seconds = 0; moveHistory = []; updateMovesDisplay(); // 清除计时器并重置 if (timerInterval) { clearInterval(timerInterval); } timerInterval = setInterval(updateTimer, 1000); updateTimerDisplay(); // 洗牌 shuffleDeck(stock); // 发牌到tableau dealInitialCards(); // 渲染游戏 renderGame(); // 添加事件监听器 addEventListeners(); } // 创建一副牌 function createDeck() { const suits = ['♥', '♦', '♠', '♣']; const values = ['A', '2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K']; const deck = []; for (let suit of suits) { const color = (suit === '♥' || suit === '♦') ? 'red' : 'black'; for (let i = 0; i < values.length; i++) { deck.push({ suit, value: values[i], color, rank: i + 1, faceUp: false, id: `${values[i]}-${suit}` }); } } return deck; } // 洗牌函数 function shuffleDeck(deck) { for (let i = deck.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [deck[i], deck[j]] = [deck[j], deck[i]]; } } // 发初始牌 function dealInitialCards() { for (let i = 0; i < 7; i++) { for (let j = i; j < 7; j++) { const card = stock.pop(); if (i === j) { card.faceUp = true; } tableaus[j].push(card); } } } // 从stock发牌 function dealFromStock() { if (stock.length === 0) { // 如果stock为空，将waste中的牌放回stock if (waste.length > 0) { stock = waste.reverse(); waste = []; stock.forEach(card => card.faceUp = false); renderGame(); } return; } // 记录移动历史 recordMove({ type: 'dealFromStock', stockLength: stock.length, wasteLength: waste.length }); // 从stock顶部取一张牌放到waste const card = stock.pop(); card.faceUp = true; waste.push(card); moves++; updateMovesDisplay(); renderGame(); } // 渲染游戏 function renderGame() { // 清空所有区域 stockElement.innerHTML = ''; wasteElement.innerHTML = ''; foundationElements.forEach(el => el.innerHTML = ''); tableauElements.forEach(el => el.innerHTML = ''); // 渲染stock if (stock.length > 0) { const cardElement = createCardElement({ faceUp: false }); stockElement.appendChild(cardElement); } // 渲染waste if (waste.length > 0) { const topCard = waste[waste.length - 1]; const cardElement = createCardElement(topCard); cardElement.dataset.source = 'waste'; cardElement.dataset.index = waste.length - 1; wasteElement.appendChild(cardElement); } // 渲染foundations foundations.forEach((foundation, i) => { if (foundation.length > 0) { const topCard = foundation[foundation.length - 1]; const cardElement = createCardElement(topCard); cardElement.dataset.source = `foundation-${i}`; cardElement.dataset.index = foundation.length - 1; foundationElements[i].appendChild(cardElement); } }); // 渲染tableaus tableaus.forEach((tableau, i) => { tableau.forEach((card, j) => { const cardElement = createCardElement(card); cardElement.style.top = `${j * 25}px`; cardElement.dataset.source = `tableau-${i}`; cardElement.dataset.index = j; tableauElements[i].appendChild(cardElement); }); }); // 检查是否获胜 checkWinCondition(); } // 创建卡牌元素 function createCardElement(card) { const cardElement = document.createElement('div'); cardElement.className = 'card'; if (!card.faceUp) { cardElement.classList.add('card-back'); return cardElement; } cardElement.classList.add(card.color); cardElement.dataset.id = card.id; const cardContent = document.createElement('div'); cardContent.className = 'card-content'; const topValue = document.createElement('div'); topValue.className = 'card-value'; topValue.textContent = card.value; const topSuit = document.createElement('div'); topSuit.className = 'card-suit'; topSuit.textContent = card.suit; const center = document.createElement('div'); center.className = 'card-center'; center.textContent = card.suit; const bottomValue = document.createElement('div'); bottomValue.className = 'card-value'; bottomValue.style.transform = 'rotate(180deg)'; bottomValue.textContent = card.value; const bottomSuit = document.createElement('div'); bottomSuit.className = 'card-suit'; bottomSuit.style.transform = 'rotate(180deg)'; bottomSuit.textContent = card.suit; cardContent.appendChild(topValue); cardContent.appendChild(topSuit); cardContent.appendChild(center); cardContent.appendChild(bottomSuit); cardContent.appendChild(bottomValue); cardElement.appendChild(cardContent); return cardElement; } // 添加事件监听器 function addEventListeners() { // 为waste中的牌添加点击事件 document.querySelectorAll('#waste .card').forEach(card => { card.addEventListener('click', handleCardClick); card.addEventListener('mousedown', handleCardMouseDown); }); // 为foundation中的牌添加点击事件 document.querySelectorAll('.foundation .card').forEach(card => { card.addEventListener('click', handleCardClick); card.addEventListener('mousedown', handleCardMouseDown); }); // 为tableau中的牌添加点击事件 document.querySelectorAll('.tableau .card').forEach(card => { card.addEventListener('click', handleCardClick); card.addEventListener('mousedown', handleCardMouseDown); }); // 为空的foundation添加点击事件 document.querySelectorAll('.foundation:empty').forEach((foundation, i) => { foundation.addEventListener('click', () => handleEmptyFoundationClick(i)); }); // 为空的tableau添加点击事件 document.querySelectorAll('.tableau:empty').forEach((tableau, i) => { tableau.addEventListener('click', () => handleEmptyTableauClick(i)); }); // 添加全局鼠标事件 document.addEventListener('mousemove', handleMouseMove); document.addEventListener('mouseup', handleMouseUp); } // 处理卡牌点击 function handleCardClick(e) { const cardElement = e.currentTarget; const source = cardElement.dataset.source; const index = parseInt(cardElement.dataset.index); // 如果已经选中了卡牌，尝试移动 if (selectedCard) { const targetCard = getCardFromElement(cardElement); const targetSource = source; const targetIndex = index; // 尝试移动卡牌 if (tryMoveCard(selectedCard, selectedSource, targetCard, targetSource)) { // 移动成功，重置选中状态 selectedCard = null; selectedStack = []; selectedSource = null; document.querySelectorAll('.card.selected').forEach(card => { card.classList.remove('selected'); }); renderGame(); } else { // 移动失败，选中新卡牌 selectCard(cardElement, source, index); } } else { // 选中卡牌 selectCard(cardElement, source, index); } } // 选中卡牌 function selectCard(cardElement, source, index) { // 清除之前的选中状态 document.querySelectorAll('.card.selected').forEach(card => { card.classList.remove('selected'); }); // 设置新的选中状态 selectedCard = getCardFromElement(cardElement); selectedSource = source; // 如果是tableau中的牌，可能需要选中一堆牌 if (source.startsWith('tableau-')) { const tableauIndex = parseInt(source.split('-')[1]); const tableau = tableaus[tableauIndex]; // 只能选择正面朝上的牌 if (selectedCard.faceUp) { // 选中从index到末尾的所有牌 selectedStack = tableau.slice(index); // 高亮显示选中的牌 const tableauElement = document.getElementById(`tableau-${tableauIndex}`); const cards = tableauElement.querySelectorAll('.card'); for (let i = index; i < cards.length; i++) { cards[i].classList.add('selected'); } } } else { // 其他区域只能选中一张牌 selectedStack = [selectedCard]; cardElement.classList.add('selected'); } } // 从元素获取卡牌对象 function getCardFromElement(cardElement) { const source = cardElement.dataset.source; const index = parseInt(cardElement.dataset.index); if (source === 'waste') { return waste[index]; } else if (source.startsWith('foundation-')) { const foundationIndex = parseInt(source.split('-')[1]); return foundations[foundationIndex][index]; } else if (source.startsWith('tableau-')) { const tableauIndex = parseInt(source.split('-')[1]); return tableaus[tableauIndex][index]; } return null; } // 尝试移动卡牌 function tryMoveCard(sourceCard, sourceLocation, targetCard, targetLocation) { // 如果源和目标相同，不移动 if (sourceLocation === targetLocation) { return false; } // 移动到foundation if (targetLocation && targetLocation.startsWith('foundation-')) { const foundationIndex = parseInt(targetLocation.split('-')[1]); // 只能移动单张牌到foundation if (selectedStack.length !== 1) { return false; } // 检查移动规则 if (canMoveToFoundation(sourceCard, foundations[foundationIndex])) { // 记录移动历史 recordMove({ type: 'moveToFoundation', sourceCard, sourceLocation, foundationIndex }); // 执行移动 moveCardToFoundation(sourceCard, sourceLocation, foundationIndex); return true; } } // 移动到tableau else if (targetLocation && targetLocation.startsWith('tableau-')) { const tableauIndex = parseInt(targetLocation.split('-')[1]); // 检查移动规则 if (canMoveToTableau(selectedStack[0], tableaus[tableauIndex])) { // 记录移动历史 recordMove({ type: 'moveToTableau', sourceStack: [...selectedStack], sourceLocation, tableauIndex }); // 执行移动 moveCardToTableau(selectedStack, sourceLocation, tableauIndex); return true; } } return false; } // 处理空foundation点击 function handleEmptyFoundationClick(foundationIndex) { if (selectedCard && selectedStack.length === 1) { // 检查是否可以移动到空foundation if (canMoveToEmptyFoundation(selectedCard)) { // 记录移动历史 recordMove({ type: 'moveToFoundation', sourceCard: selectedCard, sourceLocation: selectedSource, foundationIndex }); // 执行移动 moveCardToFoundation(selectedCard, selectedSource, foundationIndex); // 重置选中状态 selectedCard = null; selectedStack = []; selectedSource = null; document.querySelectorAll('.card.selected').forEach(card => { card.classList.remove('selected'); }); renderGame(); } } } // 处理空tableau点击 function handleEmptyTableauClick(tableauIndex) { if (selectedCard && selectedStack.length > 0) { // 检查是否可以移动到空tableau if (canMoveToEmptyTableau(selectedStack[0])) { // 记录移动历史 recordMove({ type: 'moveToTableau', sourceStack: [...selectedStack], sourceLocation: selectedSource, tableauIndex }); // 执行移动 moveCardToTableau(selectedStack, selectedSource, tableauIndex); // 重置选中状态 selectedCard = null; selectedStack = []; selectedSource = null; document.querySelectorAll('.card.selected').forEach(card => { card.classList.remove('selected'); }); renderGame(); } } } // 检查是否可以移动到foundation function canMoveToFoundation(card, foundation) { // 如果foundation为空，只能放A if (foundation.length === 0) { return card.value === 'A'; } // 否则，检查花色和顺序 const topCard = foundation[foundation.length - 1]; return card.suit === topCard.suit && card.rank === topCard.rank + 1; } // 检查是否可以移动到空foundation function canMoveToEmptyFoundation(card) { return card.value === 'A'; } // 检查是否可以移动到tableau function canMoveToTableau(card, tableau) { // 如果tableau为空，只能放K if (tableau.length === 0) { return card.value === 'K'; } // 否则，检查颜色和顺序 const topCard = tableau[tableau.length - 1]; return topCard.faceUp && card.color !== topCard.color && card.rank === topCard.rank - 1; } // 检查是否可以移动到空tableau function canMoveToEmptyTableau(card) { return card.value === 'K'; } // 移动卡牌到foundation function moveCardToFoundation(card, sourceLocation, foundationIndex) { // 从源位置移除卡牌 if (sourceLocation === 'waste') { waste.pop(); } else if (sourceLocation.startsWith('tableau-')) { const tableauIndex = parseInt(sourceLocation.split('-')[1]); tableaus[tableauIndex].pop(); // 如果tableau中还有牌，翻转顶部的牌 if (tableaus[tableauIndex].length > 0 && !tableaus[tableauIndex][tableaus[tableauIndex].length - 1].faceUp) { tableaus[tableauIndex][tableaus[tableauIndex].length - 1].faceUp = true; } } else if (sourceLocation.startsWith('foundation-')) { const sourceFoundationIndex = parseInt(sourceLocation.split('-')[1]); foundations[sourceFoundationIndex].pop(); } // 添加到foundation foundations[foundationIndex].push(card); // 更新移动次数 moves++; updateMovesDisplay(); } // 移动卡牌到tableau function moveCardToTableau(cardStack, sourceLocation, tableauIndex) { // 从源位置移除卡牌 if (sourceLocation === 'waste') { waste.pop(); } else if (sourceLocation.startsWith('tableau-')) { const sourceTableauIndex = parseInt(sourceLocation.split('-')[1]); const startIndex = tableaus[sourceTableauIndex].length - cardStack.length; tableaus[sourceTableauIndex].splice(startIndex, cardStack.length); // 如果tableau中还有牌，翻转顶部的牌 if (tableaus[sourceTableauIndex].length > 0 && !tableaus[sourceTableauIndex][tableaus[sourceTableauIndex].length - 1].faceUp) { tableaus[sourceTableauIndex][tableaus[sourceTableauIndex].length - 1].faceUp = true; } } else if (sourceLocation.startsWith('foundation-')) { const foundationIndex = parseInt(sourceLocation.split('-')[1]); foundations[foundationIndex].pop(); } // 添加到tableau tableaus[tableauIndex].push(...cardStack); // 更新移动次数 moves++; updateMovesDisplay(); } // 记录移动历史 function recordMove(move) { moveHistory.push({ ...move, stock: [...stock], waste: [...waste], foundations: foundations.map(f => [...f]), tableaus: tableaus.map(t => t.map(card => ({...card}))), moves }); } // 撤销移动 function undoMove() { if (moveHistory.length === 0) { return; } const lastMove = moveHistory.pop(); stock = [...lastMove.stock]; waste = [...lastMove.waste]; foundations = lastMove.foundations.map(f => [...f]); tableaus = lastMove.tableaus.map(t => t.map(card => ({...card}))); moves = lastMove.moves; updateMovesDisplay(); renderGame(); } // 显示提示 function showHint() { // 实现提示逻辑 alert('提示功能正在开发中...'); } // 更新移动次数显示 function updateMovesDisplay() { movesElement.textContent = `移动次数: ${moves}`; } // 更新计时器 function updateTimer() { seconds++; updateTimerDisplay(); } // 更新计时器显示 function updateTimerDisplay() { const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; timerElement.textContent = `时间: ${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`; } // 检查胜利条件 function checkWinCondition() { // 检查所有foundation是否都有13张牌 const isWin = foundations.every(foundation => foundation.length === 13); if (isWin) { // 停止计时器 clearInterval(timerInterval); // 显示胜利消息 finalTimeElement.textContent = timerElement.textContent.replace('时间: ', ''); finalMovesElement.textContent = `${moves}`; winMessage.style.display = 'block'; } } // 拖拽相关函数 function handleCardMouseDown(e) { if (e.button !== 0) return; // 只处理左键点击 const cardElement = e.currentTarget; const source = cardElement.dataset.source; const index = parseInt(cardElement.dataset.index); // 只能拖拽正面朝上的牌 const card = getCardFromElement(cardElement); if (!card.faceUp) return; isDragging = true; // 设置拖拽的卡牌 if (source.startsWith('tableau-')) { const tableauIndex = parseInt(source.split('-')[1]); const tableau = tableaus[tableauIndex]; draggedCards = tableau.slice(index); draggedCard = card; selectedSource = source; } else { draggedCards = [card]; draggedCard = card; selectedSource = source; } // 记录鼠标位置 startX = e.clientX; startY = e.clientY; // 计算偏移量 const rect = cardElement.getBoundingClientRect(); offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top; // 添加拖拽样式 cardElement.classList.add('dragging'); e.preventDefault(); } function handleMouseMove(e) { if (!isDragging || !draggedCard) return; const cardElements = document.querySelectorAll('.dragging'); cardElements.forEach(card => { card.style.position = 'fixed'; card.style.left = `${e.clientX - offsetX}px`; card.style.top = `${e.clientY - offsetY}px`; card.style.zIndex = '1000'; }); } function handleMouseUp(e) { if (!isDragging) return; isDragging = false; // 移除拖拽样式 document.querySelectorAll('.dragging').forEach(card => { card.classList.remove('dragging'); card.style.position = ''; card.style.left = ''; card.style.top = ''; card.style.zIndex = ''; }); // 检查是否放在有效位置 const targetElement = document.elementFromPoint(e.clientX, e.clientY); if (targetElement) { let dropTarget = targetElement; // 查找最近的卡牌或槽位 while (dropTarget && !dropTarget.classList.contains('card') && !dropTarget.classList.contains('card-slot')) { dropTarget = dropTarget.parentElement; } if (dropTarget) { // 如果是卡牌 if (dropTarget.classList.contains('card')) { const targetSource = dropTarget.dataset.source; const targetIndex = parseInt(dropTarget.dataset.index); const targetCard = getCardFromElement(dropTarget); // 尝试移动卡牌 tryMoveCard(draggedCard, selectedSource, targetCard, targetSource); } // 如果是空槽位 else if (dropTarget.classList.contains('card-slot')) { if (dropTarget.classList.contains('foundation')) { const foundationIndex = parseInt(dropTarget.id.split('-')[1]); if (draggedCards.length === 1 && canMoveToEmptyFoundation(draggedCards[0])) { // 记录移动历史 recordMove({ type: 'moveToFoundation', sourceCard: draggedCards[0], sourceLocation: selectedSource, foundationIndex }); // 执行移动 moveCardToFoundation(draggedCards[0], selectedSource, foundationIndex); } } else if (dropTarget.classList.contains('tableau')) { const tableauIndex = parseInt(dropTarget.id.split('-')[1]); if (canMoveToEmptyTableau(draggedCards[0])) { // 记录移动历史 recordMove({ type: 'moveToTableau', sourceStack: [...draggedCards], sourceLocation: selectedSource, tableauIndex }); // 执行移动 moveCardToTableau(draggedCards, selectedSource, tableauIndex); } } } } } // 重置拖拽状态 draggedCard = null; draggedCards = []; selectedSource = null; // 重新渲染游戏 renderGame(); } }); </script></body></html>