Emoji Catcher Game Using HTML CSS and JavaScript

Introduction

Hello Coders, Welcome to another new blog. In this article we’ve made a emoji catcher game. This emoji catcher game is basically a JavaScript project. In this game we’ve to catch the emoji and as soon as we catch the emoji the score card updates according our game performance.

This emoji catcher game is a game which you’ve played rarely in your life. This is a unique and dynamic game project. By the end of this article you’ll get to know that how to create this type of unique games using HTML CSS and JavaScript. The functionality of the game is made using JavaScript. By creating this project you’ll get to know about some JavaScript concepts and it will refresh all your previous JS knowledge.

This project is made using HTML CSS and JS. HTML sets up the basic structure of our emoji catcher game. Then our CSS code styles our emoji catcher game and provide styling to it. Lastly the JavaScript code add functionality to our code. Together all these 3 technologies build our emoji catcher game.

HTML (index.html)

Join our Telegram for Free Coding Ebooks & Handwritten Notes!

This HTML code is a simple setup for a game called “Emoji Catcher” with a scoreboard and a timer. Our code starts with the boiler plate of our HTML code. In the head tag of our Code we’ve added the Title and links tag to add links in our code.

In our body tag we’ve two main sections. One is scores-container and other is grid-container. The scores-container contains two div tags. One is for the score of the player and other is for the time of the game. The score and time will be dynamically updated during the game using JavaScript. Our score and time cards will be displayed on the top center of our webpage.

Next, We’ve the grid-container. This grid-container contains a grid layout of 10 grid squares. Each square grid contains in div with class square and unique id from 1 to 10. These squares will likely be used to catch the emojis. These grid will later controlled by JavaScript to animate or change.

At the end the script tag links to an external JavaScript file (app.js). This is the file where the functionality of the game (such as handling score updates and time countdown) is defined.

				
					
  
    
    
    
    <title>CodeWithCurious.com - Emoji Catcher Game</title>

    
    
  
  
    <div class="scores-container">
      <div class="total-score">
        <h2>Your Score:</h2>
        <h2 id="score">0</h2>
      </div>

      <div class="time">
        <h2>Time left:</h2>
        <h2 id="time-left">60</h2>
      </div>
    </div>

    <div class="grid-container">
      <div class="grid">
        <div class="square" id="1"></div>
        <div class="square" id="2"></div>
        <div class="square" id="3"></div>
        <div class="square" id="4"></div>
        <div class="square" id="5"></div>
        <div class="square" id="6"></div>
        <div class="square" id="7"></div>
        <div class="square" id="8"></div>
        <div class="square" id="9"></div>
        <div class="square" id="10"></div>
      </div>
    </div>

CSS (Style.css)

This is our CSS code. Using this code we’ve styled our emoji catcher game. This code provides interactivity to our emoji catcher game.
Our code starts with global body styles which sets the dark background color, white text. It uses modern sans-serif font for a clean, minimalistic look.
The .scores-container aligns the times and score element centers them horizontally and vertically using flexbox properties.
The score and time sections have:
Light gray backgrounds (#ccc), black text, and centered content.
Padding for internal spacing and margins to separate them visually.
The grid container also uses flexbox to center the grid within the page.
The grid layout has 90% of the width and height, with a dark background, flex wrap for a responsive design, and spacing with padding and margin.
The .square in the grid is 200px by 200px, with a 10px margin between squares, and it has a light gray background which gives an authentic look to our webpage.
The emoji class applies a background image of an emoji, which is centered and covers the entire square for a visually appealing interactive element.
This is how our CSS code works. Using this code you can style and provide interactivity to the emoji catcher game.

				
					body {
  background: rgb(10, 10, 10);
  color: #fff;
  font-family: sans-serif;
}

.scores-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.total-score {
  margin-right: 20px;
  margin: 20px;
  text-align: center;
  background: #ccc;
  padding: 20px;
  color: #000;
}

.time {
  margin-right: 20px;
  margin: 20px;
  text-align: center;
  background: #ccc;
  padding: 20px;
  color: #000;
}

.grid-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  width: 90%;
  height: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: rgb(36, 36, 36);
  margin-top: 2rem;
  padding: 20px;
}

.square {
  height: 200px;
  width: 200px;
  margin: 10px;
  background: rgb(61, 61, 61);
}

/* JavaScript */
.emoji {
  background-image: url("https://i.guim.co.uk/img/media/a1b7129c950433c9919f5670c92ef83aa1c682d9/55_344_1971_1183/master/1971.jpg?width=1200&amp;height=900&amp;quality=85&amp;auto=format&amp;fit=crop&amp;s=88ba2531f114b9b58b9cb2d8e723abe1");
  background-position: center;
  background-size: cover;
}

Javascript (Script.js)

This code is our JavaScript code. This code adds functionality to our webpage.

Our code first of all access all the elements from Our HTML code using DOM and stores them in variables. We’ve used const keyword to store these elements. Then we’ve created 4 new variables which are result, hitPosition, currentTime and timerId. The result variable tracks the players score which is initialized at 0. hitPosition Stores the id of the square where the emoji appears, currentTime Sets the countdown time, starting at 60 seconds and timerId Will hold the interval timer for moving the emoji.

The randomSquare() function clears the emoji from all squares. Basically it resets the grid. This function randomly selects one square to place emoji and it stores the id of its in hitPosition variable. After this we check the click events. When a square is clicked, it checks if it matches hitPosition or not. If this condition matches then score will be increased and it’ll update the score.

The moveEmoji() function moves the emoji in the square grid in every 500 milliseconds. This thing makes our game more interesting and dynamic. When we call the moveEmoji() function, then it starts our emoji catcher game. At the end We’ve created a countDown() function. This function decrease the countdown by 1 second which starts as 60 seconds. It updates and display the time after decreasing each second. Once the time reach 0 second, it stops the game and displays the final score of the emoji catcher game. We’ve used setInterval() for the game timer countdown every second.

This was all about our JavaScript code. This JavaScript code adds functionality to our code.

				
					const squares = document.querySelectorAll(".square");
const timeLeft = document.querySelector("#time-left");
const score = document.querySelector("#score");

let result = 0;
let hitPosition;
let currentTime = 60;
let timerId = null;

function randomSquare() {
  squares.forEach((square) =&gt; {
    square.classList.remove("emoji");
  });

  let randomSqaure = squares[Math.floor(Math.random() * 9) + 1];
  randomSqaure.classList.add("emoji");
  hitPosition = randomSqaure.id;
}

squares.forEach((square) =&gt; {
  square.addEventListener("mousedown", () =&gt; {
    if (square.id == hitPosition) {
      result++;
      score.textContent = result;
      hitPosition = null;
    }
  });
});

function moveEmoji() {
  timerId = setInterval(randomSquare, 500);
}

moveEmoji();

function countDown() {
  currentTime--;
  timeLeft.textContent = currentTime;

  if (currentTime == 0) {
    clearInterval(countDownTimerId);
    clearInterval(timerId);
    alert(`Game Over! Your final Score Is ${result}`);
  }
}

let countDownTimerId = setInterval(countDown, 1000);

Your download is starting now...

Output:

Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.