maze with person that you control enemy with closets you hide in moveing enemy's game

Sure! Here's a sample implementation of a maze game where you control a person and there is an enemy that tries to catch you. The game is designed for smartphone operation and includes pictograms for better visual representation.

👨

In this game, the maze is represented by a grid layout where each cell is an HTML `

`. The person and enemy are depicted by pictograms displayed inside respective cells. The enemy (represented by `👻` pictogram) moves horizontally and is positioned in the second row, while the person (represented by `👨` pictogram) is initially placed at the top-left corner of the maze (cell index 0). To control the person's movement, you can touch and swipe the screen in the desired direction. The game keeps track of the current cell index and updates the positions accordingly. If the person collides with the enemy (cell index 5), a game-over alert is displayed, and the game can be reset. Please note that this is just a basic implementation of a maze game to give you an idea. You can modify and enhance it further based on your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Maze Game</title>
    
    <style>
        #maze {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            grid-gap: 10px;
            margin: 20px auto;
            width: 80%;
            height: 80vh;
            background-color: #f2f2f2;
            padding: 10px;
        }
        
        .cell {
            background-color: #fff;
            border: 1px solid #ccc;
            position: relative;
        }
        
        .person, .enemy {
            position: absolute;
            top: 0;
            left: 0;
            font-size: 20px;
            line-height: 100%;
        }
        
        .person {
            color: #26a69a; /* person's color */
        }
        
        .enemy {
            color: #ef5350; /* enemy's color */
        }
        
        .hidden {
            background-color: #ccc; /* color of closed closets */
        }
    </style>
</head>
<body>
    <div id="maze">
        <div class="cell"><span class="person">👨</span></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell hidden"><span class="enemy">👻</span></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell hidden"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell hidden"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell hidden"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell hidden"></div>
    </div>

var currentCell = 0; // Starting cell index

// Move the person through the maze
            function movePerson(direction) {
                if (direction === "left" && currentCell % 5 !== 0) {
                    currentCell--;
                } else if (direction === "up" && currentCell > 4) {
                    currentCell -= 5;
                } else if (direction === "right" && currentCell % 5 !== 4) {
                    currentCell++;
                } else if (direction === "down" && currentCell < 20) {
                    currentCell += 5;
                }
                
                // Check if person collided with enemy
                if (currentCell === 5) {
                    alert("Game Over! The enemy caught you.");
                    resetGame();
                }
                
                updatePositions();
            }

// Update the positions of person and enemy on the maze
            function updatePositions() {
                mazeCells.forEach(function(cell) {
                    cell.classList.remove("hidden");
                });

mazeCells[currentCell].classList.add("hidden");
                person.style.top = (currentCell - Math.floor(currentCell / 5) * 5) * 100 + "%";
                person.style.left = Math.floor(currentCell / 5) * 100 + "%";
            }

// Reset the game
            function resetGame() {
                currentCell = 0;
                updatePositions();
            }

// Handle smartphone touch gestures
            document.addEventListener("touchstart", function(e) {
                startX = e.changedTouches[0].pageX;
                startY = e.changedTouches[0].pageY;
            });

document.addEventListener("touchend", function(e) {
                var endX = e.changedTouches[0].pageX;
                var endY = e.changedTouches[0].pageY;

var deltaX = endX - startX;
                var deltaY = endY - startY;

if (Math.abs(deltaX) > Math.abs(deltaY)) {
                    if (deltaX > 0) {
                        movePerson("right");
                    } else {
                        movePerson("left");
                    }
                } else {
                    if (deltaY > 0) {
                        movePerson("down");
                    } else {
                        movePerson("up");
                    }
                }
            });

updatePositions(); // Initial setup
        });
    </script>
</body>
</html>
```

In this game, the maze is represented by a grid layout where each cell is an HTML `<div>`. The person and enemy are depicted by pictograms displayed inside respective cells. The enemy (represented by `👻` pictogram) moves horizontally and is positioned in the second row, while the person (represented by `👨` pictogram) is initially placed at the top-left corner of the maze (cell index 0).

To control the person's movement, you can touch and swipe the screen in the desired direction. The game keeps track of the current cell index and updates the positions accordingly. If the person collides with the enemy (cell index 5), a game-over alert is displayed, and the game can be reset.

Please note that this is just a basic implementation of a maze game to give you an idea. You can modify and enhance it further based on your specific requirements.