Cat chasing a mouse joystick controller play as cat mouse runs away's game

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

No:8325

1583

←

Prev Next

→

Cat chasing a mouse joystick controller play as ca..ALL
Developer User4166｜Date and time 23/7/15 1:49:01
Build time 31.92 sec｜Game capacity 4.586KB｜

Script

Sure! Here's a simple game where you can control a cat chasing a mouse using a virtual joystick controller. Please note that due to the limitations of the text-based interface, I can't provide pictograms, but you can imagine the scenario as you play.

To play the game, save the above code into a single HTML file (e.g., `game.html`) and open it in a web browser. You can move the cat by touching and dragging within the game container. The objective is to catch the mouse by moving the cat close enough to it. If the cat catches the mouse, a popup message will appear indicating the game over, and the game will reset. Please note that this is a basic implementation and can be further enhanced with additional features, levels, and graphics.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cat Chasing Mouse</title>
    <style>
        #game-container {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

#cat {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: gray;
        }

#mouse {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="cat"></div>
        <div id="mouse"></div>
    </div>
    <script>
        // Get the game container and cat element
        const gameContainer = document.getElementById('game-container');
        const cat = document.getElementById('cat');

// Initialize cat and mouse positions
        const initialCatPosition = { x: 125, y: 125 };
        const initialMousePosition = { x: getRandomPosition(), y: getRandomPosition() };
        let catPosition = { ...initialCatPosition };
        let mousePosition = { ...initialMousePosition };

// Set cat position on game container
        cat.style.top = catPosition.y + 'px';
        cat.style.left = catPosition.x + 'px';

// Set mouse position on game container
        const mouse = document.getElementById('mouse');
        mouse.style.top = mousePosition.y + 'px';
        mouse.style.left = mousePosition.x + 'px';

// Set the joystick controller for cat movement
        gameContainer.addEventListener('touchmove', handleJoystickMove);

// Function to handle joystick movement
        function handleJoystickMove(event) {
            event.preventDefault();

// Get the touch position relative to game container
            const touchPosition = {
                x: event.touches[0].clientX - gameContainer.offsetLeft,
                y: event.touches[0].clientY - gameContainer.offsetTop
            };

// Update cat's position
            catPosition.x = touchPosition.x;
            catPosition.y = touchPosition.y;

// Set the new cat position in game container
            cat.style.top = catPosition.y + 'px';
            cat.style.left = catPosition.x + 'px';
        }

// Function to generate random position within game container
        function getRandomPosition() {
            return Math.floor(Math.random() * 250);
        }

// Start the game loop
        setInterval(updateGame, 1000);

// Function to update the game every second
        function updateGame() {
            // Update mouse's position randomly
            mousePosition.x = getRandomPosition();
            mousePosition.y = getRandomPosition();

// Set the new mouse position in game container
            mouse.style.top = mousePosition.y + 'px';
            mouse.style.left = mousePosition.x + 'px';

// Check if the cat has caught the mouse
            if (Math.abs(catPosition.x - mousePosition.x) < 30 && Math.abs(catPosition.y - mousePosition.y) < 30) {
                // Cat caught the mouse
                alert('You caught the mouse! Game over.');
                resetGame();
            }
        }

// Function to reset the game
        function resetGame() {
            // Reset cat and mouse positions
            catPosition = { ...initialCatPosition };
            mousePosition = { ...initialMousePosition };

// Move cat and mouse to initial positions in game container
            cat.style.top = catPosition.y + 'px';
            cat.style.left = catPosition.x + 'px';
            mouse.style.top = mousePosition.y + 'px';
            mouse.style.left = mousePosition.x + 'px';
        }
    </script>
</body>
</html>
```

Please note that this is a basic implementation and can be further enhanced with additional features, levels, and graphics.