今天，我们将构建名为Simon Game的流行英国游戏

我通过经验了解到，解决编码挑战的秘诀是首先要了解您的要求。为了实现这一目标，我们将不得不了解Simon游戏的工作原理。查找YouTube教程视频here。

让我尽力解释。

这主要是模式纪念游戏。这个游戏的方式有四个盒子。每个盒子都是不同的颜色。游戏以“按下任何键弹奏”标题开始。完成此操作后，突出显示了一个盒子（带有特定颜色），而高光在毫秒后逐渐消失。这代表了第一个模式。您要单击突出显示的框。 您已经成功记住了第一个模式。

游戏突出显示另一种颜色...

但请记住，这全都与模式有关ðð如果您单击以下突出显示的模式，则失败了！ ððð（我很难学到这一点）。因为这是一个模式游戏，所以您必须记住突出显示并从那里开始的第一种颜色（框）。

示例：以此顺序显示的图案[蓝色]第一亮点：播放[blueðµ]

[红色]第二突出显示[蓝ðµ] [red ð´]

[绿色]第三突出显示[blueðµ] [redð´] [绿色ð¢]

[蓝色]第四亮点播放[蓝ðµ] [redð´] [绿色ð¢] [blueðµ] ....游戏在连续循环中继续进行直到您错过图案，然后重新开始。

有一种玩游戏here

因为这既不是HTML也不是CSS教程，所以我会删除指向HTML和CSS代码的链接。您可以抓住这些，让它们在首选的代码编辑器中运行，打开JavaScript文件，然后开始启动！

步骤1

我们必须考虑的第一件事是我们需要定义按钮的颜色。在我的HTML文件中，您可以看到我们有四个具有不同颜色的ID（红色，蓝色，绿色和黄色）的Divs，可以分别识别每个盒子。首先，我们可以在JavaScript中进行此数组

var buttonColors = ["red", "blue", "green", "yellow"];

第2步

我们需要一种存储游戏将要提出的模式的方法，以及我们用户将要创建的模式（通过玩游戏），以便我们可以跟踪它。

var gamePattern = []; var userClickedPattern = [];

步骤3

我们需要创建一个功能，使游戏能够选择要在序列中添加的按钮。我们从游戏的解释中回想起，这不是一个刚性结构，因此计算机旋转了随机模式。为了实现这一目标，让我们创建我们的功能，并获得一个随机变量。

function nextSequence() { var randomNumber = Math.floor(Math.random()*4);}

我们将随机数乘以4，以便我们可以使用o和3之间的值。使用'Math.floor'方法从我们的数字中删除任何浮点。

步骤4

我们需要利用我们的随机变量来帮助我们从“按钮彩色”数组中选择随机索引。我们还需要找到一种方法来将所选索引的值（游戏中的第一个序列）添加到我们的游戏模式数组中。

var randomChosenColor = buttonColors[randomNumber]; gamePattern.push(randomChosenColor);

步骤5

现在，我们将添加一些动画，作为视觉提示，以指示计算机选择哪种颜色（框）。

document.querySelector("#" + randomChosenColor).fadeIn(100).fadeOut(100).fadeIn(100);

我们使用 document.querySelector来针对我们想要的HTML元素。我们需要的是用ID确定的，因此为什么我们必须使用ID选择器“＃”。此外，因为我们不是在硬编码任何特定值，但是让计算机随机选择，我们必须编写代码，以便从我们的“选择randomcolor”变量中馈出选择。

我们的nextSequence函数应该看起来像这样，

function nextSequence() {
    userClickedPattern = [];
    var randomNumber = Math.floor(Math.random()*4);
    var randomChosenColor = buttonColors[randomNumber];
    gamePattern.push(randomChosenColor)
    document.querySelector("#" + randomChosenColor).fadeIn(100).fadeOut(100).fadeIn(100);
}

步骤6

除了在我们较早的功能中引入的视觉援助外，我们还可以添加一些声音提示。我们将在我们的playSound()函数中执行此操作。您可以在this github repo上找到该项目使用的声音。我们将在JavaScript中使用默认音频类。

function playSound(audioName) {
    var audio = new Audio("sounds/" + audioName + ".mp3");
    audio.play();
}

*我们的函数采用audioName的参数，因此我们使用此参数传递了要使用的音频名称的值。在JavaScript中掌握了默认的音频类后，我们继续使用我们的audioName参数来掌握不同的声音。我们将在即将到来的功能中看到此实现。 *

步骤7

我们需要构建一个函数，以帮助轨道了解他们单击的按钮。这是通过添加某种视觉辅助/线索，即用户按下哪个按钮。

function animatePress(currentColor) {
    document.querySelector("#" + currentColor).addClass("pressed");
    setTimeout(function () {
    document.querySelector("#" + currentColor).removeClass("pressed");
  }, 100);
}

*在我们的styles.css中，有一个“按下”的类名称。我们在这里所做的是使用JavaScript切换并在我们的类pressed上切换。切换此类只是增加并减少不透明度。还要注意，我们使用setTimeout函数来设置切换的持续时间。 *

步骤8

到目前为止，我们的游戏看起来还不错，但是实际上无法跟踪用户是否遵循计算机设置的模式，这正是下一个功能的目的。我们写了第一个“ if”语句。

if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
      if (userClickedPattern.length === gamePattern.length){
        setTimeout(function () {
          nextSequence();
        }, 1000);
      }
    }

*在此if语句中，我们正在检查游戏模式索引与用户模式的索引的并发。这将使我们能够知道用户何时超出了序列或未使用的序列。它还检查每个阵列的长度是否相同。如果两种情况都被证明是正确的，那么我们较早的功能nextSequence将被触发。 *

当然，我们需要使用其他语句将其关闭，该语句检查用户何时未正确获得序列。

else {
      playSound("wrong");
      document.querySelector("body").addClass("game-over");
      setTimeout(function() {
          document.querySelector("body").removeClass("game-over");
      }, 200);
      document.querySelector("h1").text("Game over! Press Any Key To Restart");
     //startOver()
    }

*在此else语句中，我们触发了另一个CSS类game-over并将其切换。这里有一个评论的功能。您将稍后将其理解，因为它将很快解释。 *

我们的最终功能应该看起来像这样：

function checkAnswer(currentLevel) {
    if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) {
      if (userClickedPattern.length === gamePattern.length){
        setTimeout(function () {
          nextSequence();
        }, 1000);
      }
    } else {
      playSound("wrong");
      document.querySelector("body").addClass("game-over");
      setTimeout(function() {
          document.querySelector("body").removeClass("game-over");
      }, 200);
      document.querySelector("h1").text("Game over! Press Any Key To Restart");
      //startOver();
    }
}

步骤9

我们需要用户玩游戏的方法。也就是说，我们必须在按钮中添加功能。我们将使用.click方法。在此方法中要包含的功能中，我们需要指定我们想要通过到远到远的函数
的功能列表

   document.querySelector(".btn").click(function() {
    var userChosenColour = document.querySelector(this).attr("id");
    userClickedPattern.push(userChosenColour);
    playSound(userChosenColour);
    animatePress(userChosenColour);
    checkAnswer(userClickedPattern.length-1)
     });

*当我们按下此按钮时，将会发生很多事情。我们要做的第一件事是捕获单击按钮的ID并将其存储在我们单击按钮的userChosenColor中。这是使用“此”关键字来实现的。然后，我们可以使用用户选择的任何颜色（按钮）填充userClickedPattern阵列。我们引入了一些已经定义的功能，这些功能将我们的userChosenColor作为参数。 *

步骤10

终于！我们需要一种方法来确保用户能够在错过序列时重新启动游戏。我们将通过我们的startOver函数来实现这一目标。我们首先需要在文件开头创建一个变量，以跟踪游戏何时启动，

var started = false;然后我们的功能变为

function startOver() {
  gamePattern = [];
  started = false;
}

我们可以在这里看到，在我们的功能中，我们只是在重新启动所有内容，并确保一切都以新的板岩开始。请返回到您的 check answer功能，并输入我们的startOver()

我们几乎在路的尽头，伙计们！！！ ð¥³ð¥³ð¥³

我们需要的最后一件事是一种跟踪游戏何时开始的方法。

document.querySelector(document).keypress(function() {
    if (!started) {
        document.querySelector("h1").text("Level " + level);
        nextSequence();
        started = true;
    }
});

yasssss ！！！ ð¥³ð¥³ð¥³我们完成了第一个JavaScript项目！写这本书是一次令人兴奋的经历。希望您在制造此游戏并向您的朋友展示时会感到同样的兴奋。

感谢您停止！

Cover photo