Hugging Face's logo

Spaces:
Aprec
/
test
Running

App Files Community
test / index.html
Aprec's picture
Aprec
Add 2 files
5f5a503 verified
raw
history blame contribute delete
28.2 kB
<!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>