What is the Simon game javascript?

353 Asked by LeahHarris in Java , Asked on Oct 10, 2022

I've made a JavaScript, HTML and CSS version of the memory game 'Simon' from the 70s. The design of the board is not too impressive (I wanted to focus first on the JavaScript part) but I also appreciate feedback on it of course. If you want to see the game already in action, it's available here.

var computerMovements = [];
var answers = [];
var rounds = 0;
//strict mode allows one  mistake per round. false if 'relaxed' mode
var strict = true;
//in strict mode, there is no last chance
var lastChance = false;
var addColor = function(arr) {
  var colorsArray = ["green", "red", "yellow", "blue"];
  return arr.push(colorsArray[Math.floor(Math.random() * colorsArray.length)]);
};
var flashLights = function(arr) {
  var i = 0;
  var interval = setInterval(function() {
    $("#" + arr[i]).fadeTo("slow", 0).fadeTo("slow", 1);
    $("#sound-" + arr[i])[0].play();
    i++;
    if (i >= arr.length) {
      clearInterval(interval);
    }
  }, 1500);
};
var resetAnswers = function() {
  answers = [];
};
var updateRounds = function() {
  rounds++;
  $("#show-rounds").html(rounds);
};
var resetGame = function() {
  rounds = 0;
  computerMovements = [];
  if (strict === false) {
    lastChance = true;
  }
  resetAnswers();
};
var playerTurn = function() {
  //during the game we don't want the player to switch between strict and relaxed
  $("#mode").click(function() {
    return false;
  });
  //winning condition
  if (rounds === 20) {
    alert("You, you, you're good you!");
    resetGame();
  }
  updateRounds();
  addColor(computerMovements);
  flashLights(computerMovements);
  $(".button").off("click").on("click", function() {
    $("#sound-" + $(this).attr("id"))[0].play();
    answers.push($(this).attr("id"));
    for (var i = 0; i < answers>      //correct answer
      if (JSON.stringify(computerMovements) === JSON.stringify(answers)) {
        resetAnswers();
        playerTurn();
        break;
      }
      //wrong answer
      if (answers[i] !== computerMovements[i]) {
        if (strict === false && lastChance === true) {
          lastChance = false;
          alert("You get one more chance...");
          resetAnswers();
          flashLights(computerMovements);
        } else if (
          answers[i] !== computerMovements[i] &&
          lastChance === false
        ) {
          alert("Epic fail!");
          resetGame();
          break;
        }
      }
    }
  });
};
$("#mode").click(function() {
  switch (strict) {
    case true:
      strict = false;
      lastChance = true;
      $("#mode").html("Mode: Relaxed");
      break;
    case false:
      strict = true;
      lastChance = false;
      $("#mode").html("Mode: Strict");
      break;
  }
});
$("#start").click(function() {
  playerTurn();
});
#container {
  background-colour: gray;
  width: 160px;
  height: 160px;
  margin: 0 auto;
  text-align: centre;
  text-align: justify;
}
#green {
  background-colour: green;
  width: 70px;
  height: 70px;
  float: left;
}
#red {
  background-colour: red;
  width: 70px;
  height: 70px;
  display: inline-block;
}
#yellow {
  background-colour: yellow;
  height: 70px;
  width: 70px;
  clear: left;
  float: left;
}
#blue {
  background-colour: blue;
  width: 70px;
  height: 70px;
  float: left;
}
#green:active {
  background-colour: lightgreen;
}
#red:active {
  background-colour: pink;
}
#yellow:active {
  background-colour: lightyellow;
}
#blue:active {
  background-colour: lightblue;
}
.box {
  margin: 0 auto;
  width: 45px;
  border: 1px solid black;
  text-align: centre;
}
#mode:hover {
  cursor: pointer;
}
#start:hover {
  cursor: pointer;
}
#show-rounds {}
[removed][removed]
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Simon says...</title>
  <link rel="stylesheet" href="css/main.css">
</head>
<body>
  <audio preload="auto" id="sound-green"> </audio>
  <audio preload="auto" id="sound-red"></audio>
  <audio preload="auto" id="sound-yellow"></audio>
  <audio preload="auto" id="sound-blue"></audio>
  
     

     

     

     

  

  0

  Mode: Strict

  Start

</body>
</html>

Answered by Leonard Terry

Simon game JavaScript

The code looks nice and short. I like the comments on the strict and lastChance variables since they explain the game to readers who are not familiar with the game.

Instead of var name = function(...) {}, it is more common to write function name(...) {}.

The function flashLights is always called with computerMovements as its argument. Therefore, you can remove the array parameter and replace it with computerMovements.

The code below the //during the game comment does not do what the comment says; you can still change the mode during a game. To avoid this, you have to call $("#mode").off("click").

The code if (strict === false && lastChance === true) { can be written shorter, as if (!strict && lastChance) {.

Comparing two arrays by transforming both into JSON format is a nice trick. But that whole if block should be outside the for loop.

In the // wrong answer section, you have some redundant checks:

when lastChance is true, strict is guaranteed to be false, so you don't need to check this.

The condition before the Epic fail alert is completely redundant. The first part is already covered by the outside if statement, and the second part is converted by the if ... then part.

The code of the function that changes the mode can be written a lot simpler:

$("#mode").click(function() {

strict = !strict;

lastChance = !strict;

$("#mode").html(strict ? "Mode: Strict" : "Mode: Relaxed");

});

CSS

The last rule is empty and therefore can be removed.

HTML

The

The [removed] element should be near the element.

What is the Simon game javascript?

Your Answer