免费接龙

很久以前，在同一个星系中，我开始尝试制作 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 开始？？？）而不是对象并在内部循环上循环外部数组：

智谱清言 - 免费全能的AI助手

智谱清言 - 免费全能的AI助手

2

查看详情

<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）。

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

以上就是免费接龙的详细内容，更多请关注php中文网其它相关文章！