three实现三维可旋转交互迷宫小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：three实现三维可旋转交互迷宫小游戏代码，三维迷宫里用户可用键盘上下左右键移动迷宫内的物体，迷宫内还有随机的红色怪兽，要避开怪兽，找到出口算赢，一旦遇到怪兽被吃就算输，时间1分钟内。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
          <meta charset="UTF-8">
    <title>3D Maze Game</title>
    <style>
        body { 
            margin: 0;
            overflow: hidden; /* 禁止滚动条 */
        }
        canvas { display: block; }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial;
            font-size: 16px;
        }
        #timer {
            position: absolute;
            top: 10px;
            right: 10px;
            color: white;
            font-family: Arial;
            font-size: 16px;
        }
        #result {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-family: Arial;
            font-size: 32px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="info">使用方向键移动，到达右下角出口获胜<br>移动鼠标调整视角</div>
    <div id="timer">60</div>
    <div id="result"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 迷宫设计
        const mazeSize = 12;
        const maze = [];
        for(let i = 0; i < mazeSize; i++) {
            maze[i] = [];
            for(let j = 0; j < mazeSize; j++) {
                if(i === 0 || i === mazeSize-1 || j === 0 || j === mazeSize-1) {
                    maze[i][j] = 1;
                } else {
                    maze[i][j] = Math.random() < 0.3 ? 1 : 0;
                }
            }
        }
   // 修改迷宫设计，设置起点和终点
        maze[mazeSize-2][Math.floor(mazeSize/2)] = 0; // 底部中间起点
        maze[1][Math.floor(mazeSize/2)] = 0; // 顶部中间终点
        maze[0][Math.floor(mazeSize/2)] = 0; // 开放顶部出口

        // 修改玩家初始位置到底部中间


        // 创建墙壁
        const wallGeometry = new THREE.BoxGeometry(1, 1, 1);
        const wallMaterial = new THREE.MeshPhongMaterial({ color: 0x808080 });
        
        for(let i = 0; i < mazeSize; i++) {
            for(let j = 0; j < mazeSize; j++) {
                if(maze[i][j] === 1) {
                    const wall = new THREE.Mesh(wallGeometry, wallMaterial);
                    wall.position.set(i - mazeSize/2, 0.5, j - mazeSize/2);
                    scene.add(wall);
                }
            }
        }

        // 创建地板
        const floorGeometry = new THREE.PlaneGeometry(mazeSize, mazeSize);
        const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x404040 });
        const floor = new THREE.Mesh(floorGeometry, floorMaterial);
        floor.rotation.x = -Math.PI / 2;
        floor.position.set(0, 0, 0);
        scene.add(floor);

        // 创建玩家
        const playerGeometry = new THREE.SphereGeometry(0.3);
        const playerMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
        const player = new THREE.Mesh(playerGeometry, playerMaterial);
               player.position.set(Math.floor(mazeSize/2) - mazeSize/2, 0.3, (mazeSize-2) - mazeSize/2);
        scene.add(player);

        // 创建怪物
        const monsters = [];
        const monsterGeometry = new THREE.SphereGeometry(0.3);
        const monsterMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });
        
        for(let i = 0; i < 4; i++) {
            let x, z;
            do {
                x = Math.floor(Math.random() * (mazeSize-2)) + 1;
                z = Math.floor(Math.random() * (mazeSize-2)) + 1;
            } while(maze[x][z] === 1 || (x === 1 && z === 1));

            const monster = new THREE.Mesh(monsterGeometry, monsterMaterial);
            monster.position.set(x - mazeSize/2, 0.3, z - mazeSize/2);
            scene.add(monster);
            monsters.push({
                mesh: monster,
                direction: new THREE.Vector3(
                    Math.random() * 2 - 1,
                    0,
                    Math.random() * 2 - 1
                ).normalize(),
                speed: 0.03
            });
        }

        // 添加光源
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(0, 10, 0);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040));

        // 初始相机位置
        camera.position.set(0, 15, 0);
        camera.lookAt(0, 0, 0);

        // 鼠标控制相机
        let mouseX = 0;
        let mouseY = 0;
        let targetRotationX = 0;
        let targetRotationY = Math.PI/4; // 初始俯角

        document.addEventListener('mousemove', (event) => {
            mouseX = (event.clientX - window.innerWidth/2) / 100;
            mouseY = (event.clientY - window.innerHeigh.........完整代码请登录后点击上方下载按钮下载查看