會採用Vue3開發遊戲介面,最終目標是做一個好玩的紙牌接龍遊戲。
預計會從怎麼用網頁顯示紙牌、拖曳紙牌,翻轉紙牌等技巧說起,雖然寫得當下我還不會...
希望能以一層層疊大樓的方式說明實現遊戲的進度。
今日預計只實作如何一次拖曳 多張卡牌 多張卡牌拖曳的考察研究 這部分可能會讓很多人(我)失望,因為vue.draggable.next最近一次的合併更新在202...
今天預計實作接龍紙牌的拖曳規則 ☑️ 拖曳卡牌只能置放到目標牌堆的牌尾 -> 只能置放至目標最後 ☑️ 牌堆只有打開的牌才能進行拖曳 -> 蓋牌無...
今日預計實作項目: ☑️ 只能對牌尾進行翻牌 ☑️ 牌尾自動翻牌 ☑️ 限制疊牌順序 只能對牌尾進行翻牌 新增函數openCard(cards, eleme...
為了實現接龍發牌區功能,必須先思考如何讓撲克牌循環利用,這部分程式碼我是先拆一個頁面來練習實作,避免單一頁面的程式碼邏輯太過混亂。 發牌區的樣板 今日實作的目標...
前言 今天要來補強昨日缺少的拖曳功能和將整個頁面封裝成提供整合至接龍遊戲的元件發牌區。 移牌區改為可拖曳 首先將移牌區的部分調整成從原生HTML元素div替換成...
前言 今天要來處理<DealerArea>內的元素如何整合拖曳移動到7個牌堆,這部分會拆成2個部分來看: 可將<DealerArea>...
前言 今日要製作結算牌堆,跟中間的7疊牌不同,結算牌堆只有4堆且只能允許同花色疊在上面,必須由小到大(A->K)放上去,放上去的牌會擋住底下的牌。 修正...
前言 昨天完成結算牌堆樣版的部分,今天接著處理整合拖曳到接龍之前的步驟,先調整結算牌堆的內部結構、方法。 調整結算牌堆 FinishedArea 先調整結算牌堆...
前言 今天會實作發牌區、7牌堆的牌可以拖曳到結算牌堆,且拖曳的過程需遵守結算牌堆的同色疊牌由A至K的規則。 整理重複的函數 先將昨天在DealerAreaVie...
前言 今天會先實作結算牌堆的牌要可以拖曳至7牌堆,另外因為每次要重新開始都要切換頁面或按F5重新整理也會實作一個重置遊戲的按鈕 拖曳結算牌堆的牌 至 7牌堆 原...