Playable game where a cat has to eat's game

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

No:36720

←

Prev Next

→

Playable game where a cat has to eat
Developer User16695｜Date and time 24/1/18 9:24:25
Build time 12.427 sec｜Game capacity 3.319KB｜

Script

Sure! Here's a simple game where a cat has to eat:

To use this code, save it as an HTML file (e.g., `cat_game.html`) and place the `emozi_all/cat.png` and `emozi_rabbit.png` images in the same directory as the HTML file. You can use any pictogram images for the cat and food, just replace `"emozi_all/cat.png"` and `"emozi_apple.png"` with the respective file names. When you open the HTML file in a web browser, it will display a canvas where you can control the cat using the arrow keys. The cat needs to collide with the food to eat it, and each time it does, the food position will be regenerated at a random location within the canvas. Hope you enjoy playing the game!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple game where a cat has to eat:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cat Eats</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Pictogram images
        var catImage = new Image();
        catImage.src = "cat.png";

var foodImage = new Image();
        foodImage.src = "food.png";

// Cat object
        var cat = {
            x: 200,
            y: 200,
            width: 50,
            height: 50,
            speed: 5
        };

// Food object
        var food = {
            x: Math.random() * (canvas.width - 50),
            y: Math.random() * (canvas.height - 50),
            width: 50,
            height: 50
        };

// Function to check if cat is colliding with food
        function isColliding() {
            if (cat.x < food.x + food.width &&
                cat.x + cat.width > food.x &&
                cat.y < food.y + food.height &&
                cat.y + cat.height > food.y) {
                return true;
            } else {
                return false;
            }
        }

// Game loop
        function update() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update cat position based on user input
            document.addEventListener("keydown", function(event) {
                var key = event.keyCode;

if (key === 37) { // Left arrow key
                    cat.x -= cat.speed;
                } else if (key === 39) { // Right arrow key
                    cat.x += cat.speed;
                } else if (key === 38) { // Up arrow key
                    cat.y -= cat.speed;
                } else if (key === 40) { // Down arrow key
                    cat.y += cat.speed;
                }
            });

// Draw cat image
            ctx.drawImage(catImage, cat.x, cat.y, cat.width, cat.height);

// Draw food image
            ctx.drawImage(foodImage, food.x, food.y, food.width, food.height);

// Check if cat is colliding with food
            if (isColliding()) {
                // Cat has eaten the food, generate new food position
                food.x = Math.random() * (canvas.width - 50);
                food.y = Math.random() * (canvas.height - 50);
            }

// Request animation frame for smooth animation
            requestAnimationFrame(update);
        }

// Start the game loop
        update();
    </script>
</body>
</html>
```

To use this code, save it as an HTML file (e.g., `cat_game.html`) and place the `cat.png` and `food.png` images in the same directory as the HTML file. You can use any pictogram images for the cat and food, just replace `"cat.png"` and `"food.png"` with the respective file names.

When you open the HTML file in a web browser, it will display a canvas where you can control the cat using the arrow keys. The cat needs to collide with the food to eat it, and each time it does, the food position will be regenerated at a random location within the canvas.

Hope you enjoy playing the game!