How to make a Simon Js game based on arrays?

Question

Im writing a js simple simon game and im clueless on how to do it.

I know that :

I need to create two arrays, and a level(score) variable

• A randomly generated number from 1 to 4 (inclusive) needs to be added to the first array, When one of four buttons is pressed, the value of it is added to the second array, if the second array is not the
  same size or bigger than the first array. Each time a value is added to the second array, check that the value is equal to the value in
  the same position in the first array, if not, clear both arrays, and set levelvar to 1, and alert "gameover" This means if you get one
  wrong, you cannot continue. If the length of the second array
  matches the level variable, add a random number to array one, clear
  array two, increment levelvar.

But, I am clueless in aspect to the code.

My Jsfiddle :http://jsfiddle.net/jbWcG/2/

JS:

var x = []
var y = []
var levelvar = 1
document.getElementById("test").onclick= function() {
document.getElementById("test").innerHTML=x
};
document.getElementById("button1").onclick= function() {
x.push("Red")
};
document.getElementById("button2").onclick= function() {
x.push("Green")
};
document.getElementById("button3").onclick= function() {
x.push("Yellow")
};
document.getElementById("button4").onclick= function() {
x.push("Blue")
};

HTML:

<button id="button1">Red</button><br />
<button id="button2">Green</button><br />
<button id="button3">Yellow</button><br />
<button id="button4">Blue</button><br />
<p id="test">Click To see What you have clicked</p>

How would I make a two arrays see if a certain value is the same?

Lets say, that the generated array is : [1,2,3,4,1,2,3] and i am at position 5 and i press 2, how would i check that the two numbers match? Thanks in advance

Answer 1

The easiest way to check one at a time that position i of your array is x is

if (gen_arr[i] == x) {
  // matches
} else {
  // doesn't match
}

So if you conceptualize the flow of your game, you're going to want to, at each button press:

1. somehow keep track of which index they are on (maybe have a counter that increments with each button press)
2. checks if gen_arr[i] == x (and displays game over if it doesn't).

Alternatively, instead of keeping track of which index, you can call gen_array.shift() to get the first item in gen_array AND delete it from the array, in a flow kind of like this:

var gen_array = [1,2,3,4,1];

function press_button(button_pressed) {
  var supposed_to_be = gen_array.shift();

  // at this point, on the first call,
  //   supposed_to_be = 1, and gen_array = [2,3,4,1]

  if (supposed_to_be != button_pressed) {

    // game over!

  } else {
    // you survive for now!

    if (gen_array.length() == 0) {
      // gen_array is empty, they made it through the entire array
      // game is won!
    }
  }
}

While that represents the general "what to check" at every step, using this verbatim is not recommended as it quickly leads to an unstructured game.

I recommend looking into things called "game state" diagrams, which are basically flow charts which have every "state" of the game -- which in your case, includes at least

1. "displaying" the pattern
2. waiting for button press
3. checking if button press is correct
4. game over
5. game won

And from each state, draw arrows on "how" to transition from one state to the next. You can do a google search to see examples.

Once you have a good game state diagram/flow chart, it's easier to break down your program into specific chunks and organize it better ... and you can usually then see exactly what you need to code and what is missing/what is not missing.