免費接龍

很久以前，在同一個星系中，我開始嘗試製作 Freecell，作為學習 Angular 1.3 的一種方式。

我已經走了這麼遠，然後我就被其他事情分散了注意力，就像副項目一樣。

我最近有一些空閒時間（我知道，我也沒想到），所以我想我應該再試一次。

我基本上是從頭開始，因為我對 Angular 1.3 不再感興趣，如果我需要一個框架，我傾向於使用 VueJS 來處理我的 Web 內容。

要查看結果，請訪問 github.io：點擊此處玩空當接龍！

自從我十五年前學習 WPF 以來，我就非常喜歡 MVVM 程式設計風格。 VueJS 非常容易地允許這種風格，甚至對其進行改進，而不需要明確事件來更新 UI。

這意味著遊戲邏輯與視圖邏輯完全分離，這使得編寫這個遊戲變得輕而易舉。

這並不全是飛機航行，因為出於某種原因，我決定將卡片存放在二維鋸齒狀數組中。這不是一個糟糕的主意，但每個內部數組都是一列，所以當我試圖讓卡片在 CSS 網格中正確佈局時，我不能只迭代外部數組，然後迭代內部數組，例如

<template v-for="cardCol in game.table">
    <template v-for="card in cardCol">

因為這會將列排列為行。所以我不得不使用索引（為什麼 VueJS 不從 0 開始？？？）而不是物件並在內部循環上循環外部數組：

<template v-for="rowi in game.getLargestColumnCount()">
  <template v-for="coli in game.table.length">
    <div v-if="game.table[coli-1].length == 0 && rowi == 1" :class="'card column'+coli+' freecell'">
      <img src="cards/blank.png" @click="game.selectDropClear(coli-1, rowi-1)" >
    </div>
    <div v-else-if="game.getCard(coli-1, rowi-1) != ''" :class="'card '+cardClass(coli-1, rowi-1)">
      <img :alt="cardToCardName(game.getCard(coli-1, rowi-1))" :src="'cards/'+game.getCard(coli-1, rowi-1)+'.png'" @click="game.selectDropClear(coli-1, rowi-1)">
    </div>
  </template>
</template>

我認為我做出的另外兩個糟糕的設計決策是實現自動完成，並使點擊處理程序只是遊戲中的一個函數（即模型），而不是在視圖中，並讓視圖確定哪個過程要採取的行動。

讓遊戲決定玩家要執行的操作（即選擇一張牌（或一堆牌）、將牌放在另一堆牌上或取消選擇牌）會導致出現一些意大利麵條式代碼，我可能想在以後重構這些程式碼。

最初我不想實現自動完成，因為我不想考慮邏輯。但在玩了幾場沒有它的遊戲後，我對將每張卡敲入主行感到非常無聊，所以我覺得有必要實施它。

我應該堅持我的立場，因為這很糟糕。這是一大堆程式碼，最初導致了一堆錯誤和令人頭痛的問題。它甚至不是全自動的。另一方面，現在我幾乎不需要進行那麼多的敲擊操作。

我確實堅持不讓卡片拖放，因為我做這個主要是為了在我的手機和平板電腦上玩，所以從用戶體驗角度來說，點擊到位要容易得多（至少是我的用戶體驗， ymmv）。

總的來說，我對結果感到滿意，即使有一些錯誤揮之不去。

梅倫 / 空當接龍

紙牌遊戲 Free Cell 的實現

以上是免費接龍的詳細內容。更多資訊請關注PHP中文網其他相關文章！