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

No:19947

136

←

Prev Next

→

Make Cookie clicker but you can buy items when you..ALL
Developer User8878｜Date and time 23/10/7 13:01:29
Build time 18.847 sec｜Game capacity 3.146KB｜

Script

Sure! Here's a simple implementation of a game similar to Cookie Clicker, where you can buy items to increase your cookie production. This game can be played on a smartphone and incorporates pictograms for the items.

Cookie Clicker Game

0 cookies

Available Items

Your Items

Cursor: 0
Grandma: 0
Farm: 0

In this game, you can click the "Click Me!" button to increase your cookie count. You can then use the cookies to buy "Cursor," "Grandma," and "Farm" items, each with their respective costs. The number of cookies, as well as the number of owned items, will be displayed dynamically. The pictograms for each item are represented using `<img>` tags. You can replace `emozi_hamuster.png`, `emozi_dog.png`, and `emozi_himawari.png` with your desired pictogram images.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cookie Clicker Game</title>
</head>
<body>
    <h1>Cookie Clicker Game</h1>
    <p id="cookieCount">0 cookies</p>
    <br>
    <button onclick="clickCookie()">Click Me!</button>
    <br>
    <h2>Available Items</h2>
    <button onclick="buyItem('Cursor')">Buy Cursor (Cost: 10 cookies) <img src="cursor.png" alt="Cursor"></button>
    <button onclick="buyItem('Grandma')">Buy Grandma (Cost: 100 cookies) <img src="grandma.png" alt="Grandma"></button>
    <button onclick="buyItem('Farm')">Buy Farm (Cost: 1000 cookies)  <img src="farm.png" alt="Farm"></button>
    <br>
    <h2>Your Items</h2>
    <ul id="items">
        <li>Cursor: 0 <img src="cursor.png" alt="Cursor"></li>
        <li>Grandma: 0 <img src="grandma.png" alt="Grandma"></li>
        <li>Farm: 0 <img src="farm.png" alt="Farm"></li>
    </ul>
    
    <script>
        // Initializations
        let cookieCount = 0;
        let cursorCount = 0;
        let grandmaCount = 0;
        let farmCount = 0;

function updateCookieCount() {
            document.getElementById('cookieCount').innerHTML = cookieCount + " cookies";
        }

function updateItemList() {
            document.getElementById('items').innerHTML = 
                `<li>Cursor: ${cursorCount} <img src="cursor.png" alt="Cursor"></li>
                <li>Grandma: ${grandmaCount} <img src="grandma.png" alt="Grandma"></li>
                <li>Farm: ${farmCount} <img src="farm.png" alt="Farm"></li>`;
        }

function clickCookie() {
            cookieCount++;
            updateCookieCount();
        }

function buyItem(item) {
            let cost = 0;
            switch (item) {
                case 'Cursor':
                    cost = 10;
                    cursorCount++;
                    break;
                case 'Grandma':
                    cost = 100;
                    grandmaCount++;
                    break;
                case 'Farm':
                    cost = 1000;
                    farmCount++;
                    break;
                default:
                    console.log("Invalid item");
                    return;
            }

if (cookieCount >= cost) {
                cookieCount -= cost;
                updateCookieCount();
                updateItemList();
            }
        }

// Start the game
        updateCookieCount();
        updateItemList();
    </script>
</body>
</html>
```

You can replace `cursor.png`, `grandma.png`, and `farm.png` with your desired pictogram images.