Spaces:

zdwalter
/

3d-car-game

Running

App Files Files Community

zdwalter commited on Mar 31, 2025

Commit

78bd595

verified ·

1 Parent(s): 24c839a

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +648 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: 3d Car Game
-emoji: 📈
-colorFrom: gray
 colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: 3d-car-game
+emoji: 🐳
+colorFrom: blue
 colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,648 @@
-<!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 Racing Game</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Arial', sans-serif;
+            color: white;
+            background-color: #111;
+        }
+        #game-container {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+        }
+        #info {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            z-index: 10;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 10px;
+            border-radius: 5px;
+        }
+        #start-screen {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            background-color: rgba(0, 0, 0, 0.8);
+            padding: 30px;
+            border-radius: 10px;
+            z-index: 100;
+        }
+        #game-over {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            text-align: center;
+            background-color: rgba(0, 0, 0, 0.9);
+            padding: 30px;
+            border-radius: 10px;
+            z-index: 100;
+            display: none;
+        }
+        button {
+            background-color: #f1c40f;
+            color: #111;
+            border: none;
+            padding: 10px 20px;
+            margin-top: 15px;
+            font-size: 18px;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background-color: #f39c12;
+        }
+        h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            color: #f1c40f;
+            text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
+        }
+        h2 {
+            font-size: 1.8em;
+            margin-bottom: 20px;
+        }
+        #controls {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            z-index: 10;
+            background-color: rgba(0, 0, 0, 0.5);
+            padding: 10px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="info">
+            <p>Speed: <span id="speed">0</span> km/h</p>
+            <p>Score: <span id="score">0</span></p>
+            <p>Time: <span id="time">0</span>s</p>
+        </div>
+        <div id="start-screen">
+            <h1>3D RACING GAME</h1>
+            <p>Race through the city streets and avoid obstacles!</p>
+            <p>Collect coins to increase your score.</p>
+            <button id="start-btn">START RACE</button>
+        </div>
+        <div id="game-over">
+            <h1>GAME OVER</h1>
+            <p>Final Score: <span id="final-score">0</span></p>
+            <p>Time Survived: <span id="final-time">0</span>s</p>
+            <button id="restart-btn">PLAY AGAIN</button>
+        </div>
+        <div id="controls">
+            <p>Controls: WASD or Arrow Keys to drive</p>
+            <p>Space to brake</p>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // Game variables
+        let scene, camera, renderer;
+        let car, roadSegments = [], coins = [], obstacles = [];
+        let isGameRunning = false;
+        let score = 0;
+        let gameTime = 0;
+        let carSpeed = 0;
+        let maxSpeed = 100;
+        let acceleration = 0.5;
+        let deceleration = 0.3;
+        let rotationSpeed = 0.05;
+        let keys = {};
+        let distanceTraveled = 0;
+        // Initialize the game
+        function init() {
+            // Set up scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87CEEB); // Sky blue
+            // Set up camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 10, 15);
+            camera.lookAt(0, 0, 0);
+            // Set up renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            document.getElementById('game-container').prepend(renderer.domElement);
+            // Add lighting
+            const ambientLight = new THREE.AmbientLight(0x404040);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+            directionalLight.position.set(1, 1, 1);
+            directionalLight.castShadow = true;
+            scene.add(directionalLight);
+            // Create initial road segments
+            createInitialRoad();
+            // Create car
+            createCar();
+            // Add event listeners
+            window.addEventListener('resize', onWindowResize);
+            window.addEventListener('keydown', onKeyDown);
+            window.addEventListener('keyup', onKeyUp);
+            // Start screen buttons
+            document.getElementById('start-btn').addEventListener('click', startGame);
+            document.getElementById('restart-btn').addEventListener('click', restartGame);
+            animate();
+        }
+        function createInitialRoad() {
+            const segmentLength = 50;
+            const segmentWidth = 20;
+            // Create 10 road segments ahead
+            for (let i = 0; i < 10; i++) {
+                createRoadSegment(i * segmentLength);
+            }
+        }
+        function createRoadSegment(zPosition) {
+            const segmentLength = 50;
+            const segmentWidth = 20;
+            // Road surface
+            const roadGeometry = new THREE.PlaneGeometry(segmentWidth, segmentLength);
+            roadGeometry.rotateX(-Math.PI / 2);
+            const roadMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
+            const roadSegment = new THREE.Mesh(roadGeometry, roadMaterial);
+            roadSegment.position.z = zPosition;
+            roadSegment.receiveShadow = true;
+            scene.add(roadSegment);
+            // Road markings (center lines)
+            const lineLength = 3;
+            const lineGap = 3;
+            const lineCount = Math.floor(segmentLength / (lineLength + lineGap));
+            for (let i = 0; i < lineCount; i++) {
+                const lineGeometry = new THREE.BoxGeometry(0.5, 0.1, lineLength);
+                const lineMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00 });
+                const line = new THREE.Mesh(lineGeometry, lineMaterial);
+                line.position.set(0, 0.1, zPosition - (segmentLength/2) + (i * (lineLength + lineGap)) + lineLength/2);
+                line.receiveShadow = true;
+                scene.add(line);
+            }
+            // Sidewalks
+            const sidewalkGeometry = new THREE.BoxGeometry(segmentWidth, 0.2, segmentLength);
+            const sidewalkMaterial = new THREE.MeshStandardMaterial({ color: 0x555555 });
+            const leftSidewalk = new THREE.Mesh(sidewalkGeometry, sidewalkMaterial);
+            leftSidewalk.position.set(0, 0.2, zPosition);
+            leftSidewalk.scale.set(1, 1, 1.02); // Slightly longer to avoid gaps
+            scene.add(leftSidewalk);
+            const rightSidewalk = new THREE.Mesh(sidewalkGeometry, sidewalkMaterial);
+            rightSidewalk.position.set(0, 0.2, zPosition);
+            rightSidewalk.scale.set(1, 1, 1.02); // Slightly longer to avoid gaps
+            scene.add(rightSidewalk);
+            // Buildings (randomly placed)
+            const buildingCount = 2 + Math.floor(Math.random() * 3);
+            for (let i = 0; i < buildingCount; i++) {
+                // Left side buildings
+                if (Math.random() > 0.3) {
+                    const leftBuilding = createBuilding(4 + Math.random() * 4, 15 + Math.random() * 10, false);
+                    leftBuilding.position.set(
+                        -15 - Math.random() * 5,
+                        leftBuilding.geometry.parameters.height / 2,
+                        zPosition - (segmentLength/2) + Math.random() * segmentLength
+                    );
+                    scene.add(leftBuilding);
+                }
+                // Right side buildings
+                if (Math.random() > 0.3) {
+                    const rightBuilding = createBuilding(4 + Math.random() * 4, 15 + Math.random() * 10, false);
+                    rightBuilding.position.set(
+                        15 + Math.random() * 5,
+                        rightBuilding.geometry.parameters.height / 2,
+                        zPosition - (segmentLength/2) + Math.random() * segmentLength
+                    );
+                    scene.add(rightBuilding);
+                }
+            }
+            roadSegments.push({
+                mesh: roadSegment,
+                zStart: zPosition - segmentLength/2,
+                zEnd: zPosition + segmentLength/2,
+                leftSidewalk: leftSidewalk,
+                rightSidewalk: rightSidewalk
+            });
+        }
+        function createBuilding(width, height, hasWindows = true) {
+            const buildingGeometry = new THREE.BoxGeometry(width, height, width);
+            let buildingMaterial;
+            if (hasWindows) {
+                const colors = [0x3498db, 0x2ecc71, 0xe74c3c, 0xf39c12];
+                buildingMaterial = new THREE.MeshStandardMaterial({
+                    color: colors[Math.floor(Math.random() * colors.length)],
+                    roughness: 0.7,
+                    metalness: 0.1
+                });
+            } else {
+                buildingMaterial = new THREE.MeshStandardMaterial({ color: 0x7f8c8d });
+            }
+            const building = new THREE.Mesh(buildingGeometry, buildingMaterial);
+            building.castShadow = true;
+            building.receiveShadow = true;
+            return building;
+        }
+        function createCar() {
+            const carGeometry = new THREE.BoxGeometry(2, 1, 3);
+            const carMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
+            car = new THREE.Mesh(carGeometry, carMaterial);
+            car.position.set(0, 1, 0);
+            car.castShadow = true;
+            car.receiveShadow = true;
+            scene.add(car);
+            // Add windows
+            const windowGeometry = new THREE.BoxGeometry(1.8, 0.8, 2.8);
+            const windowMaterial = new THREE.MeshStandardMaterial({
+                color: 0x000000,
+                transparent: true,
+                opacity: 0.5,
+                metalness: 0.7,
+                roughness: 0.2
+            });
+            const windows = new THREE.Mesh(windowGeometry, windowMaterial);
+            windows.position.y = 0.5;
+            car.add(windows);
+            // Add wheel positions (visual only)
+            const wheelGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.2, 16);
+            const wheelMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
+            // Front wheels
+            const frontLeftWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
+            frontLeftWheel.rotation.z = Math.PI / 2;
+            frontLeftWheel.position.set(-1.2, 0.4, 1);
+            car.add(frontLeftWheel);
+            const frontRightWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
+            frontRightWheel.rotation.z = Math.PI / 2;
+            frontRightWheel.position.set(1.2, 0.4, 1);
+            car.add(frontRightWheel);
+            // Rear wheels
+            const rearLeftWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
+            rearLeftWheel.rotation.z = Math.PI / 2;
+            rearLeftWheel.position.set(-1.2, 0.4, -1);
+            car.add(rearLeftWheel);
+            const rearRightWheel = new THREE.Mesh(wheelGeometry, wheelMaterial);
+            rearRightWheel.rotation.z = Math.PI / 2;
+            rearRightWheel.position.set(1.2, 0.4, -1);
+            car.add(rearRightWheel);
+        }
+        function spawnCoins() {
+            if (!isGameRunning) return;
+            // Remove old coins that are behind the car
+            coins = coins.filter(coin => {
+                if (coin.position.z < car.position.z - 30) {
+                    scene.remove(coin);
+                    return false;
+                }
+                return true;
+            });
+            // Spawn new coins
+            if (Math.random() < 0.05 && coins.length < 30) {
+                const coinGeometry = new THREE.CylinderGeometry(0.5, 0.5, 0.1, 32);
+                const coinMaterial = new THREE.MeshStandardMaterial({
+                    color: 0xf1c40f,
+                    metalness: 0.9,
+                    roughness: 0.2,
+                    emissive: 0xf1c40f,
+                    emissiveIntensity: 0.3
+                });
+                const coin = new THREE.Mesh(coinGeometry, coinMaterial);
+                coin.rotation.x = Math.PI / 2;
+                coin.position.set(
+                    (Math.random() - 0.5) * 15, // Random x position (-7.5 to 7.5)
+                    1,
+                    car.position.z + 50 + Math.random() * 100 // Ahead of the car
+                );
+                coin.castShadow = true;
+                coin.receiveShadow = true;
+                scene.add(coin);
+                coins.push(coin);
+            }
+        }
+        function spawnObstacles() {
+            if (!isGameRunning) return;
+            // Remove old obstacles that are behind the car
+            obstacles = obstacles.filter(obstacle => {
+                if (obstacle.position.z < car.position.z - 30) {
+                    scene.remove(obstacle);
+                    return false;
+                }
+                return true;
+            });
+            // Spawn new obstacles
+            if (Math.random() < 0.03 && obstacles.length < 20) {
+                const obstacleTypes = ['box', 'cone', 'cylinder'];
+                const type = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];
+                let obstacle;
+                const colors = [0xe74c3c, 0x9b59b6, 0x3498db, 0x2ecc71];
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                switch (type) {
+                    case 'box':
+                        obstacle = new THREE.Mesh(
+                            new THREE.BoxGeometry(1.5, 1.5, 1.5),
+                            new THREE.MeshStandardMaterial({ color })
+                        );
+                        break;
+                    case 'cone':
+                        obstacle = new THREE.Mesh(
+                            new THREE.ConeGeometry(0.8, 2, 32),
+                            new THREE.MeshStandardMaterial({ color })
+                        );
+                        break;
+                    case 'cylinder':
+                        obstacle = new THREE.Mesh(
+                            new THREE.CylinderGeometry(0.8, 0.8, 1.5, 32),
+                            new THREE.MeshStandardMaterial({ color })
+                        );
+                        break;
+                }
+                obstacle.castShadow = true;
+                obstacle.receiveShadow = true;
+                obstacle.position.set(
+                    (Math.random() - 0.5) * 15, // Random x position (-7.5 to 7.5)
+                    type === 'cone' ? 1 : 0.75,
+                    car.position.z + 50 + Math.random() * 100 // Ahead of the car
+                );
+                scene.add(obstacle);
+                obstacles.push(obstacle);
+            }
+        }
+        function updateRoadSegments() {
+            // Remove segments that are behind the car
+            const segmentsToRemove = roadSegments.filter(segment => segment.zEnd < car.position.z - 50);
+            segmentsToRemove.forEach(segment => {
+                scene.remove(segment.mesh);
+                scene.remove(segment.leftSidewalk);
+                scene.remove(segment.rightSidewalk);
+            });
+            // Keep only segments that are still in use
+            roadSegments = roadSegments.filter(segment => segment.zEnd >= car.position.z - 50);
+            // Add new segments if needed
+            const lastSegment = roadSegments[roadSegments.length - 1];
+            if (!lastSegment || car.position.z + 200 > lastSegment.zEnd) {
+                createRoadSegment(lastSegment ? lastSegment.zEnd + 50 : 50);
+            }
+        }
+        function checkCollisions() {
+            if (!isGameRunning) return;
+            // Check coin collisions
+            coins.forEach((coin, index) => {
+                if (isColliding(car, coin)) {
+                    scene.remove(coin);
+                    coins.splice(index, 1);
+                    score += 10;
+                    document.getElementById('score').textContent = score;
+                }
+            });
+            // Check obstacle collisions
+            obstacles.forEach((obstacle, index) => {
+                if (isColliding(car, obstacle)) {
+                    gameOver();
+                }
+            });
+            // Check road boundaries
+            if (car.position.x < -9 || car.position.x > 9) {
+                gameOver();
+            }
+        }
+        function isColliding(obj1, obj2) {
+            const dx = obj1.position.x - obj2.position.x;
+            const dy = obj1.position.y - obj2.position.y;
+            const dz = obj1.position.z - obj2.position.z;
+            const distance = Math.sqrt(dx * dx + dy * dy + dz * dz);
+            return distance < 2;
+        }
+        function updateCarMovement() {
+            if (!isGameRunning) return;
+            // Acceleration/deceleration
+            if (keys['ArrowUp'] || keys['w']) {
+                carSpeed += acceleration;
+            } else if (keys['ArrowDown'] || keys['s']) {
+                carSpeed -= deceleration * 1.5; // Stronger deceleration when reversing
+            } else if (keys[' ']) {
+                // Braking
+                if (carSpeed > 0) {
+                    carSpeed -= deceleration * 2;
+                    if (carSpeed < 0) carSpeed = 0;
+                } else if (carSpeed < 0) {
+                    carSpeed += deceleration * 2;
+                    if (carSpeed > 0) carSpeed = 0;
+                }
+            } else {
+                // Natural deceleration
+                if (carSpeed > 0) {
+                    carSpeed -= deceleration * 0.5;
+                    if (carSpeed < 0) carSpeed = 0;
+                } else if (carSpeed < 0) {
+                    carSpeed += deceleration * 0.5;
+                    if (carSpeed > 0) carSpeed = 0;
+                }
+            }
+            // Limit speed
+            carSpeed = Math.max(-maxSpeed / 2, Math.min(carSpeed, maxSpeed));
+            document.getElementById('speed').textContent = Math.abs(Math.round(carSpeed));
+            // Update car position based on speed
+            const deltaZ = carSpeed * 0.05;
+            car.position.z += deltaZ;
+            distanceTraveled += deltaZ;
+            // Rotation control
+            if ((keys['ArrowLeft'] || keys['a']) && carSpeed !== 0) {
+                car.rotation.y += rotationSpeed * (carSpeed > 0 ? 1 : -1) * 0.05;
+            }
+            if ((keys['ArrowRight'] || keys['d']) && carSpeed !== 0) {
+                car.rotation.y -= rotationSpeed * (carSpeed > 0 ? 1 : -1) * 0.05;
+            }
+            // Lateral movement based on car rotation
+            if (Math.abs(carSpeed) > 0.1) {
+                const moveX = Math.sin(car.rotation.y) * (carSpeed * 0.02);
+                car.position.x += moveX;
+            }
+        }
+        function updateCamera() {
+            // Chase camera
+            const carDirection = new THREE.Vector3(
+                Math.sin(car.rotation.y),
+                0,
+                Math.cos(car.rotation.y)
+            ).normalize();
+            const cameraOffset = new THREE.Vector3(
+                -carDirection.x * 5,
+                3 + (carSpeed / maxSpeed * 2), // Camera lifts slightly at high speed
+                -carDirection.z * 5 - (carSpeed / maxSpeed * 2) // Camera pulls back slightly at high speed
+            );
+            camera.position.set(
+                car.position.x + cameraOffset.x,
+                car.position.y + cameraOffset.y,
+                car.position.z + cameraOffset.z
+            );
+            // Smooth camera look-at
+            const lookAhead = new THREE.Vector3(
+                car.position.x + carDirection.x * 5,
+                car.position.y,
+                car.position.z + carDirection.z * 5
+            );
+            camera.lookAt(lookAhead);
+        }
+        function startGame() {
+            document.getElementById('start-screen').style.display = 'none';
+            isGameRunning = true;
+            score = 0;
+            gameTime = 0;
+            carSpeed = 0;
+            car.position.set(0, 1, 0);
+            car.rotation.set(0, 0, 0);
+            distanceTraveled = 0;
+            // Remove all coins and obstacles
+            coins.forEach(coin => scene.remove(coin));
+            coins = [];
+            obstacles.forEach(obstacle => scene.remove(obstacle));
+            obstacles = [];
+            // Reset road segments
+            roadSegments.forEach(segment => {
+                scene.remove(segment.mesh);
+                scene.remove(segment.leftSidewalk);
+                scene.remove(segment.rightSidewalk);
+            });
+            roadSegments = [];
+            createInitialRoad();
+            // Update UI
+            document.getElementById('score').textContent = score;
+            document.getElementById('time').textContent = gameTime.toFixed(1);
+        }
+        function restartGame() {
+            document.getElementById('game-over').style.display = 'none';
+            startGame();
+        }
+        function gameOver() {
+            isGameRunning = false;
+            carSpeed = 0;
+            document.getElementById('final-score').textContent = score;
+            document.getElementById('final-time').textContent = gameTime.toFixed(1);
+            document.getElementById('game-over').style.display = 'block';
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        function onKeyDown(event) {
+            keys[event.key.toLowerCase()] = true;
+        }
+        function onKeyUp(event) {
+            keys[event.key.toLowerCase()] = false;
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            if (isGameRunning) {
+                gameTime += 0.1;
+                document.getElementById('time').textContent = gameTime.toFixed(1);
+                updateCarMovement();
+                updateRoadSegments();
+                spawnCoins();
+                spawnObstacles();
+                checkCollisions();
+                updateCamera();
+            }
+            renderer.render(scene, camera);
+        }
+        // Start the game
+        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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>