你可能走不出的迷宫

程序猪666

已于 2023-12-07 23:05:21 修改

阅读量35

点赞数

文章标签： json css javascript html5

于 2023-12-07 23:05:03 首次发布

本文链接：https://blog.csdn.net/weixin_47238423/article/details/134867261

版权

你可能走不出的迷宫

https://www.bilibili.com/video/BV1d8411y7ys/?spm_id_from=333.999.0.0

https://v.douyin.com/i8d6yMFV

迷宫游戏的网页应用，使用 HTML、CSS 和 JavaScript 实现。以下是程序的主要部分的解释：

HTML 结构：
- <!DOCTYPE html>: 定义文档类型和版本。
- <html lang="en">: HTML 根元素，指定文档语言为英语。
- <head>: 包含文档的元信息和引用的外部资源。
  - <meta charset="UTF-8">: 指定文档使用 UTF-8 字符集。
  - <meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口的大小和缩放。
  - <title>迷宫游戏</title>: 设置网页标题。
  - <style>: 包含内部样式表，定义页面的样式。
- <body>: 包含页面的实际内容。
CSS 样式：
- 定义了样式规则，包括整体的样式、墙的样式、路的样式、玩家的样式、和一些控制按钮的样式。
- 使用 CSS Grid 布局创建了一个网格，用于显示迷宫和玩家。
JavaScript 代码：
- 在 <script> 标签中包含了 JavaScript 代码。
- 使用 createMaze 函数动态生成迷宫，根据难度和随机性生成墙和通道。
- drawMaze 函数用于绘制迷宫和玩家的位置。
- movePlayer 函数处理玩家的移动，根据按键方向判断是否可以移动，并更新玩家的位置。
- 提供了开始游戏、重新开始游戏、选择难度的按钮，以及显示时间的定时器。
游戏逻辑：
- 玩家使用方向键控制角色移动，目标是走出迷宫。
- 迷宫的墙和通道是随机生成的，通过设置入口和出口确保可通关。
- 游戏中提供了开始游戏、重新开始游戏、选择难度的功能。
- 在玩家成功走出迷宫时，会弹出提示框显示用时。
事件监听：
- 使用事件监听器处理按键事件，实现玩家角色的移动。
- 按钮点击事件监听器用于开始游戏、重新开始游戏、选择难度。
默认启动游戏：
- 在文档加载完成后，默认启动游戏。

这个程序实现了一个简单的迷宫游戏，玩家通过方向键控制角色走出迷宫，游戏提供了选择难度和计时功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>迷宫游戏</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        .game-container {
            display: grid;
            grid-template-columns: repeat(var(--cols, 10), 30px);
            grid-template-rows: repeat(var(--rows, 10), 30px);
            gap: 2px;
            margin: 20px auto;
        }

        /* 墙的样式 */
        .wall {
            width: 30px;
            height: 30px;
            background-color: #ff0000; /* 墙的颜色（红色） */
            border: 2px dashed #777; /* 虚线边框样式 */
        }

        /* 路的样式 */
        .cell {
            width: 30px;
            height: 30px;
            background-color: #fff; /* 路的颜色 */
            border: 1px solid #000; /* 实线边框样式 */
        }

        /* 玩家的样式 */
        .player {
            background-color: #00f; /* 玩家的颜色，可以根据需要更改 */
        }

        .controls {
            margin-top: 20px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
        }

        #timer {
            margin-top: 10px;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="game-container" id="game-container">
        <!-- 迷宫单元格将通过 JavaScript 动态生成 -->
    </div>
    <div class="controls">
        <button id="start-button">开始游戏</button>
        <button id="reset-button">重新开始</button>
        <label for="difficulty-select">选择难度：</label>
        <select id="difficulty-select">
            <option value="easy">简单</option>
            <option value="medium">中等</option>
            <option value="hard">困难</option>
        </select>
        <div id="timer">时间：0秒</div>
    </div>
    <script>
        const gameContainer = document.getElementById('game-container');
        const startButton = document.getElementById('start-button');
        const resetButton = document.getElementById('reset-button');
        const difficultySelect = document.getElementById('difficulty-select');
        const timer = document.getElementById('timer');

        let rows = 10; // 初始行数
        let cols = 10; // 初始列数
        let maze = [];
        let playerPosition = { x: 0, y: 0 };
        let timerInterval;
        let seconds = 0;

        function createMaze(rows, cols) {
            gameContainer.style.setProperty('--rows', rows);
            gameContainer.style.setProperty('--cols', cols);

            maze = Array.from({ length: rows }, () => Array(cols).fill(1));

            // 随机生成迷宫，这里可以使用你喜欢的复杂算法
            // 此处简化为随机生成墙
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    if (Math.random() < 0.3) {
                        maze[i][j] = 0; // 0 表示墙
                    }
                }
            }
            // 设置入口和出口
            maze[0][0] = 1; // 入口
            maze[rows - 1][cols - 1] = 1; // 出口
        }

        function drawMaze() {
            gameContainer.innerHTML = '';
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < cols; j++) {
                    const cell = document.createElement('div');
                    cell.className = maze[i][j] ? 'cell' : 'wall';
                    if (i === playerPosition.x && j === playerPosition.y) {
                        cell.classList.add('player'); // 添加玩家的样式
                    }
                    gameContainer.appendChild(cell);
                }
            }
        }

        function movePlayer(event) {
            if (event.key === 'ArrowRight' && playerPosition.y < cols - 1 && maze[playerPosition.x][playerPosition.y + 1] !== 0) {
                playerPosition.y++;
            } else if (event.key === 'ArrowLeft' && playerPosition.y > 0 && maze[playerPosition.x][playerPosition.y - 1] !== 0) {
                playerPosition.y--;
            } else if (event.key === 'ArrowDown' && playerPosition.x < rows - 1 && maze[playerPosition.x + 1][playerPosition.y] !== 0) {
                playerPosition.x++;
            } else if (event.key === 'ArrowUp' && playerPosition.x > 0 && maze[playerPosition.x - 1][playerPosition.y] !== 0) {
                playerPosition.x--;
            }

            if (playerPosition.x === rows - 1 && playerPosition.y === cols - 1) {
                clearInterval(timerInterval);
                alert(`恭喜！你走出了迷宫，用时 ${seconds} 秒`);
            }
            drawMaze();
        }

        function startGame() {
            seconds = 0;
            timer.textContent = '时间：0秒';
            clearInterval(timerInterval);
            timerInterval = setInterval(() => {
                seconds++;
                timer.textContent = `时间：${seconds}秒`;
            }, 1000);

            createMaze(rows, cols);
            drawMaze();
            playerPosition = { x: 0, y: 0 };

            window.addEventListener('keydown', movePlayer);
        }

        function resetGame() {
            clearInterval(timerInterval);
            timer.textContent = '时间：0秒';
            gameContainer.innerHTML = '';
        }

        startButton.addEventListener('click', startGame);
        resetButton.addEventListener('click', resetGame);

        difficultySelect.addEventListener('change', () => {
            const difficulty = difficultySelect.value;
            switch (difficulty) {
                case 'easy':
                    rows = 10;
                    cols = 10;
                    break;
                case 'medium':
                    rows = 15;
                    cols = 15;
                    break;
                case 'hard':
                    rows = 20;
                    cols = 20;
                    break;
            }
            resetGame();
        });

        // 默认启动游戏
        startGame();
    </script>
</body>
</html>