Building a Simple HTML-Based Interactive Simple Simon Game: A Beginner’s Tutorial

Written by

learnmodernwebdevelopment

in

Ever wanted to create a fun, interactive game with just HTML, CSS, and a touch of JavaScript? Look no further! In this tutorial, we’ll build a classic game: Simple Simon. This project is perfect for beginners and intermediate developers looking to hone their skills in web development. We’ll break down the process step-by-step, explaining each concept in simple terms, providing clear code examples, and highlighting common pitfalls to avoid. By the end of this tutorial, you’ll have a working Simple Simon game and a solid understanding of how HTML, CSS, and JavaScript work together to create interactive web experiences.

Why Build a Simple Simon Game?

Simple Simon is an excellent project for several reasons:

  • It’s Beginner-Friendly: The core logic is straightforward, making it easy to understand and implement.
  • It’s a Great Learning Tool: You’ll practice fundamental concepts like DOM manipulation, event handling, and conditional logic.
  • It’s Engaging: Building a game is inherently more fun than creating a static website.
  • It’s Practical: The skills you learn can be applied to a wide range of web development projects.

Let’s dive in and start building our Simple Simon game!

Project Setup: The HTML Structure

First, we need to create the basic HTML structure for our game. This will include the game board (buttons), score display, and any messages for the user. Create a file named `index.html` and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple Simon Game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Simple Simon</h1>
    <div class="score-container">
      <p>Score: <span id="score">0</span></p>
    </div>
    <div class="game-board">
      <button class="button" data-color="red"></button>
      <button class="button" data-color="green"></button>
      <button class="button" data-color="blue"></button>
      <button class="button" data-color="yellow"></button>
    </div>
    <button id="start-button">Start Game</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

Let’s break down the HTML:

  • <!DOCTYPE html>: Declares the document as HTML5.
  • <html>: The root element of the HTML page.
  • <head>: Contains meta-information about the HTML document, such as the title and links to CSS files.
  • <meta charset=”UTF-8″>: Specifies the character encoding for the document.
  • <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>: Configures the viewport for responsive design.
  • <title>: Sets the title of the HTML page, which is shown in the browser’s title bar or tab.
  • <link rel=”stylesheet” href=”style.css”>: Links to an external CSS file for styling.
  • <body>: Contains the visible page content.
  • <div class=”container”>: A container to hold all the game elements.
  • <h1>: The main heading of the game.
  • <div class=”score-container”>: A container for the score display.
  • <p>: A paragraph element to display the score.
  • <span id=”score”>: A span element to display the actual score, which will be updated by JavaScript.
  • <div class=”game-board”>: A container for the game buttons.
  • <button class=”button” data-color=”red”>: Buttons representing the colors in the game. The `data-color` attribute stores the color value.
  • <button id=”start-button”>: The button to start the game.
  • <script src=”script.js”>: Links to an external JavaScript file for the game logic.

Styling with CSS

Next, let’s add some CSS to style our game. Create a file named `style.css` and add the following code:

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f0f0f0;
}

.container {
  text-align: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.score-container {
  margin-bottom: 20px;
}

.game-board {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-template-rows: repeat(2, 100px);
  gap: 10px;
  margin-bottom: 20px;
}

.button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  opacity: 0.7;
}

.button:hover {
  opacity: 1;
}

.button[data-color="red"] {
  background-color: red;
}

.button[data-color="green"] {
  background-color: green;
}

.button[data-color="blue"] {
  background-color: blue;
}

.button[data-color="yellow"] {
  background-color: yellow;
}

#start-button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

#start-button:hover {
  background-color: #3e8e41;
}

This CSS provides basic styling for the game, including:

  • Body Styles: Sets the font, centers the content, and provides a background color.
  • Container Styles: Styles the main container with a white background, padding, and a subtle shadow.
  • Score Container Styles: Adds margin to the score container.
  • Game Board Styles: Uses a grid layout to arrange the game buttons.
  • Button Styles: Styles the game buttons with a circular shape, hover effects, and transitions.
  • Color-Specific Button Styles: Sets the background color for each button based on its `data-color` attribute.
  • Start Button Styles: Styles the start button with a green background and hover effect.

Adding JavaScript Logic

Now, let’s add the JavaScript logic to make the game interactive. Create a file named `script.js` and add the following code:

const scoreDisplay = document.getElementById('score');
const startButton = document.getElementById('start-button');
const buttons = document.querySelectorAll('.button');

let gameSequence = [];
let playerSequence = [];
let score = 0;
let gameActive = false;

// Function to generate a random sequence
function generateSequence() {
  const colors = ['red', 'green', 'blue', 'yellow'];
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  gameSequence.push(randomColor);
}

// Function to flash a button
function flashButton(color) {
  const button = document.querySelector(`.button[data-color="${color}"]`);
  button.style.opacity = 1;
  setTimeout(() => {
    button.style.opacity = 0.7;
  }, 500);
}

// Function to play the game sequence
function playSequence() {
  playerSequence = []; // Reset player sequence
  let i = 0;
  const interval = setInterval(() => {
    flashButton(gameSequence[i]);
    i++;
    if (i >= gameSequence.length) {
      clearInterval(interval);
      // Enable player input after the sequence is played
      gameActive = true;
    }
  }, 750);
}

// Function to handle button clicks
function handleButtonClick(color) {
  if (!gameActive) return; // Ignore clicks if the game isn't active

  playerSequence.push(color);
  checkSequence();
}

// Function to check the player's sequence
function checkSequence() {
  const sequenceLength = playerSequence.length;

  for (let i = 0; i < sequenceLength; i++) {
    if (playerSequence[i] !== gameSequence[i]) {
      gameOver();
      return;
    }
  }

  if (sequenceLength === gameSequence.length) {
    score++;
    scoreDisplay.textContent = score;
    gameActive = false; // Disable player input during the next sequence
    setTimeout(() => {
      generateSequence();
      playSequence();
    }, 1000);
  }
}

// Function to handle game over
function gameOver() {
  alert(`Game Over! Your score: ${score}`);
  resetGame();
}

// Function to reset the game
function resetGame() {
  gameSequence = [];
  playerSequence = [];
  score = 0;
  scoreDisplay.textContent = 0;
  gameActive = false;
}

// Event listeners for button clicks
buttons.forEach(button => {
  button.addEventListener('click', () => {
    const color = button.dataset.color;
    handleButtonClick(color);
  });
});

// Event listener for the start button
startButton.addEventListener('click', startGame);

// Function to start the game
function startGame() {
  resetGame();
  generateSequence();
  playSequence();
}

Let’s break down the JavaScript code:

  • Variable Declarations:
    • `scoreDisplay`: Gets the HTML element with the id ‘score’ to display the score.
    • `startButton`: Gets the HTML element with the id ‘start-button’.
    • `buttons`: Gets all the elements with the class ‘button’ (the game buttons).
    • `gameSequence`: An array to store the sequence of colors the game generates.
    • `playerSequence`: An array to store the sequence of colors the player clicks.
    • `score`: The player’s current score.
    • `gameActive`: A boolean to track whether the player can interact with the buttons.
  • `generateSequence()`:
    • Generates a random color from the `colors` array.
    • Adds the random color to the `gameSequence` array.
  • `flashButton(color)`:
    • Selects the button with the given color.
    • Sets the button’s opacity to 1 (making it visible).
    • Uses `setTimeout` to set the opacity back to 0.7 after 500 milliseconds, creating a flashing effect.
  • `playSequence()`:
    • Resets the `playerSequence` array.
    • Iterates through the `gameSequence` array using `setInterval`.
    • For each color in the sequence, it calls `flashButton()` to flash the corresponding button.
    • Sets `gameActive` to true after the sequence has finished playing, enabling player input.
  • `handleButtonClick(color)`:
    • Checks if the game is active. If not, it returns, ignoring the click.
    • Adds the clicked color to the `playerSequence` array.
    • Calls `checkSequence()` to see if the player’s input is correct.
  • `checkSequence()`:
    • Compares the player’s sequence with the game sequence.
    • If there’s a mismatch, calls `gameOver()`.
    • If the sequences match, increments the score, disables player input, and calls `generateSequence()` and `playSequence()` after a delay to start the next round.
  • `gameOver()`:
    • Displays a game over alert with the player’s score.
    • Calls `resetGame()` to reset the game.
  • `resetGame()`:
    • Resets the `gameSequence`, `playerSequence`, and `score` variables.
    • Updates the score display to 0.
    • Sets `gameActive` to false.
  • Event Listeners:
    • Adds a click event listener to each button. When a button is clicked, it calls `handleButtonClick()` with the button’s color.
    • Adds a click event listener to the start button. When clicked, it calls `startGame()`.
  • `startGame()`:
    • Resets the game.
    • Generates the initial sequence.
    • Plays the initial sequence.

Step-by-Step Instructions

Here’s a step-by-step guide to building the Simple Simon game:

  1. Set up the HTML Structure:
    • Create an `index.html` file.
    • Add the basic HTML structure, including the title, score display, game board with buttons, and start button.
    • Link the CSS file (`style.css`) and JavaScript file (`script.js`).
  2. Style the Game with CSS:
    • Create a `style.css` file.
    • Add CSS rules to style the body, container, score display, game board, buttons, and start button.
    • Use a grid layout for the game buttons.
    • Add hover effects and transitions for visual feedback.
  3. Implement the JavaScript Logic:
    • Create a `script.js` file.
    • Declare variables to access HTML elements (score display, start button, buttons).
    • Initialize game-related variables (game sequence, player sequence, score, game active state).
    • Create the `generateSequence()` function to add a random color to the game sequence.
    • Create the `flashButton(color)` function to visually indicate the sequence.
    • Create the `playSequence()` function to play the game sequence.
    • Create the `handleButtonClick(color)` function to handle button clicks and add them to the player’s sequence.
    • Create the `checkSequence()` function to compare the player’s sequence to the game’s sequence, handle correct guesses, and call `gameOver()` if the player makes a mistake.
    • Create the `gameOver()` function to alert the player of the game over and reset the game.
    • Create the `resetGame()` function to reset the game state.
    • Add event listeners to the buttons to handle clicks and call `handleButtonClick()`.
    • Add an event listener to the start button to start the game when clicked.
    • Create the `startGame()` function to initialize and start the game.
  4. Test and Debug:
    • Open `index.html` in your browser.
    • Test the game by clicking the start button.
    • Verify that the game displays the sequence, and the player can replicate it.
    • Check for any errors in the console.
    • Fix any bugs or issues.

Common Mistakes and How to Fix Them

Here are some common mistakes beginners make and how to fix them:

  • Incorrect Element Selection:
    • Mistake: Using the wrong selectors (e.g., trying to select an element by class when you should use an ID).
    • Fix: Double-check your HTML to ensure you’re using the correct IDs and classes. Use the browser’s developer tools to inspect the elements and verify your selectors.
  • Event Listener Issues:
    • Mistake: Not attaching event listeners correctly or attaching them to the wrong elements.
    • Fix: Ensure you’re using the correct event listener syntax (e.g., `addEventListener(‘click’, functionName)`). Verify that you’re attaching the listeners to the correct buttons or elements.
  • Asynchronous Operations and Timing:
    • Mistake: Not understanding how `setTimeout` and `setInterval` work, leading to timing issues in the game.
    • Fix: Carefully plan your timing. Ensure the game waits for the sequence to finish playing before enabling player input. Use `setTimeout` and `setInterval` correctly.
  • Incorrect Sequence Comparison:
    • Mistake: Errors in comparing the player’s sequence to the game’s sequence.
    • Fix: Thoroughly review your `checkSequence()` function. Use a loop to compare each element in the player’s sequence to the corresponding element in the game’s sequence.
  • Game State Management:
    • Mistake: Not properly managing the game’s state (e.g., not disabling button clicks during the game sequence).
    • Fix: Use a `gameActive` variable to track whether the game is in progress. Disable button clicks when the game is playing the sequence and enable them when it’s the player’s turn.

Key Takeaways

  • HTML Structure: Understand how to structure your HTML with appropriate elements for a game.
  • CSS Styling: Learn to style elements, use grid layouts, and create visual feedback.
  • JavaScript Logic: Master the basics of event handling, DOM manipulation, and asynchronous operations.
  • Game State Management: Learn to manage the game’s state effectively.
  • Debugging: Practice using the browser’s developer tools to identify and fix errors.

FAQ

Here are some frequently asked questions about building a Simple Simon game:

  1. How can I make the game more challenging?
    • You can increase the speed at which the sequence is played as the score increases.
    • Add more colors to the game.
    • Implement a timer.
  2. How can I add sound effects?
    • Use the HTML <audio> tag to embed audio files.
    • Play sounds when buttons are flashed and when the player makes a correct or incorrect guess.
  3. How can I make the game responsive?
    • Use relative units like percentages (%) for sizing elements.
    • Use media queries in your CSS to adjust the layout based on the screen size.
  4. How can I add a high score feature?
    • Use local storage to save the high score in the user’s browser.
    • Display the high score on the game screen.

By following this tutorial, you’ve successfully built a Simple Simon game. You’ve learned how to structure the HTML, style it with CSS, and implement the game logic with JavaScript. This project is a fantastic starting point for exploring more complex game development concepts. Remember to experiment, practice, and continue to build upon your newfound skills. You’ll find that building games is a rewarding experience, and the principles you’ve learned here will serve you well in many other web development projects. Consider adding features like sound effects, a high score, or a timer to further enhance your Simple Simon game. The possibilities are endless, and the more you practice, the more confident and capable you will become as a web developer. Keep coding, keep learning, and most importantly, keep having fun.

More posts