很久以前，在同一个星系中，我开始尝试制作 Freecell，作为学习 Angular 1.3 的一种方式。

我已经走了这么远，然后我就被其他事情分散了注意力，就像副项目一样。

我最近有一些空闲时间（我知道，我也没想到），所以我想我应该再试一次。

我基本上是从头开始，因为我对 Angular 1.3 不再感兴趣，如果我需要一个框架，我倾向于使用 VueJS 来处理我的 Web 内容。

要查看结果，请访问 github.io：单击此处玩空当接龙！

自从我十五年前学习 WPF 以来，我就非常喜欢 MVVM 编程风格。 VueJS 非常容易地允许这种风格，甚至对其进行改进，而不需要显式事件来更新 UI。

这意味着游戏逻辑与视图逻辑完全分离，这使得编写这个游戏变得轻而易举。

这并不全是飞机航行，因为出于某种原因，我决定将卡片存储在二维锯齿状阵列中。这不是一个糟糕的主意，但每个内部数组都是一列，所以当我试图让卡片在 CSS 网格中正确布局时，我不能只迭代外部数组，然后迭代内部数组，例如

因为这会将列排列为行。所以我不得不使用索引（为什么 VueJS 不从 0 开始？？？）而不是对象并在内部循环上循环外部数组：

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

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

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

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

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

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