Battle french crabs in your house's game

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

No:37728

←

Prev Next

→

Battle french crabs in your house
Developer User17114｜Date and time 24/1/21 14:22:43
Build time 11.041 sec｜Game capacity 3.653KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Battle French Crabs</title>
    <style>
        canvas {
            border: 1px solid black;
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Pictogram images for the game
        const crabImage = new Image();
        crabImage.src = 'crab.png';

const houseImage = new Image();
        houseImage.src = 'house.png';

// Game variables
        let canvas;
        let canvasContext;
        let houseX = 200;
        let houseY = 200;
        let crabX = 0;
        let crabY = 0;

// Update the game state
        function update() {
            // Check collision
            if (
                houseX < crabX + crabImage.width &&
                houseX + houseImage.width > crabX &&
                houseY < crabY + crabImage.height &&
                houseY + houseImage.height > crabY
            ) {
                alert('Game Over! The French crabs have invaded your house!');
                resetGame();
                return;
            }

// Move the crab randomly
            crabX += Math.floor(Math.random() * 5) + 1;
            crabY += Math.floor(Math.random() * 5) + 1;

// Keep the crab within the canvas boundaries
            if (crabX < 0) crabX = 0;
            if (crabY < 0) crabY = 0;
            if (crabX > canvas.width - crabImage.width) crabX = canvas.width - crabImage.width;
            if (crabY > canvas.height - crabImage.height) crabY = canvas.height - crabImage.height;
        }

// Render the game objects on the canvas
        function draw() {
            // Clear the canvas
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw house
            canvasContext.drawImage(houseImage, houseX, houseY);

// Draw crab
            canvasContext.drawImage(crabImage, crabX, crabY);
        }

// Game loop
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// Reset game state
        function resetGame() {
            crabX = 0;
            crabY = 0;
        }

// Handle touch events on the canvas
        function handleTouch(event) {
            houseX = event.touches[0].clientX - canvas.getBoundingClientRect().left;
            houseY = event.touches[0].clientY - canvas.getBoundingClientRect().top;
        }

// Initialize the game
        function initialize() {
            // Get the canvas element
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

// Start the game loop
            gameLoop();

// Listen for touch events on the canvas
            canvas.addEventListener('touchstart', handleTouch, false);
        }

// Load images before starting the game
        function preloadImages() {
            let loadedImages = 0;
            const totalImages = 2;

function imageLoaded() {
                loadedImages++;
                if (loadedImages === totalImages) {
                    initialize();
                }
            }

crabImage.onload = imageLoaded;
            houseImage.onload = imageLoaded;
        }

// Start the game after the HTML content is loaded
        window.onload = preloadImages;
    </script>
</body>
</html> </giant spoons are falling>