How to Make a Cookie Clicker Using HTML and JavaScript?

How to Make a Cookie Clicker Using HTML and JavaScript?

Last Updated : 18 Oct, 2024

Creating a "Cookie Clicker" game is a great beginner project for learning how to manipulate elements in HTML with JavaScript. The idea is simple: a user clicks on a cookie image, and each click increases the score. We can add more features like auto-clickers, upgrades, or score multipliers, but we'll start with a basic version to understand the core concepts.

Approach

Create elements for displaying the score and a clickable cookie image.
Make the game visually appealing by styling the cookie, score display, and background.
Use JavaScript to increase the score every time the user clicks on the cookie.
Add a function to reset the score back to zero when the reset button is clicked.
Enhance the game with simple animations, such as scaling the cookie when clicked.

Example: This example shows the design of a cookie clicker game using HTML CSS and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Cookie Clicker Game</title>
    <style>
        /* Game styling */
        body {
            text-align: center;
            font-family: 'Arial', sans-serif;
            background-color: #f0e6d6;
            margin-top: 50px;
        }

        h2 {
            font-size: 32px;
            color: #5e3d0c;
        }

        #cookie {
            width: 200px;
            height: 200px;
            background-color: #d2691e;
            border-radius: 50%;
            display: inline-block;
            cursor: pointer;
            transition: transform 0.1s, box-shadow 0.1s;
            position: relative;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        }

        #cookie:active {
            transform: scale(0.9);
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
        }

        .chocolate-chip {
            width: 18px;
            height: 18px;
            background-color: #4b2e1f;
            border-radius: 50%;
            position: absolute;
        }

        /* Chip positions */
        .chip1 {
            top: 30px;
            left: 60px;
        }

        .chip2 {
            top: 70px;
            right: 50px;
        }

        .chip3 {
            bottom: 40px;
            left: 80px;
        }

        .chip4 {
            top: 100px;
            left: 110px;
        }

        .chip5 {
            bottom: 30px;
            right: 60px;
        }

        .chip6 {
            top: 40px;
            right: 80px;
        }

        .chip7 {
            bottom: 80px;
            left: 40px;
        }

        #score {
            font-size: 28px;
            font-weight: bold;
            margin: 20px 0;
            color: #5e3d0c;
        }

        button {
            padding: 12px 24px;
            font-size: 18px;
            cursor: pointer;
            background-color: #8b4513;
            color: white;
            border: none;
            border-radius: 8px;
            margin-top: 20px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #a0522d;
        }
    </style>
</head>

<body>
    <h2>Cookie Clicker Game</h2>
    <p>Score: <span id="score">0</span></p>
    <div id="cookie">
        <div class="chocolate-chip chip1"></div>
        <div class="chocolate-chip chip2"></div>
        <div class="chocolate-chip chip3"></div>
        <div class="chocolate-chip chip4"></div>
        <div class="chocolate-chip chip5"></div>
        <div class="chocolate-chip chip6"></div>
        <div class="chocolate-chip chip7"></div>
    </div>
    <br><br>
    <button id="reset-button">Reset Score</button>

    <script>
        let score = 0;

        // Increment score on cookie click
        const cookie = document.getElementById('cookie');
        const scoreDisplay = document.getElementById('score');
        const resetButton = document.getElementById('reset-button');

        cookie.addEventListener('click', () => {
            score++;
            scoreDisplay.textContent = score;
        });

        // Reset the score
        resetButton.addEventListener('click', () => {
            score = 0;
            scoreDisplay.textContent = score;
        });
    </script>
</body>

</html>

Output:

cookies — Output

How to Make a Cookie Clicker Using HTML and JavaScript?

P

pankaj2025

Improve

Article Tags :

Similar Reads

Design a Tip Calculator using HTML, CSS and JavaScript

The tip is the money given as a gift for good service to the person who serves you in a restaurant. In this project, a simple tip calculator is made that takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving person.

Build a PIN Pad using HTML CSS & JavaScript

In this article, we will see how to implement a PIN pad for entering and checking whether the PIN is valid with the help of HTML, CSS, and JavaScript. Here, we have provided a numeric keypad/PIN pad through which the user can input the PIN. Once the user enters a PIN and hits "OK", the code validate

How to Take Screenshot of a Div Using JavaScript?

A screenshot of any element in JavaScript can be taken using the html2canvas library. This library can be downloaded from its official website. The below steps show the method to take a screenshot of a <div> element using JavaScript. ApproachIn this approach, we will create a blank HTML docume

How to make the background of a div clickable in HTML ?

To make the background of a <div> clickable in HTML, you can use various approaches such as wrapping the <div> in an anchor tag or using JavaScript to handle the click event. Below, we will explore these methods in detail, including syntax examples and how they work.Table of ContentUsing

How to divide an image into different clickable link area using HTML?

An image can be divided into different clickable and linkable areas using an Image map. The Image map is used for navigation purposes.An image map consists of several tags: img: It specifies the image to be included in the map.map: It creates a map of clickable areas.area: It is used inside the map

How to change a button text on click using localStorage in Javascript ?

In this article, we will learn how to change a button text using Javascript localStorage when we click on the button achieved by adding HTML onclick event listener. Approach: HTML DOM Window localStorage allows us to store key-value pairs in our browser using an object. The name of the key should be

How to Show Images on Click using HTML ?

Display Images on Click Using HTML and JavaScript refers to techniques that dynamically show images when a user interacts with a webpage, such as clicking a button. This enhances user engagement by making web pages more interactive, using simple HTML, CSS, and JavaScript methods.Table of ContentChan

How to submit a form by clicking a link in JavaScript ?

Submitting a form by clicking a link in JavaScript involves binding a click event handler to the link element. When clicked, the handler triggers the form's submit action programmatically, allowing form submission without the need for a traditional submit button. ApproachHTML Structure:Basic HTML st

How to Toggle Password Visibility using HTML and JavaScript ?

In this article, we will learn about how to toggle password visibility using HTML and JavaScript. Passwords are those input types that take hidden inputs. It can be shown and hidden from the user by toggling its type between text and password. Approach The following approach will be implemented to t

How to Create a Link in JavaScript ?

In JavaScript, a link typically refers to creating HTML hyperlinks (<a> tags) dynamically using JavaScript. You can link using a document.createElement('a'), setting attributes like href and textContent, and then appending it to the document with appendChild().Here are some common approaches t