系列文章
Day 01 開發遊戲前先設定目標策略
前言 最終目標是做一個個人版的紙牌接龍，中途也會嘗試做一些延伸的紙牌遊戲。 遊戲的畫面預計會使用我不熟悉的前端框架 Vue3，若有充足的時間我也會結合後端去做整...
Day 02 調整css調整桌面&產生52張紙牌
動工前的準備 因為昨天標題在畫面縮放的情況下會擋住放卡牌的地方，所以早上就先看CSS相關的網站學習並且如何在Vue專案中使用。 意外發現原來App.vue檔(放...
Day 03 完成卡牌自動翻面的效果，但還不完整
原本今天預計製作發牌和卡牌自動翻面的效果，希望兩個都能有動畫效果，但現實的能力讓我想先說說今天的開發方式 實際思考/開發的過程 卡牌翻面 想像的實作過程 沿用...
Day 04 調整翻牌效果&實作洗牌&外加撲克牌連連看
改變翻牌效果 研究Transition的文件後發現跟我想像的動畫變換不同，官方用法<Transition></Transition> 包...
Day 06 實現自訂義牌堆
今日目標 [x] 研究如何製作牌堆 製作牌堆 製作CardBox元件負責用來擺放卡片的容器，所以結構上就只是比原本卡片元件的稍寬，所以設計成可放子元件進去的...
Day 07 卡牌垂直重疊
今日完成目標 多張卡牌實現垂直重疊，但露出非交疊的部分 垂直重疊 為了產生重疊的效果，個人覺得最酷的方式應該是使用CSS的grid排版，所以在這之前我利用一個G...
Day 05 引入Vue Router切換頁面
因為想留著昨天完成的撲克牌連連看，預計將不同遊戲的頁面可以做保留並切換，所以我打算在做牌堆之前，首先應該要了解Vue3在路由頁面的實作是如何切換頁面。 引入 V...
Day 08 牌堆的卡牌移動動畫
重點提醒: 沒有真的成功實作卡牌無中斷的移動 在實作的過程中遇到了一些問題，找到替代方案先記錄下來。 最初的思路 在前一篇文章中，我們已經完成了牌堆的製作，接下...
Day 09 拖曳紙牌的效果(一)
玩紙牌接龍最重要的就是卡牌會移來移去，之前都是用點的移動定點，今天來試試看如何撰寫拖曳紙牌的功能。 安裝依賴 因為重頭學習理解拖曳，對我來說太麻煩也太無聊，乾脆...
Day 10 拖曳紙牌的效果(二)限制內部拖曳
今天來研究兩個列表的拖曳和如何限制列表的拖曳，學習內容主要來自vue.draggable文件的內容和親身實作進行分析。 先實現兩個列表的拖曳 昨天已學過如何製作...