Create Pop It Game using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a fun and simple Pop It game using HTML, CSS, and JavaScript with this easy-to-follow step-by-step guide for beginners.

Join us on Telegram
create-pop-it-game-using-html-css-and-javascript.webp
Read Alsocreate rock paper scissors game with html, css, and javascript.jpgCreate Rock Paper Scissors Game with HTML, CSS, and JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Pop It toys have become quite popular as a way to relieve stress. They are easy to play with, and the simple act of popping bubbles is very satisfying. In this blog, we will guide you on how to create a fun Pop It game using just HTML, CSS, and JavaScript. This project is great for beginners who are looking to build their skills in web development. By following this guide, you will learn how to structure a webpage using HTML, style it with CSS, and add interaction with JavaScript.

Building a Pop It game is a good exercise to practice basic coding. You will get hands-on experience with creating a grid layout, applying styles, and adding event listeners for user interaction. Even if you’re new to coding, this guide will walk you through the process step by step, making it easy to understand and complete.

Let’s dive into the fun and creative process of building your very own Pop It game!

Prerequisites

Before starting, make sure you have:

Source Code

Step 1 (HTML Code):

First, let’s create a simple HTML file to hold our game. Open your text editor and create a new file named index.html. Here's a breakdown of the code:

1. <!DOCTYPE html>:

  • Declares the document as an HTML5 document.

2. <html lang="en">:

  • The <html> tag is the root of the HTML document, and the lang="en" attribute specifies that the content is in English.

3. <head>:

  • Contains meta-information about the document like character encoding, viewport settings, and the title of the page.
    • <meta charset="UTF-8">: Defines the character encoding as UTF-8, which supports a wide range of characters.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive by setting the viewport width to the device's width, making it suitable for mobile screens.
    • <title>Pop It Game</title>: Sets the title of the web page that appears in the browser's tab as "Pop It Game".
    • <link rel="stylesheet" href="styles.css">: Links to an external CSS file (styles.css) that will provide styles for the game.

4. <body>:

  • Contains the visible content of the web page.
    • <div id="popit" class="popit">: This is a container (div) with the id="popit" and class="popit", which represents the game board. The id is unique, while the class can be used for styling.

    Inside the main div, there are multiple pieces divs, each containing several circle divs:

    • <div class="pieces r">: This represents one set of pieces (or bubbles) in the "Pop It" game. The class pieces groups these items as game pieces, while r stands for "red" (or another classification like 'row').
      • Inside each pieces div, there are multiple circle divs, each representing a circular piece in the game. For example:
        • <div class="circle r"></div>: This is a single circle with the class circle and additional class r. The r probably refers to the color red.
    • Similarly, the following pieces divs have classes like o, y, g, b, and p, which correspond to colors: orange, yellow, green, blue, and purple (or pink).

5. <script src="script.js"></script>:

  • Links to an external JavaScript file (script.js) that will add interactivity to the game, possibly handling how the pieces behave when clicked or interacted with.
Read AlsoCreate a Stunning Shake Input Effect with HTML, CSS, and JavaScript.jpgCreate a Stunning Shake Input Effect with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Now, let’s add some styling to make our game look nice. Create a new file called styles.css in the same folder as your HTML file. Let's go through each part of the CSS code:

1. body:

  • Styles the entire webpage body.
    • margin: 0;: Removes any default margin from the body to ensure the content takes up the full screen width.
    • align-items: center;: Vertically centers the content in the body when using flexbox.
    • display: flex;: Makes the body a flex container, enabling flexible layout control for its child elements.
    • justify-content: center;: Horizontally centers the content within the body.
    • background-color: #825CFF;: Sets the background color of the page to a purple shade.
    • height: 100vh;: Sets the body height to 100% of the viewport height, ensuring the content covers the full screen.

2. .popit:

  • Styles the container for the "Pop It" game board.
    • box-shadow: Adds two shadow effects for a 3D look:
      • 12px 12px 16px 0 rgba(0, 0, 0, 0.25): A shadow on the bottom-right with a black, slightly transparent color.
      • -8px -8px 12px 0 rgba(255, 255, 255, 0.3): A shadow on the top-left with a white, semi-transparent color for a subtle lighting effect.
    • width: 425px; height: 425px;: Sets the size of the game board to a square of 425px by 425px.
    • border-radius: 50%;: Makes the game board circular.
    • overflow: hidden;: Ensures content inside the container is clipped if it overflows.
    • display: flex;: Uses flexbox to lay out the child elements.
    • flex-direction: column;: Aligns child elements (the rows of pieces) in a vertical stack.
    • justify-content: center;: Centers the rows vertically within the game board.

3. .pieces:

  • Styles the rows of game pieces.
    • display: flex;: Makes the pieces (bubbles) inside the rows use flexbox.
    • justify-content: center;: Centers the bubbles within the row horizontally.
    • overflow: hidden;: Hides any content that might overflow outside the pieces container.

4. .circle:

  • Styles each individual bubble (circle) in the game.
    • cursor: pointer;: Changes the cursor to a pointer when hovering over the circles, indicating they are clickable.
    • width: 14vw; height: 14vw;: Sets the size of each circle to 14% of the viewport width, keeping them responsive.
    • max-width: 65px; max-height: 65px;: Limits the maximum size of each circle to 65px, preventing them from becoming too large.
    • margin: 3px;: Adds a small space around each circle.
    • border-radius: 50%;: Makes each circle perfectly round.
    • transition: 0.5s;: Adds a half-second transition for any change in the circle's styles (e.g., color or shadow).
    • box-shadow: inset 8px 8px 8px rgba(255, 255, 255, 0.3), inset -8px -8px 8px rgba(0, 0, 0, 0.25);: Creates an inset shadow that gives the circle a 3D "pressed-in" appearance. The shadow on the top-left is white and on the bottom-right is black.
    • -webkit-tap-highlight-color: rgba(255, 255, 255, 0);: Removes the tap highlight color on touch devices for a smooth interaction.

5. .pressed:

  • Defines a class that is applied when a circle is pressed.
    • box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.25), inset -8px -8px 8px rgba(255, 255, 255, 0.3);: Reverses the shadow effect when the circle is pressed to make it appear like it is pushed in.

6. .r, .o, .y, .g, .b, .p:

  • These classes define the background colors for different colored bubbles:
    • .r: Sets the background color to red (#f23c39).
    • .o: Sets the background color to orange (#fb8f17).
    • .y: Sets the background color to yellow (#fcf620).
    • .g: Sets the background color to green (#69d437).
    • .b: Sets the background color to blue (#3cc1f6).
    • .p: Sets the background color to purple (#bca3f6).
body {
  margin: 0;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #825CFF;
  height: 100vh;
}
.popit {
  box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
  width: 425px;
  height: 425px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pieces {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.circle {
  cursor: pointer;
  width: 14vw;
  height: 14vw;
  max-width:65px;
  max-height: 65px;
  margin: 3px;
  border-radius: 50%;
  transition: 0.5s;
  box-shadow: inset 8px 8px 8px rgba(255, 255, 255, 0.3),
    inset -8px -8px 8px rgba(0, 0, 0, 0.25);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.pressed {
  box-shadow: inset 8px 8px 8px rgba(0, 0, 0, 0.25),
    inset -8px -8px 8px rgba(255, 255, 255, 0.3);
}
.r {
  background-color: #f23c39;
}
.o {
  background-color: #fb8f17;
}
.y {
  background-color: #fcf620;
}
.g {
  background-color: #69d437;
}
.b {
  background-color: #3cc1f6;
}
.p {
  background-color: #bca3f6;
}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. This JavaScript code adds interactivity by playing a sound, vibrating the device (if supported), and toggling a visual effect when a user clicks on a bubble. Here's a breakdown of the code:

1. const sound = new Audio("https://freesound.org..q.mp3");

  • Purpose: Creates a new Audio object and loads a sound file from the provided URL. This sound will be played when a bubble is clicked.
  • const sound: This variable stores the audio object, which can later be controlled (played, paused, etc.).
  • The sound file is hosted on an external website.

2. popit.onclick = function (event) {...}

  • Purpose: This sets up an event listener for the click event on the popit game board. When the user clicks anywhere within the game, this function is triggered.
  • popit: This refers to the HTML element with the id="popit" (the main game container).
  • event: The event object contains information about the user's interaction, including which specific element was clicked.

3. const target = event.target;

  • Purpose: target is the specific element that was clicked. The event.target property contains a reference to this element.

4. if (!target.matches(".circle")) { return; }

  • Purpose: This condition checks if the clicked element (target) has the class circle (meaning it's one of the bubbles).
  • !target.matches(".circle"): If the clicked element is not a bubble, the function exits (return). This prevents any interaction if a non-bubble part of the page is clicked.

5. sound.pause(); sound.currentTime = 0; sound.play();

  • Purpose: This controls the sound playback.
    • sound.pause(): Stops any current sound that might be playing.
    • sound.currentTime = 0;: Resets the audio's playback position to the beginning.
    • sound.play(): Starts playing the sound from the beginning.

6. if ("vibrate" in navigator) { navigator.vibrate(100); }

  • Purpose: This checks if the device supports vibration (common on mobile devices).
    • navigator.vibrate(100): If vibration is supported, the device vibrates for 100 milliseconds when a bubble is clicked.

7. target.classList.toggle("pressed");

  • Purpose: This toggles the "pressed" class on the clicked bubble (target).
    • classList.toggle(): Adds the "pressed" class if it’s not present, or removes it if it is. This triggers a visual change (like the inset shadow) as defined in the CSS for the .pressed class.
    • The effect gives the appearance that the bubble has been pressed and "popped."
const sound = new Audio(
  "https://freesound.org/data/previews/399/399934_1676145-lq.mp3"
);

popit.onclick = function (event) {
  const target = event.target;
  if (!target.matches(".circle")) {
    return;
  }

  sound.pause();
  sound.currentTime = 0;
  sound.play();
  if ("vibrate" in navigator) {
    navigator.vibrate(100);
  }
  target.classList.toggle("pressed");
};

Final Output:

create-pop-it-game-using-html-css-and-javascript.gif
Read Alsohow to create a profile card for your website with html css and javascript.jpgHow to Create a Profile Card for Your Website with HTML, CSS And JavaScript

Conclusion:

You’ve now created a simple yet fun Pop It game using HTML, CSS, and JavaScript! This project helped you learn how to structure a webpage with HTML, style elements with CSS, and make the game interactive using JavaScript. As you continue learning, you can improve this game by adding new features such as sounds, animations, or a scoring system.

This project not only gives you a sense of accomplishment but also strengthens your web development skills. Whether you’re a beginner or someone looking to brush up on basic coding, creating small games like this is a great way to improve. Keep experimenting, building, and refining your skills as you explore new possibilities with coding.

Now that you’ve completed the Pop It game, think about the next project you’d like to work on—there’s always something new to learn in web development!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a pop it game using html;css;and javascript, step-by-step guide to build pop it game with javascript, build pop it game for beginners using html and css, pop it game tutorial using html;css; and javascript, pop it game, html pop it game, javascript games, css game design, web development game
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post

Please allow ads on our site🥺