Spaces:

satana123
/

3-3

Running

App Files Files Community

satana123 commited on Oct 22, 2025

Commit

bca5fa3

verified ·

1 Parent(s): 457eb5a

Красивый 3д симулятор ходьбы от 3 лица как в gta 5

Browse files

Files changed (4) hide show

README.md +8 -5
index.html +97 -19
script.js +315 -0
style.css +76 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: 3 3
-emoji: 🦀
-colorFrom: indigo
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ---------3----------------------3-------
+colorFrom: purple
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,97 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Walker Simulator</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+</head>
+<body class="bg-black text-white overflow-hidden">
+    <!-- Loading Screen -->
+    <div id="loadingScreen" class="fixed inset-0 bg-gradient-to-b from-gray-900 to-black z-50 flex items-center justify-center">
+        <div class="text-center">
+            <div class="mb-8">
+                <div class="w-32 h-32 mx-auto border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <h1 class="text-4xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">3D Walker Simulator</h1>
+            <p class="text-gray-400">Loading world...</p>
+        </div>
+    </div>
+    <!-- Game Canvas -->
+    <canvas id="gameCanvas" class="fixed inset-0"></canvas>
+    <!-- HUD Overlay -->
+    <div id="hud" class="fixed inset-0 pointer-events-none hidden">
+        <!-- Crosshair -->
+        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            <div class="w-4 h-4 border-2 border-white/50 rounded-full"></div>
+        </div>
+        <!-- Mini Map -->
+        <div class="absolute top-4 right-4 w-48 h-48 bg-black/50 backdrop-blur-sm rounded-lg border border-white/20 p-2">
+            <canvas id="miniMap" class="w-full h-full rounded"></canvas>
+        </div>
+        <!-- Stats Panel -->
+        <div class="absolute top-4 left-4 bg-black/50 backdrop-blur-sm rounded-lg border border-white/20 p-4">
+            <div class="flex items-center gap-2 mb-2">
+                <i data-feather="map-pin" class="w-4 h-4 text-green-400"></i>
+                <span class="text-sm">Position: <span id="position">0, 0</span></span>
+            </div>
+            <div class="flex items-center gap-2 mb-2">
+                <i data-feather="trending-up" class="w-4 h-4 text-blue-400"></i>
+                <span class="text-sm">Speed: <span id="speed">0</span> km/h</span>
+            </div>
+            <div class="flex items-center gap-2">
+                <i data-feather="clock" class="w-4 h-4 text-yellow-400"></i>
+                <span class="text-sm">Time: <span id="gameTime">12:00</span></span>
+            </div>
+        </div>
+        <!-- Controls Help -->
+        <div class="absolute bottom-4 left-4 bg-black/50 backdrop-blur-sm rounded-lg border border-white/20 p-4">
+            <h3 class="font-semibold mb-2 text-sm">Controls</h3>
+            <div class="text-xs space-y-1 text-gray-300">
+                <div><kbd class="px-1 py-0.5 bg-gray-700 rounded">W A S D</kbd> Move</div>
+                <div><kbd class="px-1 py-0.5 bg-gray-700 rounded">Mouse</kbd> Look Around</div>
+                <div><kbd class="px-1 py-0.5 bg-gray-700 rounded">Shift</kbd> Run</div>
+                <div><kbd class="px-1 py-0.5 bg-gray-700 rounded">Space</kbd> Jump</div>
+            </div>
+        </div>
+        <!-- Action Buttons -->
+        <div class="absolute bottom-4 right-4 pointer-events-auto">
+            <button id="toggleMusic" class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-lg flex items-center gap-2 transition-colors mb-2">
+                <i data-feather="volume-2" class="w-4 h-4"></i>
+                <span>Music</span>
+            </button>
+            <button id="togglePause" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg flex items-center gap-2 transition-colors">
+                <i data-feather="pause" class="w-4 h-4"></i>
+                <span>Pause</span>
+            </button>
+        </div>
+    </div>
+    <!-- Start Screen -->
+    <div id="startScreen" class="fixed inset-0 bg-gradient-to-b from-gray-900 to-black z-40 flex items-center justify-center">
+        <div class="text-center max-w-2xl px-8">
+            <h1 class="text-6xl font-bold mb-4 bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">3D Walker Simulator</h1>
+            <p class="text-xl text-gray-400 mb-8">Explore the open world in third person</p>
+            <button id="startButton" class="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 px-8 py-4 rounded-lg text-xl font-semibold transition-all transform hover:scale-105">
+                Start Walking
+            </button>
+        </div>
+    </div>
+    <script src="style.css"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,315 @@

+// Game State
+let scene, camera, renderer;
+let player, playerModel;
+let moveSpeed = 0.1;
+let runSpeed = 0.2;
+let jumpHeight = 0.3;
+let isJumping = false;
+let velocity = { x: 0, y: 0, z: 0 };
+let keys = {};
+let mouseX = 0, mouseY = 0;
+let isPaused = false;
+let gameStartTime = Date.now();
+let buildings = [];
+let ground;
+let clock = new THREE.Clock();
+// Initialize Game
+function init() {
+    // Create Scene
+    scene = new THREE.Scene();
+    scene.fog = new THREE.Fog(0x87CEEB, 10, 100);
+    scene.background = new THREE.Color(0x87CEEB);
+    // Setup Camera
+    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.set(0, 5, 10);
+    // Setup Renderer
+    renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById('gameCanvas'),
+        antialias: true
+    });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.shadowMap.enabled = true;
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+    // Create Lighting
+    setupLighting();
+    // Create World
+    createGround();
+    createBuildings();
+    createPlayer();
+    // Setup Controls
+    setupControls();
+    // Start Game Loop
+    animate();
+    // Hide Loading Screen
+    setTimeout(() => {
+        document.getElementById('loadingScreen').style.display = 'none';
+    }, 2000);
+}
+function setupLighting() {
+    // Ambient Light
+    const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
+    scene.add(ambientLight);
+    // Directional Light (Sun)
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(50, 100, 50);
+    directionalLight.castShadow = true;
+    directionalLight.shadow.camera.left = -50;
+    directionalLight.shadow.camera.right = 50;
+    directionalLight.shadow.camera.top = 50;
+    directionalLight.shadow.camera.bottom = -50;
+    directionalLight.shadow.camera.near = 0.1;
+    directionalLight.shadow.camera.far = 200;
+    directionalLight.shadow.mapSize.width = 2048;
+    directionalLight.shadow.mapSize.height = 2048;
+    scene.add(directionalLight);
+}
+function createGround() {
+    const groundGeometry = new THREE.PlaneGeometry(200, 200);
+    const groundMaterial = new THREE.MeshLambertMaterial({
+        color: 0x3a5f3a,
+        side: THREE.DoubleSide
+    });
+    ground = new THREE.Mesh(groundGeometry, groundMaterial);
+    ground.rotation.x = -Math.PI / 2;
+    ground.receiveShadow = true;
+    scene.add(ground);
+    // Add road
+    const roadGeometry = new THREE.PlaneGeometry(10, 200);
+    const roadMaterial = new THREE.MeshLambertMaterial({ color: 0x333333 });
+    const road = new THREE.Mesh(roadGeometry, roadMaterial);
+    road.rotation.x = -Math.PI / 2;
+    road.position.y = 0.01;
+    road.receiveShadow = true;
+    scene.add(road);
+}
+function createBuildings() {
+    const buildingPositions = [
+        { x: -20, z: -20, height: 30, width: 10, depth: 10 },
+        { x: 20, z: -20, height: 25, width: 12, depth: 8 },
+        { x: -20, z: 20, height: 35, width: 8, depth: 12 },
+        { x: 20, z: 20, height: 40, width: 15, depth: 10 },
+        { x: -40, z: 0, height: 20, width: 10, depth: 10 },
+        { x: 40, z: 0, height: 28, width: 10, depth: 10 },
+        { x: 0, z: -40, height: 32, width: 12, depth: 12 },
+        { x: 0, z: 40, height: 24, width: 10, depth: 10 }
+    ];
+    buildingPositions.forEach(pos => {
+        const buildingGeometry = new THREE.BoxGeometry(pos.width, pos.height, pos.depth);
+        const buildingMaterial = new THREE.MeshLambertMaterial({
+            color: new THREE.Color().setHSL(Math.random() * 0.1 + 0.5, 0.5, 0.6)
+        });
+        const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
+        building.position.set(pos.x, pos.height / 2, pos.z);
+        building.castShadow = true;
+        building.receiveShadow = true;
+        buildings.push(building);
+        scene.add(building);
+    });
+}
+function createPlayer() {
+    // Player group
+    player = new THREE.Group();
+    // Body
+    const bodyGeometry = new THREE.CapsuleGeometry(0.5, 1.5, 4, 8);
+    const bodyMaterial = new THREE.MeshLambertMaterial({ color: 0x4169e1 });
+    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+    body.position.y = 1.5;
+    body.castShadow = true;
+    player.add(body);
+    // Head
+    const headGeometry = new THREE.SphereGeometry(0.3, 16, 16);
+    const headMaterial = new THREE.MeshLambertMaterial({ color: 0xffdbac });
+    const head = new THREE.Mesh(headGeometry, headMaterial);
+    head.position.y = 2.7;
+    head.castShadow = true;
+    player.add(head);
+    player.position.set(0, 0, 0);
+    playerModel = player;
+    scene.add(player);
+}
+function setupControls() {
+    // Keyboard controls
+    document.addEventListener('keydown', (event) => {
+        keys[event.code] = true;
+        if (event.code === 'Space' && !isJumping) {
+            velocity.y = jumpHeight;
+            isJumping = true;
+        }
+    });
+    document.addEventListener('keyup', (event) => {
+        keys[event.code] = false;
+    });
+    // Mouse controls
+    document.addEventListener('mousemove', (event) => {
+        mouseX = (event.clientX / window.innerWidth) * 2 - 1;
+        mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
+    });
+    // Window resize
+    window.addEventListener('resize', () => {
+        camera.aspect = window.innerWidth / window.innerHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+    // UI Controls
+    document.getElementById('startButton').addEventListener('click', () => {
+        document.getElementById('startScreen').style.display = 'none';
+        document.getElementById('hud').classList.remove('hidden');
+        document.body.requestPointerLock();
+    });
+    document.getElementById('togglePause').addEventListener('click', () => {
+        isPaused = !isPaused;
+        const btn = document.getElementById('togglePause');
+        btn.innerHTML = isPaused ?
+            '<i data-feather="play" class="w-4 h-4"></i><span>Resume</span>' :
+            '<i data-feather="pause" class="w-4 h-4"></i><span>Pause</span>';
+        feather.replace();
+    });
+}
+function updatePlayer() {
+    if (isPaused) return;
+    const speed = keys['ShiftLeft'] ? runSpeed : moveSpeed;
+    const moveVector = new THREE.Vector3();
+    // Calculate movement
+    if (keys['KeyW']) moveVector.z -= speed;
+    if (keys['KeyS']) moveVector.z += speed;
+    if (keys['KeyA']) moveVector.x -= speed;
+    if (keys['KeyD']) moveVector.x += speed;
+    // Apply movement relative to camera direction
+    const angle = camera.rotation.y;
+    const rotatedVector = moveVector.applyAxisAngle(new THREE.Vector3(0, 1, 0), angle);
+    player.position.x += rotatedVector.x;
+    player.position.z += rotatedVector.z;
+    // Apply gravity
+    velocity.y -= 0.015;
+    player.position.y += velocity.y;
+    // Ground collision
+    if (player.position.y <= 0) {
+        player.position.y = 0;
+        velocity.y = 0;
+        isJumping = false;
+    }
+    // Building collision (simple)
+    buildings.forEach(building => {
+        const distance = player.position.distanceTo(building.position);
+        const minDistance = 5; // Simple collision radius
+        if (distance < minDistance) {
+            const direction = new THREE.Vector3()
+                .subVectors(player.position, building.position)
+                .normalize();
+            player.position.copy(building.position).add(direction.multiplyScalar(minDistance));
+        }
+    });
+    // Update camera to follow player
+    const cameraOffset = new THREE.Vector3(0, 5, 10);
+    cameraOffset.applyAxisAngle(new THREE.Vector3(0, 1, 0), angle);
+    camera.position.copy(player.position).add(cameraOffset);
+    camera.lookAt(player.position);
+    // Camera rotation with mouse
+    camera.rotation.y = mouseX * Math.PI;
+    camera.rotation.x = mouseY * Math.PI / 4;
+    // Update HUD
+    updateHUD();
+}
+function updateHUD() {
+    // Position
+    document.getElementById('position').textContent =
+        `${Math.round(player.position.x)}, ${Math.round(player.position.z)}`;
+    // Speed
+    const currentSpeed = Math.sqrt(velocity.x ** 2 + velocity.z ** 2) * 100;
+    document.getElementById('speed').textContent = Math.round(currentSpeed);
+    // Game Time
+    const elapsed = Date.now() - gameStartTime;
+    const minutes = Math.floor(elapsed / 60000);
+    const seconds = Math.floor((elapsed % 60000) / 1000);
+    document.getElementById('gameTime').textContent =
+        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    // Update mini map
+    updateMiniMap();
+}
+function updateMiniMap() {
+    const canvas = document.getElementById('miniMap');
+    const ctx = canvas.getContext('2d');
+    canvas.width = 192;
+    canvas.height = 192;
+    // Clear
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, 192, 192);
+    // Draw player position
+    const mapX = (player.position.x + 100) * 0.96;
+    const mapZ = (player.position.z + 100) * 0.96;
+    ctx.fillStyle = '#4ade80';
+    ctx.beginPath();
+    ctx.arc(mapX, mapZ, 3, 0, Math.PI * 2);
+    ctx.fill();
+    // Draw buildings on map
+    ctx.fillStyle = '#6b7280';
+    buildings.forEach(building => {
+        const bX = (building.position.x + 100) * 0.96;
+        const bZ = (building.position.z + 100) * 0.96;
+        ctx.fillRect(bX - 5, bZ - 5, 10, 10);
+    });
+}
+function animate() {
+    requestAnimationFrame(animate);
+    if (!isPaused) {
+        updatePlayer();
+        // Animate player model (simple bobbing)
+        if (keys['KeyW'] || keys['KeyS'] || keys['KeyA'] || keys['KeyD']) {
+            player.rotation.y = camera.rotation.y;
+            player.position.y = Math.sin(Date.now() * 0.01) * 0.05;
+        }
+    }
+    renderer.render(scene, camera);
+}
+// Start the game when page loads
+window.addEventListener('load', init);

style.css CHANGED Viewed

@@ -1,28 +1,86 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Global Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
 body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    cursor: crosshair;
+}
+/* Canvas Styles */
+#gameCanvas {
+    display: block;
+    width: 100vw;
+    height: 100vh;
+}
+/* Loading Animation */
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+/* HUD Elements */
+.backdrop-blur-sm {
+    backdrop-filter: blur(4px);
+}
+/* Keyboard Key Style */
+kbd {
+    font-family: monospace;
+    font-size: 0.75em;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.25rem;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: rgba(255, 255, 255, 0.9);
 }
+/* Smooth Transitions */
+.transition-all {
+    transition: all 0.3s ease;
 }
+.transition-colors {
+    transition: color 0.3s ease, background-color 0.3s ease;
 }
+/* Gradient Text */
+.bg-clip-text {
+    -webkit-background-clip: text;
+    background-clip: text;
 }
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1);
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.3);
+}
+/* Performance Optimizations */
+.will-change-transform {
+    will-change: transform;
+}
+.hardware-accelerated {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+}