Simon game challenge

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. Ho to do that? now I have done up to responding to the user's click.

My HTML code:

<!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:

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.

What you seem to be asking is "how do I compare two arrays of strings?" Try [this answer](https://stackoverflow.com/questions/7837456/how-to-compare-arrays-in-javascript). Next time, it would be helpful if you could narrow the code in the question so there wasn't so much for people to read to get to the core problem. — RaveTheTadpole, Sep 27 '20 at 23:23

score 0 · Answer 1 · edited Apr 03 '22 at 18:17

My answer using 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;
}

Simon game challenge

1 Answers1