Easy 20x20 Maze Adventure

Maze Adventure stage 1

Stage Design for the Maze Game(Simple 20x20 Maze Layout)

1. Stage Layouts: The game features multiple maze layouts, each represented by a 2D array containing different values. The value 1 represents a path where the player can move, while 0 represents walls that block movement. Each stage offers a unique challenge, requiring different navigation strategies.
2. Grid Representation: The maze is displayed as a grid of cells using a CSS Grid layout. Each cell has a specific size (20px by 20px) and is displayed in a visually appealing manner with gaps between the cells for better visibility.
3. Cell Styling:
   • Walls: Cells that are part of the wall are filled with a solid black background.
   • Player: The player's current position is indicated by a blue cell.
   • End Point: The exit of the maze is represented by a red cell located at the bottom-right corner (cell [19, 19] of the grid).
4. Interactive Elements: Players can interact with the maze through mouse clicks on cells or keyboard inputs (arrow keys). Clicking on a cell or pressing the corresponding arrow key will attempt to move the player to that location.
5. Dynamic Updates: As the player moves through the maze, the visual representation of the maze is dynamically updated to reflect the player’s new position, enhancing the interactive experience.
6. Progression System: Upon reaching the end of a maze, a message is displayed indicating the current stage number and the time taken to complete it. The game then resets to the next stage, keeping the player engaged with new challenges.

반응형

This stage design not only emphasizes interactivity and visual clarity but also encourages players to overcome obstacles and improve their maze-solving skills. If you need more details or specific aspects covered, let me know!

const mazeLayouts = [
            [
                [1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 1, 1],
                [0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1],
                [1, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 0],
                [1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1],
                [1, 1, 0, 1, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 0],
                [0, 1, 1, 0, 1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1],
                [1, 1, 0, 1, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1],
                [1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 1, 1],
                [1, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 0, 0, 1],
                [0, 0, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1],
                [1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 1, 0, 1],
                [0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1, 1],
                [1, 0, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1],
                [0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1],
                [1, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0],
                [1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1],
                [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 1],
                [1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0],
                [1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1, 0, 0, 0, 1, 1],
                [1, 0, 0, 1, 1, 1, 0, 1, 1, 0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 1]
            ],
	   		[ /* Second maze layout */ ],
            [ /* Third maze layout */ ],
        ];

 

Maze Adventure stage 2

 

1. If you want to add more stages, you can add more stages.

 

 let stage = 0; // Current maze stage
        let mazeLayout = mazeLayouts[stage]; // Current maze layout
        const mazeElement = document.getElementById("maze"); // Maze element in DOM
        const timeElement = document.getElementById("time"); // Timer element in DOM

        // Player's initial position
        let playerPosition = { x: 0, y: 0 };
        let timer = 0; // Timer for tracking duration
        let timerInterval; // Interval reference for the timer

        // Function to create the maze UI
        function createMaze() {
            mazeElement.innerHTML = ''; // Clear previous maze content
            for (let y = 0; y < mazeLayout.length; y++) {
                for (let x = 0; x < mazeLayout[y].length; x++) {
                    const cellDiv = document.createElement("div");
                    cellDiv.classList.add("cell"); // Add cell class
                    if (mazeLayout[y][x] === 0) {
                        cellDiv.classList.add("wall"); // Add wall class for walls
                    }
                    if (x === playerPosition.x && y === playerPosition.y) {
                        cellDiv.classList.add("player"); // Add player class for player's position
                    }
                    if (x === 19 && y === 19) {
                        cellDiv.classList.add("end"); // Add end class for the end point
                    }
                    mazeElement.appendChild(cellDiv); // Append cell to maze
                    cellDiv.addEventListener("click", () => movePlayer(x, y)); // Click event for cell
                }
            }
        }

 

2. Add the action of the player moving

 

// Function to move the player
        function movePlayer(newX, newY) {
            if (newX >= 0 && newX < 20 && newY >= 0 && newY < 20 && mazeLayout[newY][newX] !== 0) {
                playerPosition.x = newX; // Update player's X position
                playerPosition.y = newY; // Update player's Y position
                createMaze(); // Rebuild the maze display
                checkWin(); // Check if the player has reached the end
            }
        }

        // Keyboard input handler
        function handleKeyPress(event) {
            switch (event.key) {
                case "ArrowUp":
                    movePlayer(playerPosition.x, playerPosition.y - 1); // Move up
                    break;
                case "ArrowDown":
                    movePlayer(playerPosition.x, playerPosition.y + 1); // Move down
                    break;
                case "ArrowLeft":
                    movePlayer(playerPosition.x - 1, playerPosition.y); // Move left
                    break;
                case "ArrowRight":
                    movePlayer(playerPosition.x + 1, playerPosition.y); // Move right
                    break;
            }
        }

 

3. When the plier arrives, it's done

 

// Function to check if the player has won
function checkWin() {
    if (playerPosition.x === 19 && playerPosition.y === 19) { // Check if player reached the end
        clearInterval(timerInterval); // Stop the timer
        alert(`${stage}stage! time: ${timer}s`); // Alert the player's time taken
        resetGame(); // Reset the game for the next stage
    }
}

 

4. It's going to reset

 

 

// Function to reset the game state and load the next maze
function resetGame() {
    playerPosition = { x: 0, y: 0 }; // Reset player's position
    timer = 0; // Reset the timer
    timeElement.textContent = timer; // Update the timer display
    stage++; // Move to the next stage

    mazeLayout = mazeLayouts[stage]; // Load the next maze layout
    if (stage >= mazeLayouts.length) { // Check if all stages are completed
        alert(`All clear`); // Alert that all mazes have been cleared
        return; // Exit the function
    }
    createMaze(); // Create the new maze
    clearInterval(timerInterval); // Clear existing timer
    startTimer(); // Start the timer for the new stage
}

 

 

5. The timer is working

 

  // Function to start the timer
function startTimer() {
    timerInterval = setInterval(() => {
        timer++; // Increment timer every second
        timeElement.textContent = timer; // Update the displayed time
    }, 1000);
}

 

Maze Adventure stage3

 

Then, I'll start the function and add html and style

 

// Function to initialize and start the game
function startGame() {
    playerPosition = { x: 0, y: 0 }; // Reset player's position
    timer = 0; // Reset timer
    timeElement.textContent = timer; // Update timer display
    createMaze(); // Create the maze
    clearInterval(timerInterval); // Clear any existing timer
    startTimer(); // Start the timer
    window.addEventListener('keydown', handleKeyPress); // Add keydown event listener
}

// Start the game when the script loads
startGame();

 

<style>
    /* Maze container and cell styles */
    #maze {
        display: grid;
        grid-template-columns: repeat(20, 20px); /* 20 columns of 20px each */
        grid-gap: 2px; /* Space between cells */
        margin: 20px auto; /* Center the maze on the page */
        border: 1px solid #000000; /* Border around the maze */
        width: max-content; /* Adjust width according to content */
    }

    .cell {
        width: 20px; /* Width of each cell */
        height: 20px; /* Height of each cell */
        border: 1px solid #00000000; /* Transparent border */
    }

    /* Cell types and their colors */
    .wall {
        background-color: black; /* Walls in the maze */
    }

    .start {
        background-color: green; /* Start point (not used in the current layout) */
    }

    .end {
        background-color: red; /* End point of the maze */
    }

    .player {
        background-color: blue; /* Player's position */
    }
</style>


<div id="stage">1</div> <!-- Displays the current stage -->
<div id="maze"></div> <!-- The maze will be rendered here -->
<div id="timer">Time: <span id="time">0</span> seconds</div> <!-- Timer display -->

 

 

#adventure corn maze #adventure maze #corn maze and pumpkin patch #corn mazes #corn mazes and pumpkin patches #cornfield maze #family fun center lakeland #houston attractions for families #kersey valley corn maze #kersey valley maize #kersey valley maize adventure #kersey valley maize adventure photos #maize adventure #maize adventures #maze adventures #pumpkin patch and corn maze #pumpkin patch hay rides #pumpkin patch with corn maze #skeeters maze adventure #things to do in sugar land