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

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

No:31745

←

Prev Next

→

maze with person that you control enemy with close..ALL
Developer User15107｜Date and time 23/12/28 8:28:55
Build time 35.873 sec｜Game capacity 5.191KB｜

Script

Sure, below is an example of a simple maze game implemented as a single HTML file. The player controls a person and tries to avoid the moving enemy by hiding in closets. The game uses pictograms for visualization.

To play the game, you can copy the code above and save it as an HTML file, then open the file in a web browser (preferably on a smartphone). The maze will be displayed, and you can control the person's movement using the arrow keys. The goal is to avoid getting caught by the moving enemy by hiding in the closets represented by the blue cells. If you collide with the enemy, the game is over and you will receive an alert. You can reset the game and start again by refreshing the page.

←

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 {
            border: 1px solid black;
            width: 400px;
            height: 400px;
            display: flex;
            flex-wrap: wrap;
        }

.cell {
            width: 20px;
            height: 20px;
            text-align: center;
            font-size: 20px;
        }

.person {
            background-color: green;
            color: white;
        }

.enemy {
            background-color: red;
            color: white;
        }

.closet {
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <div id="maze"></div>

// Maze elements
    const maze = document.getElementById('maze');
    const cells = [];
    let personPosition;
    let enemyPosition;
    const closetPositions = [];

// Generate maze grid
    for (let i = 0; i < mazeCells; i++) {
        const cell = document.createElement('div');
        cell.classList.add('cell');
        maze.appendChild(cell);
        cells.push(cell);
    }

// Generate random maze elements
    function generateMazeElements() {
        personPosition = Math.floor(Math.random() * mazeCells);
        enemyPosition = Math.floor(Math.random() * mazeCells);

// Generate random closet positions
        while (closetPositions.length < closetCount) {
            const closetPosition = Math.floor(Math.random() * mazeCells);
            if (closetPositions.indexOf(closetPosition) === -1 && closetPosition !== personPosition && closetPosition !== enemyPosition) {
                closetPositions.push(closetPosition);
            }
        }
    }

// Draw maze elements on the grid
    function drawMazeElements() {
        for (let i = 0; i < mazeCells; i++) {
            cells[i].classList.remove('person', 'enemy', 'closet');
        }

cells[personPosition].classList.add('person');
        cells[enemyPosition].classList.add('enemy');

closetPositions.forEach((position) => {
            cells[position].classList.add('closet');
        });
    }

// Handle user's movement
    function handleMovement(event) {
        const key = event.key;

if (key === 'ArrowUp' && personPosition >= mazeSize) { // Move up
            personPosition -= mazeSize;
        } else if (key === 'ArrowDown' && personPosition + mazeSize < mazeCells) { // Move down
            personPosition += mazeSize;
        } else if (key === 'ArrowLeft' && personPosition % mazeSize !== 0) { // Move left
            personPosition -= 1;
        } else if (key === 'ArrowRight' && (personPosition + 1) % mazeSize !== 0) { // Move right
            personPosition += 1;
        }

drawMazeElements();
        checkCollision();
    }

// Check collision between person and enemy
    function checkCollision() {
        if (personPosition === enemyPosition) {
            alert('Game Over! You got caught by the enemy.');
            resetGame();
        }
    }

// Reset game
    function resetGame() {
        closetPositions.length = 0;
        generateMazeElements();
        drawMazeElements();
    }

// Start the game
    function startGame() {
        generateMazeElements();
        drawMazeElements();
        document.addEventListener('keydown', handleMovement);

// Move the enemy randomly
        setInterval(() => {
            const possibleMoves = [];

if (enemyPosition >= mazeSize) { // Move up
                possibleMoves.push(enemyPosition - mazeSize);
            }
            if (enemyPosition + mazeSize < mazeCells) { // Move down
                possibleMoves.push(enemyPosition + mazeSize);
            }
            if (enemyPosition % mazeSize !== 0) { // Move left
                possibleMoves.push(enemyPosition - 1);
            }
            if ((enemyPosition + 1) % mazeSize !== 0) { // Move right
                possibleMoves.push(enemyPosition + 1);
            }

const randomMove = possibleMoves[Math.floor(Math.random() * possibleMoves.length)];
            enemyPosition = randomMove;

drawMazeElements();
            checkCollision();
        }, enemyMoveInterval);
    }

startGame();
    </script>
</body>
</html>
```