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

No:34516

←

Prev Next

→

Cat life
Developer User16273｜Date and time 24/1/11 0:24:28
Build time 20.165 sec｜Game capacity 4.006KB｜

Script

Sure! Here's an example of a simple game called "Cat Life" implemented as a single HTML file using JavaScript and pictograms. It's designed for smartphone operation. Just save the code below into an HTML file and open it in a web browser.

Cat Life

This game allows you to feed and pet a cat. The cat's hunger and happiness levels are displayed using pictograms of food and hearts respectively. You can click on the "Feed" button to increase the cat's hunger level and the "Pet" button to increase its happiness level. The game checks if the cat is in a good or bad state and alerts you accordingly. Feel free to customize the pictogram URLs with your own images to match your desired design.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
            font-size: 30px;
        }
        
        #gameContainer {
            margin-top: 100px;
        }
        
        .pictogram {
            width: 80px;
            height: 80px;
            display: inline-block;
            background-size: cover;
            margin: 5px;
        }
        
        .cat {
            background-image: url('https://example.com/cat.png'); /* Replace with your own cat pictogram */
        }
        
        .food {
            background-image: url('https://example.com/food.png'); /* Replace with your own food pictogram */
        }
        
        .heart {
            background-image: url('https://example.com/heart.png');  /* Replace with your own heart pictogram */
        }
        
        button {
            font-size: 20px;
            margin: 20px;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
    <h1>Cat Life</h1>
    
    <div id="gameContainer">
        <div class="pictogram cat"></div>
        <div class="pictogram food"></div>
        <div class="pictogram heart"></div>
    </div>
    
    <button onclick="feedCat()">Feed</button>
    <button onclick="petCat()">Pet</button>
    
    <script>
        var catHunger = 50;
        var catHappiness = 50;
        
        function feedCat() {
            catHunger += 10;
            updateCatStatus();
        }
        
        function petCat() {
            catHappiness += 10;
            updateCatStatus();
        }
        
        function updateCatStatus() {
            catHunger = Math.max(0, catHunger);
            catHappiness = Math.max(0, catHappiness);
            
            // Display cat hunger level using food pictograms
            var foodContainer = document.querySelector('.food');
            foodContainer.innerHTML = '';
            for (var i = 0; i < catHunger; i += 10) {
                foodContainer.innerHTML += '<div class="pictogram food"></div>';
            }
            
            // Display cat happiness level using heart pictograms
            var heartContainer = document.querySelector('.heart');
            heartContainer.innerHTML = '';
            for (var i = 0; i < catHappiness; i += 10) {
                heartContainer.innerHTML += '<div class="pictogram heart"></div>';
            }
            
            // Update cat pictogram based on happiness level
            var catContainer = document.querySelector('.cat');
            if (catHappiness >= 50) {
                catContainer.style.backgroundColor = 'green';
            } else {
                catContainer.style.backgroundColor = 'red';
            }
            
            // Check if the cat is in a good or bad state
            if (catHunger >= 50 && catHappiness >= 50) {
                alert('Congratulations! You have a happy and well-fed cat!');
            } else if (catHunger <= 0 || catHappiness <= 0) {
                alert('Oh no! Your cat ran away... Game over!');
                resetGame();
            }
        }
        
        function resetGame() {
            catHunger = 50;
            catHappiness = 50;
            updateCatStatus();
        }
        
        updateCatStatus();
    </script>
</body>
</html>
```

Feel free to customize the pictogram URLs with your own images to match your desired design.