我们的mod 3项目是一个名为Hanafuda的纸牌游戏。 通常由3位玩家玩。 对于MVP，我们决定选择一名玩家，因为添加玩家需要添加action cables ，这对我和我的伴侣来说都是新的，并且需要更多时间才能正确实施。
让我们深入研究项目的不同方面：
1.用户界面
在游戏开始时，您将获得8张纸牌，而8张纸牌被放置在桌上。 您首先要尝试将手中的一张牌与桌上的一张牌进行比对。 西装相同的卡匹配。
如果匹配成功，匹配的卡片将被添加到屏幕右侧的收藏中。
否则，手中的所选卡将放置在桌子上。
手中玩完纸牌后，您必须从卡组中抽出一张纸牌，然后尝试将该纸牌与桌子上的一张纸牌匹配。 然后，您要么收集匹配的卡片，要么从甲板上抽出的卡片放在桌子上。
当您手中所有的牌都玩完时，游戏结束。 然后，您将基于收集的卡片获得分数。
2.代码
我们首先将所有卡片及其搭配以及计算分数所需的其他属性植入数据库。 一旦我们通过链接"${API}/cards/deal"获取API，它就会为我们提供一个具有三个键的对象，分别是hand ， table和deck ，每个键都指向卡对象和数组对象。 我们使用数组上可用的Ruby的shuffle方法做到这一点。
一旦从API获得数据，我们就映射数组，并用img元素替换对象，并为它们定义与数据库中卡片对象相对应的data-attributes 。 然后，我们将card和hand图像附加到其特定的div ，并将deck数组保存到全局变量deckArr 。
我们为整个事件提供了一个事件监听器，只需单击鼠标即可启动处理程序功能。 处理程序函数使用条件e.target.nodeName === 'IMG'检查target是否为img标签。 这会阻止其他任何元素的点击。
控制流量
- 我们必须检查所点击的卡在哪里，例如手，卡和牌组。 我们通过检查卡的父容器的ID来解决这一问题。 例如：
e.target.parentNode.id === 'hand'。 - 我们必须确保用户在应该抽签时不会点击手牌，反之亦然。 我们通过声明这些变量来做到这一点：
let handIsLocked = false, deckIsLocked = true, tableIsLocked = true，并在触发click事件后检查这些布尔值。 - 我们有一个选择数组，其中包含两个包含所选图像的元素。 我们这样声明选择：
let selection = [null, null]。 - 我们通过检查
selection数组是否包含任何空元素来检查用户是否选择了两张牌。 我们可以通过selection.every(x => x)。 - 然后，我们检查西服是否匹配。 我们通过检查
img标签上可用的data-suit做到这一点。 - 根据这种情况，我们将卡片移到集合或表上。
