系列文章
Day 12 實作拖曳卡牌只能置放到目標牌堆的牌尾、蓋牌無法拖曳
今天預計實作接龍紙牌的拖曳規則 ☑️ 拖曳卡牌只能置放到目標牌堆的牌尾 -> 只能置放至目標最後 ☑️ 牌堆只有打開的牌才能進行拖曳 -> 蓋牌無...
Day 11 拖曳紙牌的效果(三)如何一次拖曳多張卡牌
今日預計只實作如何一次拖曳 多張卡牌 多張卡牌拖曳的考察研究 這部分可能會讓很多人(我)失望，因為vue.draggable.next最近一次的合併更新在202...
Day14 接龍發牌區功能實作(一)發牌循環
為了實現接龍發牌區功能，必須先思考如何讓撲克牌循環利用，這部分程式碼我是先拆一個頁面來練習實作，避免單一頁面的程式碼邏輯太過混亂。 發牌區的樣板 今日實作的目標...
Day 13 牌尾自動翻牌、限制疊牌順序
今日預計實作項目: ☑️ 只能對牌尾進行翻牌 ☑️ 牌尾自動翻牌 ☑️ 限制疊牌順序 只能對牌尾進行翻牌 新增函數openCard(cards, eleme...
Day15 接龍發牌區功能實作(二)拖曳功能及CSS發牌動畫
前言 今天要來補強昨日缺少的拖曳功能和將整個頁面封裝成提供整合至接龍遊戲的元件發牌區。 移牌區改為可拖曳 首先將移牌區的部分調整成從原生HTML元素div替換成...
Day16 接龍發牌區功能實作(三)拖曳與疊牌區整合
前言 今天要來處理<DealerArea>內的元素如何整合拖曳移動到7個牌堆，這部分會拆成2個部分來看: 可將<DealerArea>...
Day 17 實作結算牌堆元件(一)樣板&資料結構
前言 今日要製作結算牌堆，跟中間的7疊牌不同，結算牌堆只有4堆且只能允許同花色疊在上面，必須由小到大(A->K)放上去，放上去的牌會擋住底下的牌。 修正...
Day 19 實作結算牌堆元件(三)整合至接龍頁面
前言 今天會實作發牌區、7牌堆的牌可以拖曳到結算牌堆，且拖曳的過程需遵守結算牌堆的同色疊牌由A至K的規則。 整理重複的函數 先將昨天在DealerAreaVie...
Day 18 實作結算牌堆元件(二) 整合拖曳相容不同規則
前言 昨天完成結算牌堆樣版的部分，今天接著處理整合拖曳到接龍之前的步驟，先調整結算牌堆的內部結構、方法。 調整結算牌堆 FinishedArea 先調整結算牌堆...
Day20 實作結算牌堆元件(四) 實作移入7牌堆的拖曳&遊戲重置
前言 今天會先實作結算牌堆的牌要可以拖曳至7牌堆，另外因為每次要重新開始都要切換頁面或按F5重新整理也會實作一個重置遊戲的按鈕 拖曳結算牌堆的牌 至 7牌堆 原...