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

No:21208

Make me a cookie clicker with items you can buy an..ALL
Developer User9329｜Date and time 23/10/14 4:18:21
Build time 91.106 sec｜Game capacity 4.025KB｜

Script

Certainly! Here's an example of a Cookie Clicker game implemented as a single HTML file with JavaScript. You can play the game by clicking on the "🍪" (cookie) image to earn points, use those points to buy items, and use the items you've purchased.

Cookie Clicker

0 cookies

Item 1

Cost: 10 cookies

Item 2

Cost: 20 cookies

Item 3

Cost: 30 cookies

To make it work, you'll need to put the actual images (cookie, item1, item2, etc.) in the same directory as the HTML file and update the image file names in the code accordingly. You can customize the game further by adding more items, enhancing the visuals, or introducing new features. Enjoy playing 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>
    .game-container {
      text-align: center;
    }
    .cookie {
      width: 150px;
      height: 150px;
      cursor: pointer;
    }
    #score {
      font-size: 24px;
      margin-bottom: 20px;
    }
    #items {
      display: flex;
      justify-content: center;
    }
    .item {
      border: 1px solid black;
      margin: 10px;
      padding: 10px;
      width: 120px;
      text-align: center;
      cursor: pointer;
    }
    #messages {
      margin-top: 20px;
      font-style: italic;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <h1>Cookie Clicker</h1>
    <p id="score">0 cookies</p>
    <img src="cookie.png" id="cookie" class="cookie">
    <div id="items">
      <div class="item">
        <img src="item1.png" width="80px" height="80px">
        <p>Item 1</p>
        <p>Cost: 10 cookies</p>
      </div>
      <div class="item">
        <img src="item2.png" width="80px" height="80px">
        <p>Item 2</p>
        <p>Cost: 20 cookies</p>
      </div>
      <div class="item">
        <img src="item3.png" width="80px" height="80px">
        <p>Item 3</p>
        <p>Cost: 30 cookies</p>
      </div>
    </div>
    <p id="messages"></p>
  </div>

// HTML element references
    const scoreElement = document.getElementById('score');
    const cookieElement = document.getElementById('cookie');
    const itemElements = document.getElementsByClassName('item');
    const messagesElement = document.getElementById('messages');

// Event listeners
    cookieElement.addEventListener('click', clickCookie);
    for (let i = 0; i < itemElements.length; i++) {
      itemElements[i].addEventListener('click', buyItem);
    }

// Function to handle clicking on the cookie
    function clickCookie() {
      score++;
      updateScore();
    }

// Function to handle buying items
    function buyItem() {
      const itemIndex = Array.from(itemElements).indexOf(this);
      const item = items[itemIndex];

if (score >= item.cost) {
        score -= item.cost;
        item.cost += 10;
        scoreElement.textContent = `${score} cookies`;

// Apply click multiplier
        cookieElement.addEventListener('click', applyClickMultiplier);
        showMessage(`Bought ${item.name}`);
        this.style.display = 'none'; // Hide purchased item
      } else {
        showMessage(`Not enough cookies for ${item.name}`);
      }
    }

// Function to apply click multiplier
    function applyClickMultiplier() {
      const itemIndex = Array.from(itemElements).indexOf(this);
      const item = items[itemIndex];

score += item.clickMultiplier;
      updateScore();
    }

// Function to update the score display
    function updateScore() {
      scoreElement.textContent = `${score} cookies`;
    }

// Function to display messages
    function showMessage(message) {
      messagesElement.textContent = message;
      setTimeout(() => {
        messagesElement.textContent = '';
      }, 2000);
    }
  </script>
</body>
</html>
```