Secret cat maze master: find the cats's game

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

No:28216

←

Prev Next

→

Secret cat maze master: find the cats
Developer User13970｜Date and time 23/12/11 8:35:39
Build time 30.801 sec｜Game capacity 4.384KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Secret Cat Maze Master</title>
</head>
<body>
    <canvas id="mazeCanvas" width="480" height="320"></canvas>
    <script>
        // Initialize the canvas and context
        const canvas = document.getElementById("mazeCanvas");
        const context = canvas.getContext("2d");
        
        // Load cat pictograms
        const catImage = new Image();
        catImage.src = "cat.png";
        
        // Define maze grid and player position
        const maze = [
            [1, 1, 1, 1, 1, 1, 1, 1],
            [1, 0, 0, 0, 0, 0, 0, 1],
            [1, 0, 1, 1, 1, 1, 0, 1],
            [1, 0, 1, 0, 0, 1, 0, 1],
            [1, 0, 1, 0, 1, 1, 0, 1],
            [1, 0, 1, 0, 1, 0, 0, 1],
            [1, 0, 0, 0, 0, 0, 1, 1],
            [1, 1, 1, 1, 1, 1, 1, 1]
        ];
        
        let playerX = 1;
        let playerY = 1;
        
        // Draw the maze grid with pictograms
        function drawMaze() {
            for (let row = 0; row < maze.length; row++) {
                for (let col = 0; col < maze[row].length; col++) {
                    let tileX = col * 40;
                    let tileY = row * 40;
                    
                    if (maze[row][col] === 1) {
                        context.fillStyle = "gray";
                        context.fillRect(tileX, tileY, 40, 40);
                    } else {
                        context.drawImage(catImage, tileX, tileY, 40, 40);
                    }
                }
            }
        }
        
        // Update the player's position based on input
        function movePlayer(direction) {
            let newPlayerX = playerX;
            let newPlayerY = playerY;
            
            if (direction === "up" && maze[playerY - 1][playerX] !== 1) {
                newPlayerY--;
            } else if (direction === "down" && maze[playerY + 1][playerX] !== 1) {
                newPlayerY++;
            } else if (direction === "left" && maze[playerY][playerX - 1] !== 1) {
                newPlayerX--;
            } else if (direction === "right" && maze[playerY][playerX + 1] !== 1) {
                newPlayerX++;
            }
            
            // Check if the player found a cat
            if (maze[newPlayerY][newPlayerX] === 0) {
                maze[newPlayerY][newPlayerX] = 2; // Mark the cat as found
                alert("Congratulations! You found a cat!");
            }
            
            playerX = newPlayerX;
            playerY = newPlayerY;
            
            drawMaze();
            drawPlayer();
        }
        
        // Draw the player's position
        function drawPlayer() {
            let playerXPosition = playerX * 40;
            let playerYPosition = playerY * 40;
            
            context.fillStyle = "blue";
            context.fillRect(playerXPosition, playerYPosition, 40, 40);
        }
        
        // Listen to touch events for mobile controls
        canvas.addEventListener("touchstart", handleTouch);
        canvas.addEventListener("touchend", handleTouch);
        
        // Handle touch events and move the player accordingly
        function handleTouch(event) {
            const touchX = event.touches[0].clientX;
            const touchY = event.touches[0].clientY;
            
            const canvasRect = canvas.getBoundingClientRect();
            
            const canvasX = touchX - canvasRect.left;
            const canvasY = touchY - canvasRect.top;
            
            const cellSize = canvas.width / maze[0].length;
            
            const col = Math.floor(canvasX / cellSize);
            const row = Math.floor(canvasY / cellSize);
            
            if (row === playerY && col === playerX) {
                return; // Ignore if the same cell is touched
            }
            
            if (row === playerY - 1 && col === playerX) {
                movePlayer("up");
            } else if (row === playerY + 1 && col === playerX) {
                movePlayer("down");
            } else if (row === playerY && col === playerX - 1) {
                movePlayer("left");
            } else if (row === playerY && col === playerX + 1) {
                movePlayer("right");
            }
        }
        
        // Start the game
        drawMaze();
        drawPlayer();
    </script>
</body>
</html>