Posts

前言 如標題所言，今天要做的就是補上『當牌全開時視為已完成遊戲』自動結算遊戲時間、分數， 有實際在現實世界中用撲克牌玩過接龍的應該知道其實最麻煩的就是收牌結尾，因為最後只是慢慢把所有牌都移到結算牌堆。 事先說明: 此篇不會實作自動移牌的動畫效果。 開發前思考 判斷牌全開不難! 不需要判斷全部牌是否已打開， 只需要判斷7牌堆每堆最上面第一張牌是否已打開，若有蓋著那就不能結算， 若每堆第一張都沒蓋著就可以開始結算。 結算分數時只需要考慮補上發牌區、移牌區有幾張牌，再用加分的方式計算最後的總分。 實作過程 修改遊戲結算時機 原本函數checkSolitaireGameDone(cardStacks)是判斷結算牌堆集滿13張牌則當作遊戲結束，但思考過後結算牌堆都集滿13張等同於七牌區的牌全空一樣會回應true，因此放心調整為檢查七牌堆的最上方開牌的狀態當作遊戲結束的依據。 // poker-helper.js /** * 檢查紙牌接龍是否完成 * @param {CardStacks} cardStacks */ function checkSolitaireGameDone(cardStacks) { // 檢查每組牌堆第一張牌覆蓋著，就代表遊戲還沒結束 const isDone = SEVEN_STACKS.reduce((prev, stackName) => { const stack = cardStacks[stackName]; if (stack.length > 0 && (!stack[0].isOpen)) { return false; } return prev; }, true); return isDone; } 計算剩餘牌數&結算分數 新增函數getRemainCardCount(cardStacks)計算並返回發牌區和七牌堆的剩餘牌數 // poker-helper.js /** * 計算剩餘在發牌區和7牌堆的張數 * @param {CardStacks} cardStacks * @returns {Object} {dealer: number, seven: number} */ function getRemainCardCount(cardStacks) { let dealerStacksCount = cardStacks['dealerStacks'].length; let sevenCount = 0; SEVEN_STACKS.forEach((name) => { sevenCount += cardStacks[name].length; }); return { dealer: dealerStacksCount, seven: sevenCount, }; } 在接龍頁面使用computed宣告一個變數remainCardCounts，負責返回剩餘的牌數。 ...

前言 因為玩接龍有時會有按錯步，這時候沒有返回上一步的機制就只能硬著頭皮玩下去或按重置，今天想解決這個問題。 開發前的思考 在ReactJS官方學習文件中OOXX遊戲Tic-Tac-Toe也有提到時光旅行的實作，基本上就是每一步更動後的結果狀態都推入(Push)陣列變數history裡面，時光回朔就是將結果狀態直接設為history[index]。 目前開發下來的程式碼大概要回到上一步的只有分數、牌組、發牌的索引， 經過的時間應該就不用上一步。 實作過程 儲存遊戲變化的歷史 首先宣告一個負責儲存歷史的ref變數history const history = ref([]); 宣告函數pushStateToHistory()負責撰寫把最新的狀態推入history 累積超過30個後會將最舊的狀態移除再推入最新的狀態，避免暫存太多的上一步驟。 因為reactive的關係所以不得不手動深度複製每張卡牌，這也是為什麼要做elemFunc的原因 /** 儲存當前狀態到歷史紀錄 */ function pushStateToHistory() { if (history.value.length > 30) { const startIndex = history.value.length - 30; history.value = history.value.slice(startIndex, history.value.length); } const elemFunc = (card) => ({ "value": card.value, "isOpen": card.isOpen, "isDone": card.isDone, }); history.value = [ ...history.value, { "cardStacks": { first: cardStacks.first.slice().map(elemFunc), second: cardStacks.second.slice().map(elemFunc), third: cardStacks.third.slice().map(elemFunc), fourth: cardStacks.fourth.slice().map(elemFunc), fifth: cardStacks.fifth.slice().map(elemFunc), sixth: cardStacks.sixth.slice().map(elemFunc), seventh: cardStacks.seventh.slice().map(elemFunc), dealerStacks: cardStacks.dealerStacks.slice().map(elemFunc), club: cardStacks.club.slice().map(elemFunc), diamond: cardStacks.diamond.slice().map(elemFunc), heart: cardStacks.heart.slice().map(elemFunc), spade: cardStacks.spade.slice().map(elemFunc), }, "gameScore": JSON.parse(JSON.stringify(gameScore.value)), "dealer": { index: dealer.index }, } ]; } 接著在程式碼中【分數、卡牌有變動】的情況都補上執行pushStateToHistory();去儲存當下的狀態: 發牌區移動/結算牌堆移動/7牌堆移動成功移動後 遊戲初始化resetGame 連點自動拖曳clickAutoMove只要成功移動，最後也會執行 發牌區<DealerArea />點擊開牌也會執行pushStateToHistory();，因為發牌索引dealer.index產生變化 ...

前言 今天會調整結算畫面的顯示、修正連點移牌的優先權錯誤(應該最優先移入結算牌堆而非七牌堆)。 結算畫面調整 安裝套件 bootstrap-vue-next 昨日完成的結算畫面是跳出來的瀏覽器訊息，畫面完全看各家的瀏覽器制式化只能點確認，即使擋住原本的遊戲畫面是我想要的效果，但更想要的是可客製化頁面的互動視窗Modal。 雖然可以自己土炮撰寫Modal但看帳號名字就知道我很懶，我打算撿現成的套件看能不能快速客製化介面…然後就找到bootstrap-vue-next這個套件，聽名字就知道是針對Vue3特別拉出來的實現。 先照著官方文件安裝依賴: npm i bootstrap bootstrap-vue-next npm i unplugin-vue-components -D 這個 unplugin-vue-components 主要是方便自動載入有副作用(side effect)的功能到你的元件中，詳細可參考官方說明，畢竟Bootstrap有副作用才方便?! 接著調整vite.config.js的內容，主要是在plugins屬性對應的陣列中添加Components 包裹 BootstrapVueNextResolver的依賴: // vite.config.js import { fileURLToPath, URL } from 'node:url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import Components from 'unplugin-vue-components/vite' import {BootstrapVueNextResolver} from 'unplugin-vue-components/resolvers' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), Components({ resolvers: [BootstrapVueNextResolver()], }), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }) 最後在main.js載入相關的CSS，記得把bootstrap移到上方避免之前撰寫的css被蓋掉: // main.js/ts import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap-vue-next/dist/bootstrap-vue-next.css' // 略 前面都完成後，發現接龍畫面的卡片的英文、符號都變得比較Q版，上方導覽列 NavgationBarCSS有點跑版。 ...

前言 目前實作的紙牌接龍還沒有結算畫面，所以今天就來做! 初步思考 製作結算畫面本身不是問題，畢竟畫面沒有要做得超級漂亮的情況下都是沒問題的! 問題是何時跳出結算畫面? 我想到的情形有兩種: 結算牌堆四堆都集完13張的情況 畫面中7牌堆的牌全部已經打開的情況 我認為第一種判斷結算牌堆的方式實作起來比較簡單，接下來實作也會朝這個方向前進。 實作邏輯 製作檢查完成牌組的函數 宣告一個函數checkSolitaireGameDone負責檢查紙牌接龍是否完成。 依序檢查各結算牌堆，若數量不為13就直接回傳 否false 最後就回傳 是true 程式碼如下: /** * 檢查紙牌接龍是否完成 * @param {CardStacks} cardStacks */ function checkSolitaireGameDone(cardStacks) { for (let i = 0; i < FOUR_SUITS.length; i++) { if (cardStacks[FOUR_SUITS[i]].length !== 13) return false; } return true; } 監控觸發檢查 不意外的又使用到watch這個關鍵字做監控，這部分就是跟Day4的連連看一樣， 當 牌堆cardStacks 發生變化就去觸發檢查，判定完成就使用alert跳出結算訊息。 使用者點擊alert()之後，才會執行重設遊戲的函數resetGame() // DragDemo.vue watch(cardStacks, (newCardStacks) => { const isDone = checkSolitaireGameDone(newCardStacks); if (isDone) { alert(`遊戲結束，花費時間: ${gameTime.value} 秒 總分數: ${gameScore.value}!!!`); resetGame(); } }) 小結 今天在實作結算畫面的過程雖然遇到一些Bug，但不影響遊戲可以正常跳出結算訊息並重置。 只是目前用alert跳出那個結算訊息不太像一個正常遊戲的畫面，所以明天會繼續實作真正的結算畫面和修正目前發現的Bug: 昨日開發的連點移動的優先度不正常 預期優先移到結算牌堆的牌，自動移牌時竟然在7牌堆區中左右來回移動。 發牌區的牌應該要自動移到結算牌堆，竟然先移動到7牌堆 程式碼: https://github.com/kabuto412rock/ithelp-pokergame/tree/day24

前言 今天要實做的是點擊自動移牌的功能也算是昨天提示的延伸，差別只在會實際移動卡牌。 我打算連點移牌功能只做在七牌堆和發牌區，結算牌堆就不提供此功能。 實作過程 處理連點事件 調整發牌區/七牌堆的卡片元件<Card>添加對應的屬性@dblclick="emit('card-click', element)"， 這會讓卡牌元件<Card>被連點兩下(Double Click)時，向父元件發送事件card-click然後攜帶的參數element則是Card物件 // Card { value: 0, // 卡牌對應數值，Ex: 梅花A isOpen: false, // 是否已開牌 } 然後修改上層樣板(DragDemo.vue)的部分: 為了接收card-click事件進行處理，在發牌區的樣板修改成有添加@card-click="(card) => clickAutoMove('dealerStacks', card) 在七牌堆的樣板，這七行依序添加屬性@dblcick 第一牌堆 @dblclick="clickAutoMove('first', element)" 第二牌堆 @dblclick="clickAutoMove('second', element)" 中間略… 第七牌堆的屬性 @dblclick="clickAutoMove('seventh', element)" 處理自動移動的邏輯 這邊出現的新函數clickAutoMove(fromName, card)，主要是用來處理自動移動的邏輯，流程如下: 先利用findFollowDeckName找出card可以拖曳到的牌堆名稱，然後依照優先順序排序(結算牌堆排第一)。 如果沒有找到對應的牌堆，則不執行後續。 取出第一個牌堆名稱當作目標牌堆 接著就判斷來源牌堆是發牌堆還是七牌堆，來做不同的處理(修改對應牌組陣列 還有 加分等等) 可以參考下方的程式碼片段: // DragDemo.vue /** * 自動移動 * @param {String} fromName 來自的牌堆名稱 * @param {Card} card 想移動的牌 */ function clickAutoMove(fromName, card) { const toNames = findFollowDeckName(cardStacks, card).sort((a, b) => { const aOrder = a.length + FOUR_SUITS.includes(a) ? -100 : 0; const bOrder = b.length + FOUR_SUITS.includes(b) ? -100 : 0; return aOrder - bOrder; }) // 如果沒找到對應牌堆，則不執行 if (toNames.length == 0) { console.log(`卡牌${PokerValuesMap[card.value].content}沒有符合移動的規則`); return; } const toName = toNames[0]; const isToFinishedArea = FOUR_SUITS.includes(toName); if (fromName == 'dealerStacks') { // 來自`發牌堆` const fromIndex = cardStacks[fromName].findIndex(c => c.value == card.value); const newFromCards = [ ...cardStacks[fromName].slice(0, fromIndex), ...cardStacks[fromName].slice(fromIndex + 1) ]; const newToCards = [ ...cardStacks[toName], cardStacks[fromName][fromIndex] ]; cardStacks[fromName] = newFromCards; cardStacks[toName] = newToCards; gameScore.value += isToFinishedArea ? 25 : 10; } else if (SEVEN_STACKS.includes(fromName)) { // 來自7牌堆 const fromLength = cardStacks[fromName].length; const fromIndex = cardStacks[fromName].findIndex(c => c.value == card.value); if (isToFinishedArea) { if (fromIndex != fromLength - 1) { console.log(`卡牌${PokerValuesMap[card.value].content}不是${fromName}的最後一張牌，不可移入結算牌堆`); return; } const newFromCards = cardStacks[fromName].slice(0, fromIndex); const newToCards = [ ...cardStacks[toName], card ]; cardStacks[fromName] = newFromCards; cardStacks[toName] = newToCards; gameScore.value += 15; } else { const newFromCards = cardStacks[fromName].slice(0, fromIndex); const newToCards = [ ...cardStacks[toName], ...cardStacks[fromName].slice(fromIndex) ]; cardStacks[fromName] = newFromCards; cardStacks[toName] = newToCards; } } } 另外在poker-helper.js新增函數findFollowDeckName(cardstacks, targetCard)，主要是用來找出targetCard可以拖曳到的牌堆名稱，因為可能可以拖曳到複數個牌堆，所以回傳字串組成的一維陣列: ...