Stray black cat platform game to collect mice and cat nip while avoiding dogs and humans's game

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

No:21252

←

Prev Next

→

Stray black cat platform game to collect mice and ..ALL
Developer User9720｜Date and time 23/10/14 8:50:32
Build time 112.121 sec｜Game capacity 7.415KB｜

Script

Sure! Here's an example of a simple platform game implemented as a single HTML file using JavaScript and pictograms:

Score: 0

Make sure to replace the image paths (`emozi_all/cat.png`, `emozi_all/mouse.png`, `emozi_all/dog.png`, `emozi_apple.png`, `emozi_cat.png`) with appropriate image paths or use pictograms as specified in the comments. This game is implemented using a simple game loop that updates the game area, checks for collisions, and handles keyboard input. The player (represented by the cat) can move left and right using the arrow keys. The goal is to collect mice and the catnip while avoiding dogs and humans. The score is displayed at the top-right corner. The game ends if the cat collides with a dog or a human. Feel free to customize and enhance the game further according to your preferences.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple platform game implemented as a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Stray Black Cat Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #game-container {
            position: relative;
        }
        .character {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('cat.png'); /* replace with cat pictogram */
            background-size: cover;
        }
        .mouse {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url('mouse.png'); /* replace with mouse pictogram */
            background-size: cover;
        }
        .cat-nip {
            position: absolute;
            width: 30px;
            height: 30px;
            background-image: url('catnip.png'); /* replace with catnip pictogram */
            background-size: cover;
        }
        .dog {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('dog.png'); /* replace with dog pictogram */
            background-size: cover;
        }
        .human {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('human.png'); /* replace with human pictogram */
            background-size: cover;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="character" class="character"></div>
        <div id="score">Score: 0</div>
    </div>

// Initialize game
        function startGame() {
            character = new Component(50, 50, "cat.png", 10, 120); // replace with cat pictogram
            score = 0;
            mice = [
                new Component(30, 30, "mouse.png", 300, 0), // replace with mouse pictogram
                new Component(30, 30, "mouse.png", 650, 0) // replace with mouse pictogram
            ];
            catNip = new Component(30, 30, "catnip.png", 800, 0); // replace with catnip pictogram
            dogs = [
                new Component(50, 50, "dog.png", 350, 150), // replace with dog pictogram
                new Component(50, 50, "dog.png", 700, 150) // replace with dog pictogram
            ];
            humans = [
                new Component(50, 50, "human.png", 500, 300) // replace with human pictogram
            ];

gameInterval = setInterval(updateGameArea, 20);
        }

// Component class for game objects
        function Component(width, height, imagePath, x, y) {
            this.width = width;
            this.height = height;
            this.imagePath = imagePath;
            this.x = x;
            this.y = y;

this.update = function() {
                var context = gameArea.context;
                var image = new Image();
                image.src = this.imagePath;
                context.drawImage(image, this.x, this.y, this.width, this.height);
            }

this.move = function(dx, dy) {
                this.x += dx;
                this.y += dy;
            }
        }

// Update game area
        function updateGameArea() {
            var context = gameArea.context;
            context.clearRect(0, 0, gameArea.canvas.width, gameArea.canvas.height);

for (var i = 0; i < mice.length; i++) {
                mice[i].y += 1;
                mice[i].update();

// Check collision with character
                if (character.x < mice[i].x + mice[i].width &&
                    character.x + character.width > mice[i].x &&
                    character.y < mice[i].y + mice[i].height &&
                    character.y + character.height > mice[i].y) {
                    mice.splice(i, 1);
                    score++;
                    document.getElementById("score").innerText = "Score: " + score;
                }
            }

catNip.y += 1;
            catNip.update();

// Check collision with character
            if (character.x < catNip.x + catNip.width &&
                character.x + character.width > catNip.x &&
                character.y < catNip.y + catNip.height &&
                character.y + character.height > catNip.y) {
                catNip = null;
                score += 5;
                document.getElementById("score").innerText = "Score: " + score;
            }

for (var i = 0; i < dogs.length; i++) {
                dogs[i].y += 1;
                dogs[i].update();

// Check collision with character
                if (character.x < dogs[i].x + dogs[i].width &&
                    character.x + character.width > dogs[i].x &&
                    character.y < dogs[i].y + dogs[i].height &&
                    character.y + character.height > dogs[i].y) {
                    clearInterval(gameInterval);
                    alert("Game Over! You were caught by a dog.");
                    return;
                }
            }

for (var i = 0; i < humans.length; i++) {
                humans[i].y += 1;
                humans[i].update();

// Check collision with character
                if (character.x < humans[i].x + humans[i].width &&
                    character.x + character.width > humans[i].x &&
                    character.y < humans[i].y + humans[i].height &&
                    character.y + character.height > humans[i].y) {
                    clearInterval(gameInterval);
                    alert("Game Over! You were caught by a human.");
                    return;
                }
            }

character.update();
        }

var gameArea = {
            canvas: document.createElement("canvas"),
            start: function() {
                this.canvas.width = 900;
                this.canvas.height = 400;
                this.context = this.canvas.getContext("2d");
                document.getElementById("game-container").appendChild(this.canvas);
            }
        }

// Start the game
        gameArea.start();
        startGame();
    </script>
</body>
</html>
```

Make sure to replace the image paths (`cat.png`, `mouse.png`, `dog.png`, `human.png`, `catnip.png`) with appropriate image paths or use pictograms as specified in the comments.

This game is implemented using a simple game loop that updates the game area, checks for collisions, and handles keyboard input. The player (represented by the cat) can move left and right using the arrow keys. The goal is to collect mice and the catnip while avoiding dogs and humans. The score is displayed at the top-right corner. The game ends if the cat collides with a dog or a human.

Feel free to customize and enhance the game further according to your preferences.