Memory Game - Inspired by Nickelodeon's Brain Surge

Overview

This is a memory game based on the popular Nickelodeon Brain Surge memory square game. The objective of the game is to remember and match the correct path generated by the CPU. The game continues with increasing difficulty levels until the user makes a mistake. High scores are stored in the local storage and will update if the user beats the current high score.

How to Play

1. Starting the Game:

   • Click the "Start" button to begin the game.
   • The game will display a grid of squares.

2. CPU Path:

   • The CPU will flash a sequence of squares in a specific path.
   • Pay close attention to the sequence as you will need to replicate it.

3. User Input:

   • Click on the squares in the same sequence as the CPU showed.
   • Each click will be highlighted with a flash and a sound.

4. Submitting Your Sequence:

   • Once you have selected the squares in the correct sequence, click the "Submit" button.
   • The game will compare your sequence with the CPU's sequence.

5. Level Completion:

   • If your sequence matches the CPU's sequence, the board will light up green, indicating that you have passed the level.
   • Click the "Next" button to proceed to the next level with an increased grid size and difficulty.

6. Game Over:

   • If your sequence does not match the CPU's sequence, the board will flash red, indicating that you have lost.
   • The "Reset" button will appear, allowing you to start a new game.

7. High Scores:

   • High scores are tracked and displayed on the screen.
   • The high score is stored in the local storage and will update if you achieve a higher score than the current high score.

Game Elements

Variables

• Arrays:

  • cpuArray: Stores the sequence of squares generated by the CPU.
  • userArray: Stores the sequence of squares clicked by the user.
  • squaresArray: An array to hold all square elements.

• Conditions:

  • testIndexLength: Used to control the length of the comparison between user and CPU arrays.
  • disableStart: A flag to disable the start button when necessary.

• Timer:

  • countdownInSeconds: Timer countdown for each level.
  • intervalID: ID for the interval timer.

• Grid Info:

  • gridSize: Size of the grid (starts at 3x3).
  • currentNum: Current number in the grid sequence.
  • finalGrid, lastRowStart, lastRowStop: Variables to manage grid configuration.

• Audio:

  • Paths to audio files for different game events (grid press, grid flash, level pass, and game over).

• Game Level:

  • level: Current level of the game.

Query Selectors

• Grid and Squares:

  • grid: The container for the grid of squares.
  • squares: All square elements within the grid.

• Display Elements:

  • h1: Main header for displaying game messages.
  • timerDisplay: Element to display the countdown timer.
  • highscoreDisplay: Element to display the high score.

• Buttons:

  • startBtn, nextBtn, submitBtn, resetBtn: Buttons to control the game flow.

Local Storage Functions

• getHighScore(): Retrieves the high score from local storage.
• setHighScore(newScore): Updates the high score in local storage if the new score is higher.
• displayHighScore(): Displays the high score on the screen.

Functions

• Grid Building:

  • buildTheGrid(): Initializes and builds the grid based on the current level.

• Game Reset:

  • playAgain(): Resets the game variables and UI to start a new game.

• Next Level Preparation:

  • prepareNextLevel(): Sets up the next level with increased difficulty.

• Square Flashing:

  • flashSquare(), removeFlash(), flashSequence(), flashSquares(): Functions to handle the flashing sequence of squares.

• Random Number Generation:

  • randomRow(), randomNumFollowingGridPathRules(), chooseRow(), chooseTheSameRow(), chooseTheNextRow(): Functions to generate random numbers for the square sequence based on grid rules.

• Square Addition:

  • addAllSquares(): Recursively adds squares to the grid until the last row has one.

• Timer Management:

  • startTimer(), pauseTimer(), renderTimeLeft(): Functions to manage the countdown timer.

• Delay Handling:

  • delay(ms): Creates a promise to handle delays for asynchronous functions.

Event Listeners

• Event listeners for grid clicks, submit, reset, start, and next buttons to handle user interactions and game flow.

Conclusion

Enjoy testing your memory skills with this fun and challenging game. Try to beat the high score and advance through as many levels as possible!