关于如何使用Vue js第2部分构建简单游戏的教程。第1部分可在此处找到。
第5步建立关卡
从第1部分中停下来的地方开始，让我们实现关卡或回合的概念。 这意味着如果用户位于第1级，则游戏将突出显示1个正方形，如果在第2级，则该游戏将突出显示2个正方形，依此类推。 在前面的步骤中，我们实现了迭代器的概念，但这是我们设置并相应减少的数字。 在这一步中，我们希望游戏控制该迭代器。 也就是说，我们希望游戏根据我们所处的级别进行递增和递减。 由于我们有一个控制循环迭代的变量，因此我们需要另一个变量来跟踪我们正在进行的回合。 当游戏开始时，两个变量都相同，但是级别变量将由游戏本身更改，而回合将是用户前进到下一个级别时递增的值。 让我们看一下代码。
- 翻转床铺地毯，一个探索团结的周末！
- Dev Blog＃2.2 — Nitad在这里！
- 使用Unity中的Sunny Land资产包，使您的2D Platformer步入正确的轨道
- 失败博物馆：Sifteo（显然是一个传说）
- 这里有7种经济有效的方法来验证您的独立游戏创意并开始建立您的受众群体……
....
数据（）{
返回{
...
等级：0，
回合：0
...
}
}
...
方法： {
...
handleClick（target）{
const self =这个
Object.keys（self.active）.forEach（key => {
if（target.currentTarget.className ===键）{
self.active [key] = true
}
}），
self.next（）
}，
下一个（） {
const self =这个
++ self.round
self.level = self.round
self.startGame（）
}，
...
}
在这一步中，我们将实现自动迭代器的概念。 当我们处理click事件时，它会调用next（）方法，该方法会增加round变量，将级别设置为round，然后调用startGame（）。 这可能有点令人困惑，因为如果您注意到我们单击正方形时，handleClick方法会在继续下一个方法之前突出显示该元素。 因此，它在浏览器中看起来有些奇怪，但是如果您仔细观察，您会发现我们正在增加级别并根据我们所处的级别突出显示正确的次数。 这是提交。
步骤6实施游戏逻辑
其余步骤将集中在实现游戏逻辑上。 那么我们需要跟踪什么？ 我的想法是，我们需要跟踪随机选择要突出显示的颜色以及用户单击的颜色。 如果颜色顺序为红色，蓝色，绿色，并且用户单击红色，蓝色，绿色，我们应该进入下一个级别，否则我们需要处理该错误。 让我们集中精力捕获被选中以突出显示的元素。
....
数据（）{
返回{
...
colorSequence：[]，
...
}
}，
方法： {
...
setElementToTrue（randomHex）{
const self =这个
Object.entries（self.hexCodes）.forEach（key => {
如果（key [1] == randomHex）{
self.active [key [0]] = true
self.colorSequence.push（key [0]）
self.toggleToFalse（）
}
}）
}，
...
}
这段代码非常简单。 我们声明了一个名为colorSequence的数组，每当我们将一个元素设置为true时，就会将其推入数组。 默认情况下，push运算符会将元素放置在数组的末尾。 现在我们有了一个数组，我们可以将值进行比较，以便可以开始处理捕获的click事件。 进一步细分，我们需要跟踪用户在给定回合中单击了多少次，以及单击了什么颜色。 例如，如果这是他们的第三次单击，并且他们单击了绿色，则我们需要一种方法来验证该结果并将其与我们的colorSequence数组进行比较。 我认为计算属性是解决问题的方法。 这似乎是向用户提供一些反馈的好时机。 例如，向用户显示我们正在确认他们的行为不是很好吗？ 如果颜色顺序是红色，蓝色，并且它们单击红色，则我们应该通知他们该操作。
....
数据（）{
返回{
...
colorSequence：[]，
clickCount：0，
...
}
}，
计算：{
currentIndex（）{
const self =这个
返回self.colorSequence [self.clickCount]
}，
}，
方法： {
...
handleClick（target）{
const self =这个
如果（target.currentTarget.className === self.currentIndex）{
self.highlight（）
++ self.clickCount
if（self.clickCount === self.colorSequence.length）{self.next（）}
}其他{
// self.restart（）
}
}，
Highlight（）{
const self =这个
Object.keys（self.active）.forEach（key => {
如果（self.currentIndex ===键）{
self.active [key] = true
setTimeout（function（）{
self.active [key] = false
}，100）
}
}）
}，
...
让我们谈谈这段代码。 首先是计算的属性currentIndex 。 这是根据clickCount编号返回colorSequence项目。 因此，如果colorSequence看起来像[红色，红色，蓝色，绿色，黄色]，并且是用户第一次单击，则将返回红色。 我们还更改了handleClick（）方法。 现在，我们不再执行顺序搜索，而是利用计算属性来根据用户单击的次数来验证单击的元素是否等于我们在colorSequence数组中的位置。 您还会注意到我们添加了Highlight（）方法，该方法也利用了我们的计算属性。 这一切都是为了给用户反馈。 如果单击黄色，则通过对该元素应用突出显示来确认该动作。 它非常微妙，但是提供了更好的游戏体验，使用我们的计算属性非常容易。 我不喜欢嵌套if语句，但在这里似乎很合适。 成功执行验证后，我们增加clickCount并检查clickCount是否等于我们的colorSequence数组长度。 如果它们相等，我们就可以进入下一个层次。 否则，级别不完整。 您可以忽略注释掉的restart（）方法，因为我们将介绍以下步骤。 这是提交。
步骤7加强游戏循环
现在，游戏真的开始融合在一起了。 我们已经实现了基本的游戏逻辑，现在我们需要使游戏更加友好，并加强游戏循环。 首先，我们实现一个模式，让用户控制游戏流程并通知用户他们处于哪个级别。 让我们首先解决模板部分。
{{level + 1}}级
...
data（）{
返回{
...
showModal：否
}
}
在这里，我们正在实现与之前步骤相同的v-bind概念。 现在，如果值showModal为true，我们将显示模态。 我将不涉及构建模式的CSS，但是如果您感兴趣，这里就是我从中获取代码的地方。 我们还使用模板语法向用户显示他们所在的级别。
现在，无需使用生命周期挂钩来启动游戏，我们可以在用户单击“开始”按钮时调用一个方法。
...
data（）{
...
等级：0，
回合：0
...
}
...
方法： {
...
hideModal（）{
const self =这个
++ self.round
self.showModal =假
self.startGame（）
}，
下一个（） {
const self =这个
self.colorSequence = []
self.showModal = true
self.level = self.round
self.clickCount = 0
}
}
...
我们要做的第一件事是增加可以进入next（）方法的回合，但是在这里没有什么大不了的。 然后，我们隐藏模态并开始游戏。 当我们进入下一个级别时，我们只需重置我们的值并显示将再次开始游戏的模式。 现在我们可以控制游戏了，理论上赢还是继续赢。 最后一步是当用户迷路时进行处理。 这是此步骤的提交。
步骤8实施“重启游戏”
好。 我们还有最后一件事要做！ 让我们处理在输球时重新开始游戏的情况。 重置游戏实质上是将我们所有的数据都置于游戏首次启动时的状态。 我们还将创建一个Los变量，该变量将控制一些必要时可以向用户显示的文本。
{{level + 1}}级
糟糕！
...
data（）{
...
输：错误，
...
}
...
方法：
...
hideModal（）{
const self =这个
self.colorSequence = []
self.showModal = true
self.level = 0
self.round = 0
self.clickCount = 0
self.lose = true
setTimeout（function（）{
self.lose =假
self.next（）
}，2000年）
}，
...
你有它。 我们使用Vue js制作了一个游戏。 这是最后的提交，这是游戏库，它有一些调整，但占我们在此实现的功能的99.8％。 谢谢阅读！
