西蒙游戏挑战

Question

I want to compare the recent user pattern("userPattern") with the randomly generated pattern("gamePattern").and if userPattern eual to gamepattern I want to enter into next level.我想将最近的用户模式（“userPattern”）与随机生成的模式（“gamePattern”）进行比较。如果 userPattern 与 gamepattern 相同，我想进入下一个级别。 Ho to do that?怎么办？ now I have done up to responding to the user's click.现在我已经完成了对用户点击的响应。

My HTML code:我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>Press A Key To Start</h1>
    <main>
      <button type="button" id="green" class="green box"></button>
      <button type="button" id="red" class="red box"></button>
      <button type="button" id="yellow" class="yellow box"></button>
      <button type="button" id="blue" class="blue box"></button>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="index.js"></script>
  </body>
</html>

My JS code:我的JS代码：

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

var gamePattern = [];
var userPattern = [];

var level = 0;

function newSequence() {
  var randomNumber = Math.floor(Math.random() * 4);
  var colorChosen = color[randomNumber];
  var audio = new Audio("sounds/" + colorChosen + ".mp3");
  audio.play();
  $("#" + colorChosen)
    .fadeOut(250)
    .fadeIn(250);
  gamePattern.push(colorChosen);

  $("h1").text("Level " + level);
  level++;
  var userColorChosen;
  for (var i = 0; i < $("button").length; i++) {
    $("#" + color[i]).click(function () {
      userColorChosen = this.id;
      userPattern.push(userColorChosen);
      var audio = new Audio("sounds/" + userColorChosen + ".mp3");
      audio.play();
      $("#" + userColorChosen)
        .fadeOut(100)
        .fadeIn(100);
    });
  }
}

var call = true;
$(document).keypress(function () {
  if (call === true) {
    newSequence();
  }
  call = false;
});

Please help me.请帮我。

Answer 1

My JS code using Jquery for Simon Game:我的 JS 代码使用 Jquery for Simon Game：

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

var gamePattern = [];
var userPattern = [];

var level = 0;

$("button").click(function () {
  var userColorChosen = $(this).attr("id");
  userPattern.push(userColorChosen);
  var audio = new Audio("sounds/" + userColorChosen + ".mp3");
  audio.play();
  $("#" + userColorChosen)
    .fadeOut(100)
    .fadeIn(100);
  checkAnswer(userPattern.length - 1);
});

function checkAnswer(currentLevel) {
  if (userPattern[currentLevel] === gamePattern[currentLevel]) {
    if (userPattern.length === gamePattern.length) {
      setTimeout(function () {
        newSequence();
      }, 1000);
    }
  } else {
    $("h1").text("GAMEOVER");
    var audio = new Audio("sounds/wrong.mp3");
    audio.play();
    $("body").addClass("gameover");
    setTimeout(function () {
      $("body").removeClass("gameover");
    }, 100);
    startOver();
  }
}

function newSequence() {
  userPattern = [];
  level++;
  $("h1").text("Level " + level);
  var randomNumber = Math.floor(Math.random() * 4);
  var colorChosen = color[randomNumber];
  gamePattern.push(colorChosen);
  var audio = new Audio("sounds/" + colorChosen + ".mp3");
  audio.play();
  $("#" + colorChosen)
    .fadeOut(250)
    .fadeIn(250);
}

var call = true;
$(document).keypress(function () {
  if (call === true) {
    newSequence();
    call = false;
  }
});

function startOver() {
  level = 0;
  gamePattern = [];
  call = true;
}
``````````````````````````````````````````````````````````````````````````````````````````

Iam just a beginner so the above code may not be eeficient. but iam posting to help other bigginers like me. some experts may find my code unworthy, sorry for that. but to code this it took  a week for me. I felt like giving up but I want to become a Web-Devoloper.
So Iam keeping up my work to learning web devolopment.

As i said It took a week for the above code,even by looking at another solved code. is it okey  to take this much time. or Iam not worthy of becoming a web devoloper...

If someone out there having some opinion after reading the above statements. please reply me. I need some help... 
 
                               Thank you!!!

西蒙游戏挑战

问题描述

1 个解决方案

解决方案1
0 2020-09-28 20:34:49

西蒙游戏挑战

问题描述

1 个解决方案

解决方案1 0 2020-09-28 20:34:49

解决方案1
0 2020-09-28 20:34:49