A simple game which goal is for player to repeat the pattern showed by the ‘instructor’. With each round a new step is added to the pattern making, the game much more difficult with every round. Player with the fastest correct sequence and points will win.

Updated the game logic from having two players to take turns to follow the sequence and having timer as the win condition to two players representing different keys competing on who finishes the sequence first. The faster player scores a point and the player with the higher points after 5 rounds will win.

1. 5 seconds timer will start upon player clicking the start button

2. Player 1 will use the '1,2,3,4' keys to follow the pattern '1,2,3,4' whereas Player 2 will use the 'left,up,right,down' keys for the '1,2,3,4' pattern for extra challenge.

3. Follow the pattern from the numbers below or the dance instructor's move. Key input starts as soon as the timer is up.

4. Starting with 4 moves and doubling the number of moves every round(Up to round 5)

5. Player who finishes the pattern first will get 1 point.

6. Player with the most points after round 5 wins!

Creating many different divs for different purposes.

Keys chosen

Credit http://keycode.info/

Setting the number of moves in an array for the dance instructor

var instructorMoves = [37,38,39,40]

By doing it this way, I can directly compare it with Player 2's keycode combinations(the arrow keys) using ..

var strOfKeys1 = e.which and if(strOfKeys === randSequence)

As for Player 1, I can subtract the given array of numbers to match with my number keys' keycode.

var strOfKeys = e.which - 12

if(strOfKeys === randSequence[counter1]) {
  counter1++
  if(counter1 === 4 && rounds === 1) {
    $(".playerOneAlert2").html("O").show().delay(2000).fadeOut(1000)
    $(".playerOneAlert2").css({"color" : "green", "font-size" : "50px"})
    counter1 = 0
    rounds++
    scoreP1++
    $playerOne.text(`Score: ${scoreP1}`)
    new Audio('./assets/audio/cheer.mp3').play()
    timerWithAddRounds()
  }

else if (strOfKeys !== randSequence[counter1] && whichPlayer === 1) {
   $(".playerOneAlert2").html("X").show().delay(400).fadeOut(400)
   $(".playerOneAlert2").css({"color" : "red", "font-size" : "50px"})
   new Audio('./assets/audio/boo.mp3').play()
   counter1 = 0
}

Using a function with an argument of arr and a for loop inside the function to jumble up the position.

function shuffleArray(arr) {
  for (var i = arr.length - 1; i > 0; i--){
    var shuffle = Math.floor(Math.random() * (i + 1))
    ;[arr[i], arr[shuffle]] = [arr[shuffle], arr[i]]
  }
  return arr
}

Adding new rounds.

function addTurn(){
    instructorMoves = instructorMoves.concat(instructorMoves)
    randSequence = shuffleArray(instructorMoves)
    return randSequence;
  }

• Making the music instructor move together with the number sequence.

• Matching with the randomised array and comparing which player finishes the pattern first.

• Making the image of instructor's moves appear together with the pattern on the screen.

1. Adding more rounds

2. Increase the difficulty by hiding the number patterns in some rounds to let the players just follow the dance pattern.

3. More keys to control on more dance moves other than '1,2,3,4'

TA - Alex & Shumin

Google

Stackoverflow

MDN