How to Create the Simon Game with JavaScript

The Simon game is a classic memory game where the player must repeat a growing sequence of colors and sounds. It‘s a great exercise for sharpening your memory and concentration skills, and it‘s also a fun project for learning web development. In this tutorial, we‘ll create the Simon game using HTML, CSS, and JavaScript.

Game Overview

Here are the basic rules of the Simon game:

  1. The game shows the first color in the sequence (e.g. blue). The player must click on the blue button.

  2. The game shows the next color (e.g. red), the player must remember the sequence is blue, red and click the buttons in that order.

  3. The game continues showing new colors and the player must remember and repeat the whole sequence.

  4. If the player messes up the sequence, the game is over. The player can click a button to start over.

Building the Interface

We‘ll start by creating the HTML for the game interface. We need four colored buttons for the player to click on, and a couple other buttons to start and reset the game.

<div class="simon">
  <div class="button green"></div>
  <div class="button red"></div>  
  <div class="button yellow"></div>
  <div class="button blue"></div>
  <div class="controls">
    <div class="display"></div>
    <button class="start">Start</button>
    <button class="reset">Reset</button>
  </div>
</div>

We‘ll style this with some CSS to layout the buttons in a circle and make them light up when clicked or played by the game:

.simon {
  position: relative;
  width: 400px;
  height: 400px;
}

.button {
  width: 200px;  
  height: 200px;
  position: absolute;
  opacity: 0.5;
}

.button.green {
  background: green;
  top: 0;
  left: 0; 
  border-top-left-radius: 100%;
}

.button.red {
  background: red;
  top: 0;
  right: 0;  
  border-top-right-radius: 100%;
}

.button.blue {
  background: blue;
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 100%;
}

.button.yellow {
  background: yellow; 
  bottom: 0;
  left: 0;
  border-bottom-left-radius: 100%;
}

.button.lit {
  opacity: 1;
}

.display {
  width: 50px;
  height: 30px;
  background: #ccc;
  margin: 10px auto;
  text-align: center;
  line-height: 30px;
}

JavaScript Code Walkthrough

Now for the fun part – making the game actually work with JavaScript. Let‘s start by defining some variables to store the game state:

// Track the sequence of colors  
let sequence = [];

// Track the player‘s position in the sequence
let position = 0;

// Get the colored buttons
const buttons = document.querySelectorAll(‘.button‘);

// Get the display and control buttons 
const display = document.querySelector(‘.display‘);
const startButton = document.querySelector(‘.start‘);
const resetButton = document.querySelector(‘.reset‘);

Next we‘ll create functions to control the game play – playing the sequence, lighting up buttons, and checking the player‘s answers:

// Play the sequence up to the current position
function playSequence() {
  let i = 0;
  let timer = setInterval(() => {
    lightButton(sequence[i]);
    i++;
    if (i >= sequence.length) {
      clearInterval(timer); 
    }
  }, 500);

  display.textContent = sequence.length;
}

// Light up a button and play its sound
function lightButton(color) {
  const button = document.querySelector(`.button.${color}`); 
  const sound = document.querySelector(`[data-sound="${color}"]`);

  button.classList.add(‘lit‘);
  sound.play();

  setTimeout(() => {
    button.classList.remove(‘lit‘);
  }, 300);
}

// Check the player‘s answer against the sequence
function checkAnswer(color) {
  if (color !== sequence[position]) {
    // Wrong answer, end the game
    endGame();
    return;
  }

  position++;

  if (position >= sequence.length) {
    // Sequence completed, advance to next level after a delay
    position = 0;
    setTimeout(() => {
      nextLevel();  
    }, 1000);
  }
}

// Add a new color to the sequence and play it back
function nextLevel() {
  const colors = [‘green‘, ‘red‘, ‘blue‘, ‘yellow‘];
  const color = colors[Math.floor(Math.random() * 4)];
  sequence.push(color);
  playSequence();
}  

// Game over, reset everything
function endGame() {
  sequence = [];
  position = 0;
  display.textContent = ‘END!‘;
  setTimeout(() => {
    display.textContent = ‘--‘;
  }, 1000);
}

Finally, we‘ll hook up the buttons to start the game and handle the player‘s input:

// Let the player click on colored buttons
buttons.forEach(button => {
  button.addEventListener(‘click‘, () => {
    const color = button.getAttribute(‘data-color‘);
    checkAnswer(color);
  });
});

// Start the game
startButton.addEventListener(‘click‘, () => {
  nextLevel(); 
});

// Reset the game 
resetButton.addEventListener(‘click‘, () => {
  endGame();
});

Putting It All Together

Here‘s the complete code for our Simon game:

<div class="simon">
  <div class="button green" data-color="green"></div>  
  <div class="button red" data-color="red"></div>
  <div class="button yellow" data-color="yellow"></div>
  <div class="button blue" data-color="blue"></div> 
  <div class="controls">
    <div class="display"></div>
    <button class="start">Start</button>
    <button class="reset">Reset</button>
  </div>
</div>

<audio data-sound="green" src="sounds/green.mp3"></audio>
<audio data-sound="red" src="sounds/red.mp3"></audio>
<audio data-sound="yellow" src="sounds/yellow.mp3"></audio>  
<audio data-sound="blue" src="sounds/blue.mp3"></audio>
.simon {
  position: relative;  
  width: 400px;
  height: 400px;
}

.button {
  width: 200px;
  height: 200px; 
  position: absolute;
  opacity: 0.5;
}

.button.green {
  background: green;
  top: 0;
  left: 0;
  border-top-left-radius: 100%;  
}

.button.red {
  background: red; 
  top: 0;
  right: 0;
  border-top-right-radius: 100%;
}

.button.blue {
  background: blue;
  bottom: 0; 
  right: 0;
  border-bottom-right-radius: 100%;
}

.button.yellow {
  background: yellow;
  bottom: 0;
  left: 0;  
  border-bottom-left-radius: 100%;
}

.button.lit {
  opacity: 1;  
}

.display {
  width: 50px;
  height: 30px;
  background: #ccc; 
  margin: 10px auto;
  text-align: center;
  line-height: 30px;
}
let sequence = [];
let position = 0;
const buttons = document.querySelectorAll(‘.button‘);
const display = document.querySelector(‘.display‘);
const startButton = document.querySelector(‘.start‘);
const resetButton = document.querySelector(‘.reset‘);

function playSequence() {
  let i = 0;
  let timer = setInterval(() => {
    lightButton(sequence[i]);
    i++;
    if (i >= sequence.length) {
      clearInterval(timer);
    }
  }, 500);

  display.textContent = sequence.length;
}

function lightButton(color) {
  const button = document.querySelector(`.button.${color}`);
  const sound = document.querySelector(`[data-sound="${color}"]`);

  button.classList.add(‘lit‘);
  sound.play();

  setTimeout(() => {
    button.classList.remove(‘lit‘);  
  }, 300);
}

function checkAnswer(color) {
  if (color !== sequence[position]) {
    endGame();
    return;
  }

  position++;

  if (position >= sequence.length) {
    position = 0;
    setTimeout(() => {
      nextLevel(); 
    }, 1000);
  }
}

function nextLevel() { 
  const colors = [‘green‘, ‘red‘, ‘blue‘, ‘yellow‘]; 
  const color = colors[Math.floor(Math.random() * 4)];
  sequence.push(color);
  playSequence();
}

function endGame() {
  sequence = [];
  position = 0; 
  display.textContent = ‘END!‘;
  setTimeout(() => {
    display.textContent = ‘--‘;
  }, 1000);
}

buttons.forEach(button => {
  button.addEventListener(‘click‘, () => {
    const color = button.getAttribute(‘data-color‘);
    checkAnswer(color);
  });  
});

startButton.addEventListener(‘click‘, () => {
  nextLevel();
});

resetButton.addEventListener(‘click‘, () => {
  endGame();
});

You can see a live demo of the completed game on CodePen.

Next Steps

Congratulations, you‘ve built a working Simon game with JavaScript! This is an impressive project for a beginner and there are many ways you can extend it:

  • Add more colors and sounds to increase the difficulty
  • Keep track of high scores using local storage
  • Improve the design and animations
  • Turn it into a real-time multiplayer game by integrating with a backend

Be sure to check out these other resources to continue your JavaScript learning journey:

Thanks for following along with this tutorial. I can‘t wait to see the games you build. Happy coding!

Similar Posts