Day16 接龍發牌區功能實作(三)拖曳與疊牌區整合

2023 iThome 鐵人賽

DAY 16

SideProject30

毫無自信的開發Web遊戲接龍-成為創造龍的英雄之路!系列第 16 篇

15th鐵人賽

懶惰學

2023-09-25 17:48:09

262 瀏覽

分享至

前言

今天要來處理<DealerArea>內的元素如何整合拖曳移動到7個牌堆，
這部分會拆成2個部分來看:

可將<DealerArea>卡牌移入至牌堆上方，且遵守移動遊戲規則的條件
其他牌堆的牌無法移入<DealerArea>牌堆中

實作將`<DealerArea>`卡牌移入牌堆

這邊在DragDemo.vue中設定提供給發牌區<DealerArea>判斷用的:move函數，因為這個函數不像函數limitLocalMove函數是同時給7個牌堆各自使用，所以可以看到沒有特別提到from的部分，因為不用特別想就可以知道一定是來自(from)發牌區。

如果不清楚limitLocalMove是做什麼的，這部分從第10天~第12天的文章都有提到，主要是對應<draggable>元件的:move函數判斷使否可拖曳成功。

檢查疊牌遊戲規則的部分就由函數checkNextOk判斷，幾天前寫好的函數重新複用了👍
這邊只要result回傳true就會讓卡牌移動自動產生變化。

// DragDemo.vue
/** 發牌區移動 */
function dealerMove(evt) {
    const to = getDomName(evt.to);
    const dealerCard = evt.draggedContext.element;

    // 檢查疊牌順序、花色是否正確
    const result = checkNextOk(cardStacks[to], dealerCard);
    return result;
}

樣板的部分就是小調整而已:

// DragDemo.vue
<DealerArea :deck="cardStacks.delaerStacks" :moveCard="dealerMove" />

結果看起來拖曳過去是沒問題，但本該移動過去的元素也仍留在原地，
如下圖GIF出現了2個梅花9，此為禁忌的二重身問題💀必須修正。
Day16有Bug的拖曳.gif

修正陰魂不散的元素

因為還是有拖曳成功，只是舊資料殘留在發牌區的陣列cardStacks.delaerStacks，所以只要在拖曳完成時，將發牌區的陣列去除已經發出去的那一張牌即可，以下是修正後的程式碼:

// DragDemo.vue
function dealerMove(evt) {
    const to = getDomName(evt.to);
    const dealerCard = evt.draggedContext.element;

    // 檢查疊牌順序、花色是否正確
    const result = checkNextOk(cardStacks[to], dealerCard);
    if (result) {
        changeOption.value = () => {
            cardStacks.delaerStacks = cardStacks.delaerStacks.filter(card => card.value !== dealerCard.value);
            changeOption.value = null;
        };
    }
    return result;
}