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">使用方向键移动，到达右下角出口获胜</div>
    <div id="timer">60</div>
    <div id="result"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.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; // 30%概率生成墙
                }
            }
        }
        // 设置入口和出口
        maze[1][1] = 0; // 入口
  // 修改出口位置到顶部中间
        maze[mazeSize/2][1] = 0;
        maze[mazeSize/2][0] = 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, 0.5, j);
                    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(mazeSize/2 - 0.5, 0, mazeSize/2 - 0.5);
        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(mazeSize/2, 0.3, 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, 0.3, z);
            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.PointLight(0xffffff, 1, 100);
        light.position.set(mazeSize/2, 10, mazeSize/2);
        scene.add(light);
        scene.add(new THREE.AmbientLight(0x404040)).........完整代码请登录后点击上方下载按钮下载查看