制作网页游戏中的任务卡片，通常需要以下几个步骤：

1. 设计概念：首先，你需要明确任务卡片的设计目标和功能。任务卡片通常会包含任务名称、描述、奖励、完成条件等信息，可能还需要有视觉效果，如背景图、图标等。

2. 草图绘制：使用绘图软件（如Adobe Illustrator、Photoshop等），根据设计概念绘制出任务卡片的草图。考虑色彩搭配、字体选择、元素布局等因素。

3. 内容编写：在卡片上编写任务的具体内容，包括任务名称（简洁明了），任务描述（详细说明任务要求），可能的完成方法，以及完成任务后的奖励。

4. 图片和图标：根据任务的性质选择或制作相应的图片和图标，如箭头表示任务流程，图标表示奖励类型等。

5. 编程实现：如果任务卡片需要动态显示或交互功能（如点击后显示任务详情、进度条等），可能需要前端开发技能。使用HTML、CSS和JavaScript等技术，将设计图转化为可交互的网页元素。

6. 测试优化：制作完成后，进行功能测试，确保卡片的显示效果和交互功能无误。根据测试反馈进行优化，比如调整布局、颜色、字体等。

7. 发布更新：将任务卡片整合到游戏的UI中，发布到对应的网页或游戏内，供玩家查看和接受任务。

每个步骤都需要根据你的具体游戏设计和技术能力进行调整。如果你没有相关编程背景，可能需要找一个有经验的开发人员或者团队来协助你。

在本文中，我们学到了很多关于在创建应用程序之前对其进行规划，并将其分解为小步骤以使其易于实现。我们学习了如何使用普通的JavaScript在页面中插入和操作元素，这对任何只知道如何使用jQuery等库的人都很有帮助。我们做了一些有趣的事情来玩。享受！

这是我能找到的最后一个问题！我添加了一个蓝色背景，以获得更像马里奥的风格，现在它完成了！您可以通过计算和显示失败的尝试次数或在完成后添加消息来进一步扩展此游戏，但我认为这已经足够好了。

当我第一次这样做时，我一直隐藏着卡片三国战略单机游戏大全，这使得测试变得不必要地困难。这一次，我决定隐藏卡片作为最后一步之一，一旦所有功能都在那里。

现在，一切都立即发生。我们希望在进行选择后延迟，以便用户可以在再次隐藏卡片之前看到他们的选择。现在这并不重要，因为一切都是可见的，但是我们可以在将最终的风格触动放在卡片上之前处理它。

网页游戏怎么制作任务卡片

现在，您可以进行多个匹配。您会注意到，如果选择样式不匹配，它将立即消失，但这很好，因为我们没有设置任何延迟以允许其显示更长时间。

现在，我们只有两个猜测。如果它们是匹配项，则会显示匹配样式。如果不是，则将显示常规的选定样式。我们希望允许多种猜测。我们必须通过在两次猜测后重置猜测计数来执行此操作，无论它们是否匹配。

Determine if two selected cards are a match and hide them 判断两个选中的卡片是否相同，相同则两张卡片均消除

// Do not allow the grid section itself to be selected; only select divs inside the grid

第二步比第一步简单得多。现在，我们将复制卡片数组，然后循环访问该数组。首先，在数组下方，创建一个游戏网格变量，并使用 concat（） 复制该数组。

// Apply the background image of the div to the cardsArray image

现在，我们希望将图像显示在前端。我们将使用 forEach（） 遍历卡片阵列中的每个项目，为每个对象创建一个新的卡片 div，并设置该 div 的数据名称属性和背景图像样式属性。然后，我们将该 div 追加到网格中。这将总共给我们12个潜水员。

If none of this makes sense, please read The Introduction to the DOM article I wrote.

第一步是显示 12 张卡片，每张卡片都有不同的值。为此，我将创建一个对象数组，并将其放入cardAlarey变量中。每个对象将包含一个名称和一个图像。

每张卡都是 150x150，并且具有背景属性，因为我们将很快将卡图像添加为背景图像。当我们向代码中添加一些更复杂的功能（如卡片翻转）时，此CSS将被调整，但现在它很好。

我们将添加一些基本样式，这些样式刚好足以使应用有意义。这里没有框架或不必要的代码，甚至没有任何预处理器。这不是一个CSS教程，所以你应该已经知道这里发生了什么，但我只是用卡片创建一个flex网格。

首先，让我们创建设置。我们将创建索引.html，它只是一个常规的HTML框架，放入JS和CSS。整个应用程序将包含在游戏div中，因此此文件根本不会更改。

Show back of card initially and flip on select 初始显示卡片背面，选中后翻转卡片

Determine if two selected cards are a match and hide them. 判断两张选中卡片是否相同

在编写任何代码之前，我们需要了解从零到成品的实际步骤。一次构建整个游戏可能看起来有点不知所措，但是如果你把它分解成小任务，每个任务在完成之前看起来都是可以实现的。

游戏的前提是有一个由24张面朝下的牌组成的网格。牌面由成对的火柴组成。单击卡片将翻转它们，显示价值。当选择两张牌时，如果匹配，两张牌都会消失。如果不是，则卡片将翻转回面朝下。每次刷新游戏时，游戏都应该不同。

我得到了一个编码练习，用任何语言制作一个记忆游戏。我决定这样的任务真的不需要任何像 React 或 jQuery 这样的库，所以我用普通的 JavaScript 完成了它。

我们创建好了游戏，现在添加一些画龙点睛的方法让游戏变得更有趣。我们将添加用户用了多少次，以及花费了多少时间来完成这个游戏。

this.flippedCards.forEach(card => card.isMatched = true);

this.flippedCards.forEach((card) => {card.isFlipped = false});

this.flippedCards.forEach(card => card.isMatched = true);

这里运行时正常，但是逻辑判断等都发生得太快了，以致于用户根本不知道发生了什么。如果卡片不匹配，它们甚至会在用户看到显示的卡片背面之前就向后翻转。

:class="{ 'flipped': card.isFlipped, 'matched' : card.isMatched }"

this.flippedCards.forEach(card => card.isFlipped = false);

this.flippedCards.forEach(card => card.isMatched = true);

现在我们将打乱组合起来的数组。Lodash 有一个可以方法同样可以打乱数组。我们使用这个方法，然后，为了简化代码，我们可以将拼合数组和打乱数组写在一行中。

对于对象或数组中包含其他对象和数组的情况，要想拷贝这些元素需要通过深拷贝。否则，当改变嵌套引用上的数据时，原始对象和数组中的数据也会发生改变。

this.memoryCards = this.memoryCards.concat(cards1, cards2);

在 Vue 实例中添加一个 memoryCards 属性战棋策略网页游戏2017，存放翻转过的卡片（也就是说，每张翻转后的卡片，都有另一张卡片和它背面的图片）。

对，没错！使用这些卡片制作一个记忆游戏，我们需要每张卡片都正好有跟它匹配的卡片。同时我们也需要在游戏开始时清洗卡片的排列顺序。

回到刚才在生命周期函数中，我们在那里遍历卡片列表，并添加了一个新的属性，isFlipped——看上去没问题，但是 Vue 不喜欢这样。

添加下面的 CSS 样式。当类名 flipped 添加到卡片的类名上时，将展示卡片的背面。同时，该样式可以设置一个好看的翻转动效。

%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20