JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
 
<head>
	<title>Simon Says Game</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
 
<body>
	<div id="game-container">
		<h1 id="score-display">Score: 0</h1>
		<div id="button-container">
			<button class="game-button" id="red-button"></button>
			<button class="game-button" id="green-button"></button>
			<button class="game-button" id="blue-button"></button>
			<button class="game-button" id="yellow-button"></button>
		</div>
		<button id="play-button">Play</button>
	</div>
	<script src="script.js"></script>
</body>
 
</html>

CSS

body {
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}
 
#game-container {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}
 
#level-display, #score-display {
    margin-top: 0;
}
 
#button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
 
.game-button {
    width: 120px;
    height: 120px;
    font-size: 18px;
    border: none;
    border-radius: 50%;
    margin: 10px;
    cursor: pointer;
    outline: none;
}
 
#red-button {
    background-color: #ff4d4d;
}
 
#green-button {
    background-color: #8cff4d;
}
 
#blue-button {
    background-color: #4d94ff;
}
 
#yellow-button {
    background-color: #ffff4d;
}

JavaScript

// script.js
 
// Define an array to store the game pattern
let gamePattern = [];
// Define a variable for the score
let score = 0;
// Define a variable to keep track of whether the game is currently playing
let gamePlaying = false;
 
// Function to start the game
function startGame() {
  gamePlaying = true;
  gamePattern = [];
  score = 0;
  showScore();
  playPattern();
}
 
// Function to show the current score
function showScore() {
  document.getElementById("score-display").innerText = "Score: " + score;
}
 
// Function to play the game pattern
function playPattern() {
  // Generate a random color and add it to the game pattern
  let colors = ["red", "green", "blue", "yellow"];
  let randomColor = colors[Math.floor(Math.random() * colors.length)];
  gamePattern.push(randomColor);
 
  // Show the game pattern by animating the buttons
  for (let i = 0; i < gamePattern.length; i++) {
    setTimeout(function () {
      animateButton(gamePattern[i], true); // Update to show buttons as pressed
    }, (i + 1) * 1000);
  }
}
 
// Function to animate a button by adding and removing a class
function animateButton(color, isComputer) {
  let button = document.getElementById(color + "-button");
  if (button) {
    button.classList.add("pressed");
    playSound(color);
    setTimeout(function () {
      button.classList.remove("pressed");
    }, 500);
    if (isComputer) {
      // Delay to show button pressed by computer
      setTimeout(function () {
        button.classList.remove("pressed");
      }, 1000);
    }
  }
}
 
// Function to play sound for a button
function playSound(color) {
  let sound = new Audio(color + ".mp3");
  sound.play();
}
 
// Function to check if the clicked button matches the game pattern
function checkButton(color) {
  if (color === gamePattern[score]) {
    animateButton(color, false); // Update to show buttons as pressed
    score++;
    showScore();
    if (score === gamePattern.length) {
      // Player has completed the pattern, proceed...