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

No:19241

←

Prev Next

→

cat game
Developer User8477｜Date and time 23/10/2 5:14:45
Build time 8.67 sec｜Game capacity 2.167KB｜

Script

Cat Game

Click the food pictograms to feed the cat!

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
<title>Cat Game</title>
</head>
<body>
<script>
// Define pictograms for the game
const catImage = '<img src="cat.png" width="50px" height="50px">';
const foodImage = '<img src="food.png" width="50px" height="50px">';
const gameBoard = document.getElementById("gameboard");

// Initialize game state variables
let score = 0;
let time = 30;
let isGameOver = false;

// Function to create random positions for cat and food
function getRandomPosition() {
    const max = 90; // Maximum position on the game board
    const min = 10; // Minimum position on the game board
    const position = Math.floor(Math.random() * (max - min + 1) + min);
    return position;
}

// Function to update the game board
function updateGameBoard() {
    gameBoard.innerHTML = catImage.repeat(score); // Display cats based on the score

// Create food pictograms at random positions on the game board
    for (let i = 0; i < score; i++) {
        let food = document.createElement("div");
        food.innerHTML = foodImage;
        food.classList.add("food");

const posX = getRandomPosition();
        const posY = getRandomPosition();
        food.style.left = posX + "%";
        food.style.top = posY + "%";

food.addEventListener("click", function() {
            if (!isGameOver) {
                score++;
                updateGameBoard();
            }
        });

gameBoard.appendChild(food);
    }
}

// Function to start the game
function startGame() {
    if (isGameOver) {
        score = 0;
        time = 30;
        isGameOver = false;
        gameBoard.innerHTML = "";
        updateGameBoard();

// Start countdown timer
        const countdown = setInterval(function() {
            time--;
            if (time <= 0) {
                isGameOver = true;
                clearInterval(countdown);
                gameBoard.innerHTML = "<h1>Game Over</h1><p>Your score: " + score + "</p>";
            }
        }, 1000);
    }
}

</script>
<h1>Cat Game</h1>
<p>Click the food pictograms to feed the cat!</p>
<button onclick="startGame()">Start Game</button>
<div id="gameboard"></div>
</body>
</html>