a working Cookie Clicker game with lots of differant upgrades Really good game golden cookie that goes over the screen slowly every 100 clicks's game

Click here for free DL of the app version that can save data.

No:39399

←

Prev Next

→

a working Cookie Clicker game with lots of differa..ALL
Developer User17633｜Date and time 24/1/28 8:30:50
Build time 10.578 sec｜Game capacity 2.781KB｜

Script

Sure! Here's a simple implementation of a cookie clicker game with various upgrades and a golden cookie that appears every 100 clicks. This game is designed for smartphone operation and uses pictograms for visuals.

Score: 0

To make it work, create two image files: `emozi_all/cookie.png` (representing the cookie) and `emozi_all/cookie.png` (representing the golden cookie). Place the HTML, CSS, and image files in the same folder before running the game.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Cookie Clicker</title>
  <style>
    #cookie {
      width: 200px;
      height: 200px;
      background-size: cover;
      background-image: url('cookie.png');
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

#score {
      position: absolute;
      top: 30px;
      left: 30px;
      font-size: 24px;
      font-weight: bold;
    }

#golden-cookie {
      width: 100px;
      height: 100px;
      background-size: cover;
      background-image: url('golden-cookie.png');
      background-repeat: no-repeat;
      position: absolute;
      top: 50%;
      left: -100px;
      transform: translateY(-50%);
      opacity: 0;
      animation: moveGoldenCookie 10s linear infinite;
    }

@keyframes moveGoldenCookie {
      0% {
        left: -100px;
        opacity: 0;
      }
      50% {
        left: 100%;
        opacity: 1;
      }
      100% {
        left: -100px;
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div id="cookie"></div>
  <div id="score">Score: 0</div>
  <div id="golden-cookie"></div>

// On cookie click event
    function onCookieClick() {
      score += clickMultiplier;
      document.getElementById("score").textContent = "Score: " + score;

if (score % 100 === 0) {
        displayGoldenCookie();
        goldenCookieCount++;
      }
    }

// On golden cookie click event
    function onGoldenCookieClick() {
      score += 10 * goldenCookieCount;
      document.getElementById("score").textContent = "Score: " + score;
      hideGoldenCookie();
    }

// Display golden cookie
    function displayGoldenCookie() {
      document.getElementById("golden-cookie").style.opacity = 1;
    }

// Hide golden cookie
    function hideGoldenCookie() {
      document.getElementById("golden-cookie").style.opacity = 0;
    }

// Event listener for cookie click
    document.getElementById("cookie").addEventListener("click", onCookieClick);

// Event listener for golden cookie click
    document.getElementById("golden-cookie").addEventListener("click", onGoldenCookieClick);
  </script>
</body>
</html>
```

To make it work, create two image files: `cookie.png` (representing the cookie) and `golden-cookie.png` (representing the golden cookie). Place the HTML, CSS, and image files in the same folder before running the game.