Spaces:

Aprec
/

test

Running

File size: 28,177 Bytes

5f5a503

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D射击跟枪练习器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/PointerLockControls.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }
        #container {
            position: relative;
            width: 100%;
            height: 100vh;
        }
        #crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            pointer-events: none;
            z-index: 100;
        }
        #ui {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 20px;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 10;
        }
        #start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 200;
            color: white;
        }
        #instructions {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
            z-index: 10;
        }
        .target-hit {
            position: absolute;
            color: red;
            font-size: 24px;
            font-weight: bold;
            animation: fadeOut 1s forwards;
        }
        @keyframes fadeOut {
            to {
                opacity: 0;
                transform: translateY(-50px);
            }
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="crosshair">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <circle cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="2"/>
                <line x1="50" y1="10" x2="50" y2="30" stroke="white" stroke-width="2"/>
                <line x1="50" y1="70" x2="50" y2="90" stroke="white" stroke-width="2"/>
                <line x1="10" y1="50" x2="30" y2="50" stroke="white" stroke-width="2"/>
                <line x1="70" y1="50" x2="90" y2="50" stroke="white" stroke-width="2"/>
            </svg>
        </div>
        
        <div id="ui">
            <div class="flex justify-between">
                <div>
                    <h2 class="text-xl font-bold">3D射击跟枪练习器</h2>
                    <p>提高你的Roblox射击跟枪技巧</p>
                </div>
                <div class="text-right">
                    <p class="text-lg">得分: <span id="score">0</span></p>
                    <p>命中率: <span id="accuracy">0</span>%</p>
                    <p>剩余时间: <span id="time">60</span>秒</p>
                    <p>剩余敌人: <span id="enemies">5</span></p>
                </div>
            </div>
        </div>
        
        <div id="start-screen">
            <h1 class="text-4xl font-bold mb-8">3D射击跟枪练习器</h1>
            <p class="text-xl mb-8">练习你的跟枪技巧，提高Roblox游戏中的表现</p>
            <div class="mb-8">
                <label for="difficulty" class="block mb-2">选择难度:</label>
                <select id="difficulty" class="bg-gray-700 text-white p-2 rounded">
                    <option value="easy">简单</option>
                    <option value="medium" selected>中等</option>
                    <option value="hard">困难</option>
                    <option value="extreme">极限</option>
                </select>
            </div>
            <button id="start-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full text-xl transition duration-300">
                开始练习
            </button>
        </div>

        <div id="instructions">
            <p>WASD: 移动</p>
            <p>鼠标: 瞄准</p>
            <p>左键: 射击</p>
            <p>空格: 跳跃</p>
            <p>Shift: 冲刺</p>
        </div>
    </div>

    <script>
        // 游戏变量
        let scene, camera, renderer, controls;
        let enemies = [];
        let score = 0;
        let shotsFired = 0;
        let hits = 0;
        let gameTime = 60;
        let gameInterval;
        let difficulty = 'medium';
        let gameStarted = false;
        let clock = new THREE.Clock();
        let player, playerVelocity = new THREE.Vector3();
        let playerDirection = new THREE.Vector3();
        let moveForward = false;
        let moveBackward = false;
        let moveLeft = false;
        let moveRight = false;
        let canJump = true;
        let isSprinting = false;
        let pointerLockEnabled = false;
        
        // 初始化Three.js场景
        function init() {
            // 创建场景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x88ccff);
            scene.fog = new THREE.FogExp2(0x88ccff, 0.002);
            
            // 创建相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.y = 1.6;
            
            // 创建渲染器
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('container').prepend(renderer.domElement);
            
            // 添加光线
            const ambientLight = new THREE.AmbientLight(0x404040);
            scene.add(ambientLight);
            
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(1, 1, 1);
            scene.add(directionalLight);
            
            // 添加地面
            const groundGeometry = new THREE.PlaneGeometry(100, 100);
            const groundMaterial = new THREE.MeshStandardMaterial({ 
                color: 0x3a5f0b,
                roughness: 0.8,
                metalness: 0.2
            });
            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
            ground.rotation.x = -Math.PI / 2;
            ground.receiveShadow = true;
            scene.add(ground);
            
            // 添加障碍物
            addObstacles();
            
            // 创建玩家角色
            createPlayer();
            
            // 初始化指针锁定控制
            controls = new THREE.PointerLockControls(camera, document.body);
            
            // 添加事件监听器
            window.addEventListener('resize', onWindowResize);
            document.addEventListener('click', onMouseClick, false);
            document.addEventListener('keydown', onKeyDown);
            document.addEventListener('keyup', onKeyUp);
            
            // 指针锁定状态变化事件
            document.addEventListener('pointerlockchange', onPointerLockChange, false);
            document.addEventListener('mozpointerlockchange', onPointerLockChange, false);
            document.addEventListener('webkitpointerlockchange', onPointerLockChange, false);
            
            // 开始按钮事件
            document.getElementById('start-btn').addEventListener('click', function() {
                // 先请求指针锁定
                const element = document.body;
                element.requestPointerLock = element.requestPointerLock || 
                                            element.mozRequestPointerLock || 
                                            element.webkitRequestPointerLock;
                element.requestPointerLock();
            });
            
            // 难度选择
            document.getElementById('difficulty').addEventListener('change', function(e) {
                difficulty = e.target.value;
            });
            
            // 开始动画循环
            animate();
        }
        
        // 指针锁定状态变化处理
        function onPointerLockChange() {
            pointerLockEnabled = (document.pointerLockElement === document.body || 
                                document.mozPointerLockElement === document.body || 
                                document.webkitPointerLockElement === document.body);
            
            if (pointerLockEnabled && !gameStarted) {
                // 指针锁定成功后开始游戏
                startGame();
            } else if (!pointerLockEnabled && gameStarted) {
                // 指针锁定丢失时暂停游戏
                pauseGame();
            }
        }
        
        // 添加障碍物
        function addObstacles() {
            const boxGeometry = new THREE.BoxGeometry(5, 5, 5);
            const boxMaterial = new THREE.MeshStandardMaterial({ 
                color: 0x8b4513,
                roughness: 0.7,
                metalness: 0.3
            });
            
            // 添加几个箱子作为障碍物
            for (let i = 0; i < 10; i++) {
                const box = new THREE.Mesh(boxGeometry, boxMaterial);
                box.position.x = Math.random() * 80 - 40;
                box.position.z = Math.random() * 80 - 40;
                box.position.y = 2.5;
                box.castShadow = true;
                box.receiveShadow = true;
                scene.add(box);
            }
            
            // 添加一些墙
            const wallGeometry = new THREE.BoxGeometry(1, 3, 20);
            const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x7f7f7f });
            
            for (let i = 0; i < 5; i++) {
                const wall = new THREE.Mesh(wallGeometry, wallMaterial);
                wall.position.x = Math.random() * 60 - 30;
                wall.position.z = Math.random() * 60 - 30;
                wall.position.y = 1.5;
                wall.castShadow = true;
                wall.receiveShadow = true;
                scene.add(wall);
            }
        }
        
        // 创建玩家角色
        function createPlayer() {
            // 简单的玩家表示（只是一个立方体）
            const geometry = new THREE.BoxGeometry(0.5, 1.8, 0.5);
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
            player = new THREE.Mesh(geometry, material);
            player.position.y = 1.8;
            player.visible = false; // 我们不渲染玩家模型，因为它是第一人称视角
            scene.add(player);
        }
        
        // 窗口大小调整
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        // 鼠标点击事件
        function onMouseClick(event) {
            if (!gameStarted || !pointerLockEnabled) return;
            
            // 只在游戏开始且指针锁定状态下处理射击
            if (event.button === 0) { // 左键点击
                shotsFired++;
                updateAccuracy();
                
                // 设置光线投射器
                const raycaster = new THREE.Raycaster();
                raycaster.setFromCamera(new THREE.Vector2(0, 0), camera);
                
                // 检测与敌人的碰撞
                const intersects = raycaster.intersectObjects(enemies);
                
                if (intersects.length > 0) {
                    const enemy = intersects[0].object;
                    
                    // 移除敌人
                    scene.remove(enemy);
                    enemies = enemies.filter(e => e !== enemy);
                    document.getElementById('enemies').textContent = enemies.length;
                    
                    // 增加分数
                    score += 10;
                    document.getElementById('score').textContent = score;
                    
                    // 增加命中数
                    hits++;
                    updateAccuracy();
                    
                    // 显示命中效果
                    showHitEffect();
                    
                    // 检查是否所有敌人都被消灭
                    if (enemies.length === 0) {
                        endGame(true);
                    }
                }
            }
        }
        
        // 显示命中效果
        function showHitEffect() {
            const hitEffect = document.createElement('div');
            hitEffect.className = 'target-hit';
            hitEffect.textContent = '+10';
            hitEffect.style.left = '50%';
            hitEffect.style.top = '50%';
            document.getElementById('container').appendChild(hitEffect);
            
            setTimeout(() => {
                hitEffect.remove();
            }, 1000);
        }
        
        // 更新命中率
        function updateAccuracy() {
            const accuracy = shotsFired > 0 ? Math.round((hits / shotsFired) * 100) : 0;
            document.getElementById('accuracy').textContent = accuracy;
        }
        
        // 键盘按下事件
        function onKeyDown(event) {
            if (!gameStarted || !pointerLockEnabled) return;
            
            switch(event.code) {
                case 'KeyW': moveForward = true; break;
                case 'KeyA': moveLeft = true; break;
                case 'KeyS': moveBackward = true; break;
                case 'KeyD': moveRight = true; break;
                case 'Space': 
                    if (canJump) {
                        playerVelocity.y += 15;
                        canJump = false;
                    }
                    break;
                case 'ShiftLeft':
                    isSprinting = true;
                    break;
                case 'Escape':
                    // ESC键退出指针锁定
                    document.exitPointerLock = document.exitPointerLock || 
                                              document.mozExitPointerLock || 
                                              document.webkitExitPointerLock;
                    document.exitPointerLock();
                    break;
            }
        }
        
        // 键盘释放事件
        function onKeyUp(event) {
            if (!gameStarted || !pointerLockEnabled) return;
            
            switch(event.code) {
                case 'KeyW': moveForward = false; break;
                case 'KeyA': moveLeft = false; break;
                case 'KeyS': moveBackward = false; break;
                case 'KeyD': moveRight = false; break;
                case 'ShiftLeft':
                    isSprinting = false;
                    break;
            }
        }
        
        // 创建敌人
        function createEnemy() {
            const enemyGeometry = new THREE.BoxGeometry(0.8, 1.8, 0.8);
            const enemyMaterial = new THREE.MeshStandardMaterial({ 
                color: 0xff0000,
                roughness: 0.7,
                metalness: 0.3
            });
            const enemy = new THREE.Mesh(enemyGeometry, enemyMaterial);
            
            // 随机位置，但远离玩家
            let x, z;
            do {
                x = (Math.random() * 60) - 30;
                z = (Math.random() * 60) - 30;
            } while (Math.sqrt(x*x + z*z) < 10); // 确保敌人不会生成在玩家附近
            
            enemy.position.set(x, 0.9, z);
            enemy.castShadow = true;
            enemy.receiveShadow = true;
            scene.add(enemy);
            enemies.push(enemy);
            
            // 添加敌人AI行为
            animateEnemy(enemy);
        }
        
        // 敌人AI行为
        function animateEnemy(enemy) {
            let speed = 0.02;
            let directionChangeTime = 0;
            let currentDirection = new THREE.Vector3(
                Math.random() * 2 - 1,
                0,
                Math.random() * 2 - 1
            ).normalize();
            
            // 根据难度调整速度
            switch(difficulty) {
                case 'easy': speed = 0.015; break;
                case 'medium': speed = 0.025; break;
                case 'hard': speed = 0.035; break;
                case 'extreme': speed = 0.045; break;
            }
            
            function move() {
                if (!gameStarted) return;
                
                // 定期改变方向
                directionChangeTime--;
                if (directionChangeTime <= 0) {
                    // 有时会朝玩家移动
                    if (Math.random() > 0.7) {
                        currentDirection = new THREE.Vector3().subVectors(
                            player.position, 
                            enemy.position
                        ).normalize();
                    } else {
                        currentDirection = new THREE.Vector3(
                            Math.random() * 2 - 1,
                            0,
                            Math.random() * 2 - 1
                        ).normalize();
                    }
                    directionChangeTime = 100 + Math.random() * 100;
                }
                
                // 移动敌人
                enemy.position.x += currentDirection.x * speed;
                enemy.position.z += currentDirection.z * speed;
                
                // 确保敌人不会离开地图
                if (enemy.position.x < -45) enemy.position.x = -45;
                if (enemy.position.x > 45) enemy.position.x = 45;
                if (enemy.position.z < -45) enemy.position.z = -45;
                if (enemy.position.z > 45) enemy.position.z = 45;
                
                // 面向玩家
                enemy.lookAt(player.position);
                
                requestAnimationFrame(move);
            }
            
            move();
        }
        
        // 开始游戏
        function startGame() {
            // 重置游戏状态
            score = 0;
            shotsFired = 0;
            hits = 0;
            gameTime = 60;
            gameStarted = true;
            
            // 更新UI
            document.getElementById('score').textContent = score;
            document.getElementById('accuracy').textContent = '0';
            document.getElementById('time').textContent = gameTime;
            
            // 隐藏开始屏幕
            document.getElementById('start-screen').style.display = 'none';
            
            // 清除现有敌人
            enemies.forEach(enemy => scene.remove(enemy));
            enemies = [];
            
            // 创建初始敌人
            const enemyCount = difficulty === 'easy' ? 3 : 
                              difficulty === 'medium' ? 5 : 
                              difficulty === 'hard' ? 7 : 10;
            
            for (let i = 0; i < enemyCount; i++) {
                createEnemy();
            }
            
            document.getElementById('enemies').textContent = enemyCount;
            
            // 重置玩家位置
            player.position.set(0, 1.8, 0);
            controls.getObject().position.set(0, 1.6, 0);
            controls.getObject().rotation.set(0, 0, 0);
            
            // 开始计时器
            gameInterval = setInterval(() => {
                gameTime--;
                document.getElementById('time').textContent = gameTime;
                
                if (gameTime <= 0) {
                    endGame(false);
                }
            }, 1000);
        }
        
        // 暂停游戏
        function pauseGame() {
            // 显示开始屏幕
            const startScreen = document.getElementById('start-screen');
            startScreen.style.display = 'flex';
            
            // 更新结果
            const accuracy = shotsFired > 0 ? Math.round((hits / shotsFired) * 100) : 0;
            startScreen.innerHTML = `
                <h1 class="text-4xl font-bold mb-8">游戏暂停</h1>
                <div class="text-xl mb-8">
                    <p>当前得分: ${score}</p>
                    <p>命中率: ${accuracy}%</p>
                    <p>总射击次数: ${shotsFired}</p>
                    <p>命中次数: ${hits}</p>
                    <p>剩余敌人: ${enemies.length}</p>
                </div>
                <div class="mb-8">
                    <label for="difficulty" class="block mb-2">选择难度:</label>
                    <select id="difficulty" class="bg-gray-700 text-white p-2 rounded">
                        <option value="easy">简单</option>
                        <option value="medium" selected>中等</option>
                        <option value="hard">困难</option>
                        <option value="extreme">极限</option>
                    </select>
                </div>
                <button id="start-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full text-xl transition duration-300">
                    继续游戏
                </button>
            `;
            
            // 重新添加事件监听器
            document.getElementById('start-btn').addEventListener('click', function() {
                // 重新请求指针锁定
                const element = document.body;
                element.requestPointerLock = element.requestPointerLock || 
                                            element.mozRequestPointerLock || 
                                            element.webkitRequestPointerLock;
                element.requestPointerLock();
            });
            
            document.getElementById('difficulty').addEventListener('change', function(e) {
                difficulty = e.target.value;
            });
        }
        
        // 结束游戏
        function endGame(win) {
            gameStarted = false;
            clearInterval(gameInterval);
            
            // 解锁指针
            document.exitPointerLock = document.exitPointerLock || 
                                      document.mozExitPointerLock || 
                                      document.webkitExitPointerLock;
            document.exitPointerLock();
            
            // 显示开始屏幕
            const startScreen = document.getElementById('start-screen');
            startScreen.style.display = 'flex';
            
            // 更新结果
            const accuracy = shotsFired > 0 ? Math.round((hits / shotsFired) * 100) : 0;
            startScreen.innerHTML = `
                <h1 class="text-4xl font-bold mb-8">${win ? '胜利!' : '游戏结束'}</h1>
                <div class="text-xl mb-8">
                    <p>最终得分: ${score}</p>
                    <p>命中率: ${accuracy}%</p>
                    <p>总射击次数: ${shotsFired}</p>
                    <p>命中次数: ${hits}</p>
                    <p>剩余敌人: ${enemies.length}</p>
                </div>
                <div class="mb-8">
                    <label for="difficulty" class="block mb-2">选择难度:</label>
                    <select id="difficulty" class="bg-gray-700 text-white p-2 rounded">
                        <option value="easy">简单</option>
                        <option value="medium" selected>中等</option>
                        <option value="hard">困难</option>
                        <option value="extreme">极限</option>
                    </select>
                </div>
                <button id="start-btn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-full text-xl transition duration-300">
                    再玩一次
                </button>
            `;
            
            // 重新添加事件监听器
            document.getElementById('start-btn').addEventListener('click', function() {
                // 重新请求指针锁定
                const element = document.body;
                element.requestPointerLock = element.requestPointerLock || 
                                            element.mozRequestPointerLock || 
                                            element.webkitRequestPointerLock;
                element.requestPointerLock();
            });
            
            document.getElementById('difficulty').addEventListener('change', function(e) {
                difficulty = e.target.value;
            });
        }
        
        // 动画循环
        function animate() {
            requestAnimationFrame(animate);
            
            const delta = clock.getDelta();
            
            if (controls.isLocked && gameStarted) {
                // 玩家移动
                const speed = isSprinting ? 30 : 15;
                
                playerVelocity.x -= playerVelocity.x * 10.0 * delta;
                playerVelocity.z -= playerVelocity.z * 10.0 * delta;
                
                playerDirection.z = Number(moveForward) - Number(moveBackward);
                playerDirection.x = Number(moveRight) - Number(moveLeft);
                playerDirection.normalize();
                
                if (moveForward || moveBackward) playerVelocity.z -= playerDirection.z * speed * delta;
                if (moveLeft || moveRight) playerVelocity.x -= playerDirection.x * speed * delta;
                
                // 应用重力
                playerVelocity.y -= 9.8 * delta;
                
                // 更新玩家位置
                controls.moveRight(-playerVelocity.x * delta);
                controls.moveForward(-playerVelocity.z * delta);
                controls.getObject().position.y += playerVelocity.y * delta;
                
                // 确保玩家不会掉出地图
                if (controls.getObject().position.y < 1.6) {
                    playerVelocity.y = 0;
                    controls.getObject().position.y = 1.6;
                    canJump = true;
                }
                
                // 确保玩家不会离开地图
                const pos = controls.getObject().position;
                if (pos.x < -45) pos.x = -45;
                if (pos.x > 45) pos.x = 45;
                if (pos.z < -45) pos.z = -45;
                if (pos.z > 45) pos.z = 45;
                
                // 更新玩家模型位置（用于敌人AI）
                player.position.copy(controls.getObject().position);
                player.position.y += 0.2; // 调整高度差
            }
            
            renderer.render(scene, camera);
        }
        
        // 初始化游戏
        init();
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=Aprec/test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>