免费接龙

很久以前，在同一个星系中，我开始尝试制作 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"></template></template>

因为这会将列排列为行。所以我不得不使用索引（为什么 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 &amp;&amp; rowi == 1" :class="'card column'+coli+' freecell'">
      @@##@@
    </div>
    <div v-else-if="game.getCard(coli-1, rowi-1) != ''" :class="'card '+cardClass(coli-1, rowi-1)">
      @@##@@
    </div>
  </template></template>

我认为我做出的另外两个糟糕的设计决策是实现自动完成，并使点击处理程序只是游戏中的一个函数（即模型），而不是在视图中，并让视图确定哪个过程采取行动。

让游戏决定玩家要执行的操作（即选择一张牌（或一堆牌）、将牌放在另一堆牌上或取消选择牌）会导致出现一些意大利面条式代码，我可能想在以后重构这些代码。

最初我不想实现自动完成，因为我不想考虑逻辑。但在玩了几场没有它的游戏后，我对将每张卡敲入主行感到非常无聊，所以我觉得有必要实施它。

我应该坚持我的立场，因为这很糟糕。这是一大堆代码，最初导致了一堆错误和令人头疼的问题。它甚至不是全自动的。另一方面，现在我几乎不需要进行那么多的敲击操作。

我确实坚持不让卡片拖放，因为我做这个主要是为了在我的手机和平板电脑上玩，所以从用户体验角度来说，点击到位要容易得多（至少是我的用户体验， ymmv）。

总的来说，我对结果感到满意，即使有一些错误挥之不去。

    <img :alt="cardToCardName(game.getCard(coli-1, rowi-1))" :src="'cards/'+game.getCard(coli-1, rowi-1)+'.png'" rowi-1><img src="/uploads/picture/2024/29/202410101133434243_7649.jpg" alt="免费接龙">