基于Html+Css+JavaScript设计一个”迷宫大逃杀“小游戏_简单迷宫游戏设计下面是一个基于html、css和javascript的简单迷宫游戏,适合-CSDN博客

本文链接：https://blog.csdn.net/m0_58478371/article/details/146426595

🎓作者简介：程序员转项目管理领域优质创作者

💌个人邮箱：[2707492172@qq.com]

🌐PMP资料导航：PM菜鸟（查阅PMP大纲考点）

💡座右铭：上善若水，水善利万物而不争。

🌐绿泡泡：PM简读馆（包含更多PM常用免费资料）

迷宫大逃杀

HTML ：创建了一个用于显示迷宫的 div 元素和一个用于显示当前关卡信息的 div 元素。
CSS ：对迷宫、墙壁、玩家、目标、敌人和关卡信息的样式进行了设置。
JavaScript ：
- enemies 数组存储了敌人的信息，包括初始位置和移动方向。
- drawMaze 函数在绘制迷宫时，会同时绘制敌人。
- movePlayer 函数处理玩家的移动，并在移动后检查是否到达目标点或与敌人碰撞。
- moveEnemies 函数控制敌人的移动，当敌人碰到墙壁时会改变移动方向。
- checkCollision 函数检查玩家和敌人是否碰撞，如果碰撞则游戏失败。
- resetEnemies 函数用于重置敌人的位置和移动方向。
- resetGame 函数用于重置游戏，包括关卡、玩家位置和敌人信息。
- 使用 setInterval 定时调用 moveEnemies 函数，使敌人定时移动。

你可以根据需要调整敌人的初始位置、移动速度和关卡数量，以增加游戏的难度和趣味性。

原始代码（可直接执行）

<!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 {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #maze {
            display: grid;
            grid-template-columns: repeat(10, 30px);
            grid-template-rows: repeat(10, 30px);
            gap: 1px;
            background-color: #333;
        }

        .cell {
            width: 30px;
            height: 30px;
            background-color: white;
        }

        .wall {
            background-color: black;
        }

        .player {
            background-color: blue;
        }

        .goal {
            background-color: green;
        }

        .enemy {
            background-color: red;
        }

        #level-info {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div id="maze"></div>
    <div id="level-info"></div>
    <script>
        const levels = [
            [
                [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                [1, 0, 0, 0, 1, 0, 0, 0, 0, 1],
                [1, 0, 1, 0, 1, 0, 1, 1, 0, 1],
                [1, 0, 1, 0, 0, 0, 0, 0, 0, 1],
                [1, 0, 1, 1, 1, 1, 1, 1, 0, 1],
                [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
                [1, 1, 1, 1, 1, 1, 0, 1, 1, 1],
                [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
                [1, 0, 1, 1, 1, 1, 1, 1, 0, 1],
                [1, 0, 0, 0, 0, 0, 0, 0, 2, 1],
                [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
            ]
        ];

        let currentLevel = 0;
        const player = {
            x: 1,
            y: 1
        };

        const enemies = [
            {
                x: 3,
                y: 3,
                dx: 1,
                dy: 0
            }
        ];

        const mazeElement = document.getElementById('maze');
        const levelInfoElement = document.getElementById('level-info');

        function drawMaze() {
            const currentMaze = levels[currentLevel];
            mazeElement.innerHTML = '';
            for (let y = 0; y < currentMaze.length; y++) {
                for (let x = 0; x < currentMaze[y].length; x++) {
                    const cell = document.createElement('div');
                    cell.classList.add('cell');
                    if (currentMaze[y][x] === 1) {
                        cell.classList.add('wall');
                    } else if (currentMaze[y][x] === 2) {
                        cell.classList.add('goal');
                    }
                    if (x === player.x && y === player.y) {
                        cell.classList.add('player');
                    }
                    enemies.forEach(enemy => {
                        if (x === enemy.x && y === enemy.y) {
                            cell.classList.add('enemy');
                        }
                    });
                    mazeElement.appendChild(cell);
                }
            }
            levelInfoElement.textContent = `当前关卡: ${currentLevel + 1}`;
        }

        function movePlayer(dx, dy) {
            const currentMaze = levels[currentLevel];
            const newX = player.x + dx;
            const newY = player.y + dy;
            if (currentMaze[newY] && currentMaze[newY][newX]!== 1) {
                player.x = newX;
                player.y = newY;
                drawMaze();
                if (currentMaze[newY][newX] === 2) {
                    if (currentLevel < levels.length - 1) {
                        currentLevel++;
                        player.x = 1;
                        player.y = 1;
                        resetEnemies();
                        drawMaze();
                        alert(`恭喜你通过第 ${currentLevel} 关，进入下一关！`);
                    } else {
                        alert('恭喜你，通关所有关卡！');
                    }
                }
                checkCollision();
            }
        }

        function moveEnemies() {
            enemies.forEach(enemy => {
                const currentMaze = levels[currentLevel];
                const newX = enemy.x + enemy.dx;
                const newY = enemy.y + enemy.dy;
                if (currentMaze[newY] && currentMaze[newY][newX]!== 1) {
                    enemy.x = newX;
                    enemy.y = newY;
                } else {
                    // 碰到墙壁改变方向
                    [enemy.dx, enemy.dy] = [-enemy.dx, -enemy.dy];
                }
            });
            drawMaze();
            checkCollision();
        }

        function checkCollision() {
            enemies.forEach(enemy => {
                if (enemy.x === player.x && enemy.y === player.y) {
                    alert('你被敌人抓住了，游戏失败！');
                    resetGame();
                }
            });
        }

        function resetEnemies() {
            enemies.forEach(enemy => {
                enemy.x = 3;
                enemy.y = 3;
                enemy.dx = 1;
                enemy.dy = 0;
            });
        }

        function resetGame() {
            currentLevel = 0;
            player.x = 1;
            player.y = 1;
            resetEnemies();
            drawMaze();
        }

        document.addEventListener('keydown', function (event) {
            switch (event.key) {
                case 'ArrowUp':
                    movePlayer(0, -1);
                    break;
                case 'ArrowDown':
                    movePlayer(0, 1);
                    break;
                case 'ArrowLeft':
                    movePlayer(-1, 0);
                    break;
                case 'ArrowRight':
                    movePlayer(1, 0);
                    break;
            }
        });

        // 定时移动敌人
        setInterval(moveEnemies, 500);

        drawMaze();
    </script>
</body>

</html>