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

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 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 set up a cookie that never expires in JavaScript ?

We can set up a cookie that never expires in JavaScript using the following approach:Prerequisites :Intermediate level knowledge of JavaScriptBasic HTML Disclaimer: All the cookies expire as per the cookie specification. So, there is no block of code you can write in JavaScript to set up a cookie th

How to create a clickable button in HTML ?

In this article, we will create a Button by using the <Button> Element in the Document. It is used to submit the content. The images and text content can use inside a button tag. Syntax: <button type = "button"> Example: Using HTML <button> type Attribute html <!DOCTYPE html>

How to Add a Custom Right-Click Menu to a Webpage?

Adding a custom right-click menu to a webpage can enhance user interaction by providing tailored options that improve functionality and user experience. This technique involves overriding the default browser context menu with a custom-designed menu, which can be achieved using JavaScript and CSS. Im

How to Get Browser to Navigate URL in JavaScript?

As a web developer, you may need to navigate to a specific URL from your JavaScript code. This can be done by accessing the browser's window object and using one of the available methods for changing the current URL.In JavaScript, there are several approaches for navigating to a URL. The most common

How to Convert a Div into a Link in HTML ?

To transform a <div> into a link, use the we can use anchor tag by wrapping the <div> with it. Set the href attribute of the anchor tag to the desired URL or target location. In this example we will see multiple approaches to do so:Table of Content Using the TagUsing JavaScript event han

How to create a nofollow link using HTML5 ?

A nofollow link s used by Google to specify that the Google search spider should not follow that link and mostly used for paid links. Nofollow links are links with a rel=â€nofollowâ€ HTML tag applied to them. The nofollow tag tells search engines to ignore that link. The nofollow links do not pass Pag

How to add jQuery code to HTML file ?

In this article, we will see how to add jQuery code to an HTML file. You can easily add jQuery to HTML by using several methods, like adding jQuery from CDN or directly downloading jQuery files and including them in your projects. Several methods are discussed in this article. Methods: Download and

How to create an image acting as a submit button using HTML5 ?

In this article, we will learn how to create an image that acts as a submit button i.e. whenever we click on an image in the form, it will be automatically submitted to the server. The default type of <input> type attribute is text. Here, we use a simple approach to complete the task. Syntax