Maze ChatGPT

<!DOCTYPE html>
<html>
<head>
    <title>Maze Game</title>
    <style>
        svg {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <svg id="gameCanvas" width="400" height="400"></svg>
    <script>
        const svg = document.getElementById('gameCanvas');
        const cellSize = 20;
        const mazeWidth = Math.floor(svg.getAttribute('width') / cellSize);
        const mazeHeight = Math.floor(svg.getAttribute('height') / cellSize);
        const maze = generateMaze(mazeWidth, mazeHeight);
        const player = createPlayer(0, 0);

        function generateMaze(width, height) {
            const maze = new Array(height);
            for (let row = 0; row < height; row++) {
                maze[row] = new Array(width).fill(true);
            }

            const stack = [];
            let currentCell = { x: 0, y: 0 };

            while (true) {
                const neighbors = getUnvisitedNeighbors(currentCell, maze);
                if (neighbors.length > 0) {
                    stack.push(currentCell);
                    const nextCell = neighbors[Math.floor(Math.random() * neighbors.length)];
                    removeWall(currentCell, nextCell, maze);
                    currentCell = nextCell;
                } else if (stack.length > 0) {
                    currentCell = stack.pop();
                } else {
                    break;
                }
            }

            return maze;
        }

        function getUnvisitedNeighbors(cell, maze) {
            const { x, y } = cell;
            const neighbors = [];

            if (x > 1) neighbors.push({ x: x - 2, y });
            if (x < mazeWidth - 2) neighbors.push({ x: x + 2, y });
            if (y > 1) neighbors.push({ x, y: y - 2 });
            if (y < mazeHeight - 2) neighbors.push({ x, y: y + 2 });

            return neighbors.filter((neighbor) => maze[neighbor.y][neighbor.x]);
        }

        function removeWall(cellA, cellB, maze) {
            const middleX = (cellA.x + cellB.x) / 2;
            const middleY = (cellA.y + cellB.y) / 2;
            maze[cellA.y][cellA.x] = false;
            maze[middleY][middleX] = false;
            maze[cellB.y][cellB.x] = false;
        }

        function createPlayer(x, y) {
            const player = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
            player.setAttribute('cx', x * cellSize + cellSize / 2);
            player.setAttribute('cy', y * cellSize + cellSize / 2);
            player.setAttribute('r', cellSize / 2 - 2);
            player.setAttribute('fill', 'blue');
            svg.appendChild(player);
            return player;
        }

        function movePlayer(dx, dy) {
            const playerX = parseFloat(player.getAttribute('cx'));
            const playerY = parseFloat(player.getAttribute('cy'));
            const newX = playerX + dx * cellSize;
            const newY = playerY + dy * cellSize;

            if (newX >= 0 && newX < svg.getAttribute('width') && newY >= 0 && newY < svg.getAttribute('height')) {
                player.setAttribute('cx', newX);
                player.setAttribute('cy', newY);
            }
        }

        // Handle keyboard input
        document.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowLeft') {
                movePlayer(-1, 0);
            } else if (event.key === 'ArrowRight') {
                movePlayer(1, 0);
            } else if (event.key === 'ArrowUp') {
                movePlayer(0, -1);
            } else if (event.key === 'ArrowDown') {
                movePlayer(0, 1);
            }
        });

        // Draw the maze
        for (let row = 0; row < mazeHeight; row++) {
            for (let col = 0; col < mazeWidth; col++) {
                if (maze[row][col]) {
                    const wall = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
                    wall.setAttribute('x', col * cellSize);
                    wall.setAttribute('y', row * cellSize);
                    wall.setAttribute('width', cellSize);
                    wall.setAttribute('height', cellSize);
                    wall.setAttribute('fill', 'black');
                    svg.appendChild(wall);
                }
            }
        }
    </script>
</body>
</html>