免费接龙

很久以前，在同一个星系中，我开始尝试制作 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）。总的来说，我对结果感到满意，即使有一些错误挥之不去。 梅伦 / 空当接龙 纸牌游戏 free cell 的实现 以上就是免费接龙的详细内容，更多请关注我的其它相关文章！