Spaces:

AdhamYasser2025
/

pixelrush-racer-3d

Running

App Files Files Community

AdhamYasser2025 commited on Oct 20

Commit

d45ca85

verified ·

1 Parent(s): a0dc6b6

اعملي لعبة سباق سيارات ثري دي بسيطة للموبايل

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +379 -18

README.md CHANGED Viewed

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

 ---
+title: PixelRush Racer 3D 🏎️
+colorFrom: green
+colorTo: pink
+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,380 @@
-<!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, user-scalable=no">
+    <title>PixelRush Racer 3D</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            touch-action: manipulation;
+        }
+        body {
+            overflow: hidden;
+            font-family: 'Segoe UI', system-ui, sans-serif;
+        }
+        #gameContainer {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
+        }
+        #uiOverlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 10;
+        }
+        .control-btn {
+            pointer-events: auto;
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            width: 80px;
+            height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 24px;
+            transition: all 0.2s ease;
+        }
+        .control-btn:active {
+            background: rgba(255, 255, 255, 0.4);
+            transform: scale(0.95);
+        }
+        #scoreDisplay {
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 15px 25px;
+        }
+        #startScreen, #gameOverScreen {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .floating {
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+        }
+    </style>
+</head>
+<body class="bg-gray-900">
+    <div id="gameContainer">
+        <canvas id="gameCanvas"></canvas>
+        <div id="uiOverlay" class="flex flex-col h-full">
+            <!-- Top Bar -->
+            <div class="flex justify-between items-start p-6">
+                <div id="scoreDisplay" class="text-white font-bold text-xl">
+                    Score: <span id="score">0</span>
+                </div>
+                <div class="flex gap-4">
+                    <div class="control-btn" id="pauseBtn">
+                        <i data-feather="pause"></i>
+                    </div>
+                </div>
+            </div>
+            <!-- Controls -->
+            <div class="flex-1 flex items-end justify-between p-8">
+                <div class="control-btn" id="leftBtn">
+                    <i data-feather="chevron-left"></i>
+                </div>
+                <div class="control-btn" id="rightBtn">
+                    <i data-feather="chevron-right"></i>
+                </div>
+            </div>
+        </div>
+        <!-- Start Screen -->
+        <div id="startScreen" class="absolute inset-0 flex items-center justify-center z-20">
+            <div class="text-center text-white p-8 max-w-md">
+                <div class="floating mb-8">
+                    <i data-feather="flag" class="w-24 h-24 mx-auto"></i>
+                </div>
+                <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent">
+                    PixelRush Racer
+                </h1>
+                <p class="text-xl mb-8 opacity-90">Swipe or tap to dodge obstacles!</p>
+                <button id="startBtn" class="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 text-white font-bold py-4 px-8 rounded-full text-xl transition-all duration-300 transform hover:scale-105 shadow-2xl">
+                    START RACE
+                </button>
+            </div>
+        </div>
+        <!-- Game Over Screen -->
+        <div id="gameOverScreen" class="absolute inset-0 flex items-center justify-center z-20 hidden">
+            <div class="text-center text-white p-8 max-w-md">
+                <i data-feather="flag" class="w-16 h-16 mx-auto mb-4"></i>
+                <h2 class="text-4xl font-bold mb-2">Race Over!</h2>
+                <p class="text-2xl mb-4">Final Score: <span id="finalScore">0</span></p>
+                <div class="flex gap-4 justify-center">
+                    <button id="restartBtn" class="bg-gradient-to-r from-green-400 to-blue-500 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105">
+                        RESTART
+                    </button>
+                    <button id="menuBtn" class="bg-gradient-to-r from-gray-600 to-gray-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105">
+                        MENU
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Game Variables
+        let scene, camera, renderer, car, obstacles = [];
+        let score = 0;
+        let gameSpeed = 0.1;
+        let carPosition = 0;
+        let gameActive = false;
+        let lastObstacleTime = 0;
+        const lanePositions = [-2, 0, 2];
+        // Initialize Three.js
+        function init() {
+            // Scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x87CEEB);
+            // Camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 5, 10);
+            camera.lookAt(0, 0, 0);
+            // Renderer
+            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.shadowMap.enabled = true;
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(10, 20, 5);
+            directionalLight.castShadow = true;
+            scene.add(directionalLight);
+            // Road
+            const roadGeometry = new THREE.PlaneGeometry(20, 1000);
+            const roadMaterial = new THREE.MeshStandardMaterial({ color: 0x333333 });
+            const road = new THREE.Mesh(roadGeometry, roadMaterial);
+            road.rotation.x = -Math.PI / 2;
+            road.receiveShadow = true;
+            scene.add(road);
+            // Road markings
+            for (let i = -500; i < 500; i += 4) {
+                const markingGeometry = new THREE.PlaneGeometry(0.5, 2);
+                const markingMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
+                const marking = new THREE.Mesh(markingGeometry, markingMaterial);
+                marking.rotation.x = -Math.PI / 2;
+                marking.position.set(0, 0.01, i);
+                scene.add(marking);
+            }
+            // Create player car
+            const carGeometry = new THREE.BoxGeometry(1, 0.5, 2);
+            const carMaterial = new THREE.MeshStandardMaterial({ color: 0xff4444 });
+            car = new THREE.Mesh(carGeometry, carMaterial);
+            car.position.y = 0.5;
+            car.castShadow = true;
+            scene.add(car);
+            // Event Listeners
+            setupEventListeners();
+            // Start animation loop
+            animate();
+        }
+        function setupEventListeners() {
+            // Control buttons
+            document.getElementById('leftBtn').addEventListener('click', moveLeft);
+            document.getElementById('rightBtn').addEventListener('click', moveRight);
+            document.getElementById('startBtn').addEventListener('click', startGame);
+            document.getElementById('restartBtn').addEventListener('click', restartGame);
+            document.getElementById('menuBtn').addEventListener('click', showMenu);
+            document.getElementById('pauseBtn').addEventListener('click', togglePause);
+            // Touch controls
+            let touchStartX = 0;
+            document.addEventListener('touchstart', (e) => {
+                touchStartX = e.touches[0].clientX;
+            });
+            document.addEventListener('touchend', (e) => {
+                if (!gameActive) return;
+                const touchEndX = e.changedTouches[0].clientX;
+                const diff = touchEndX - touchStartX;
+                if (Math.abs(diff) > 50) {
+                    if (diff > 0) {
+                        moveRight();
+                    } else {
+                        moveLeft();
+                    }
+                }
+            });
+            // Keyboard controls
+            document.addEventListener('keydown', (e) => {
+                if (!gameActive) return;
+                if (e.key === 'ArrowLeft') {
+                    moveLeft();
+                } else if (e.key === 'ArrowRight') {
+                    moveRight();
+                }
+            });
+            // Window resize
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
+            });
+        }
+        function moveLeft() {
+            if (!gameActive) return;
+            const currentLane = lanePositions.indexOf(carPosition);
+            if (currentLane > 0) {
+                carPosition = lanePositions[currentLane - 1];
+            }
+        }
+        function moveRight() {
+            if (!gameActive) return;
+            const currentLane = lanePositions.indexOf(carPosition);
+            if (currentLane < lanePositions.length - 1) {
+                carPosition = lanePositions[currentLane + 1];
+            }
+        }
+        function startGame() {
+            document.getElementById('startScreen').classList.add('hidden');
+            gameActive = true;
+            score = 0;
+            gameSpeed = 0.1;
+            carPosition = 0;
+            obstacles.forEach(obstacle => scene.remove(obstacle));
+            obstacles = [];
+            updateScore();
+        }
+        function restartGame() {
+            document.getElementById('gameOverScreen').classList.add('hidden');
+            startGame();
+        }
+        function showMenu() {
+            document.getElementById('gameOverScreen').classList.add('hidden');
+            document.getElementById('startScreen').classList.remove('hidden');
+            gameActive = false;
+        }
+        function togglePause() {
+            gameActive = !gameActive;
+            const icon = document.querySelector('#pauseBtn i');
+            if (gameActive) {
+                icon.setAttribute('data-feather', 'pause');
+            } else {
+                icon.setAttribute('data-feather', 'play');
+            }
+            feather.replace();
+        }
+        function spawnObstacle() {
+            const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1);
+            const obstacleMaterial = new THREE.MeshStandardMaterial({ color: Math.random() * 0xffffff });
+            const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
+            obstacle.position.x = lanePositions[Math.floor(Math.random() * lanePositions.length)];
+            obstacle.position.y = 0.5;
+            obstacle.position.z = -20;
+            obstacle.castShadow = true;
+            scene.add(obstacle);
+            obstacles.push(obstacle);
+        }
+        function updateScore() {
+            document.getElementById('score').textContent = score;
+        }
+        function checkCollision() {
+            const carBox = new THREE.Box3().setFromObject(car);
+            for (let obstacle of obstacles) {
+                const obstacleBox = new THREE.Box3().setFromObject(obstacle);
+                if (carBox.intersectsBox(obstacleBox)) {
+                gameOver();
+                return;
+                }
+            }
+        }
+        function gameOver() {
+            gameActive = false;
+            document.getElementById('finalScore').textContent = score;
+            document.getElementById('gameOverScreen').classList.remove('hidden');
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            if (gameActive) {
+                // Move car smoothly to target position
+                car.position.x += (carPosition - car.position.x) * 0.2;
+                // Spawn obstacles
+                const currentTime = Date.now();
+                if (currentTime - lastObstacleTime > 2000 - (score * 10)) {
+                    spawnObstacle();
+                    lastObstacleTime = currentTime;
+                }
+                // Update obstacles
+                for (let i = obstacles.length - 1; i >= 0; i--) {
+                    obstacles[i].position.z += gameSpeed;
+                    // Remove obstacles that are behind the camera
+                    if (obstacles[i].position.z > 10) {
+                        scene.remove(obstacles[i]);
+                        obstacles.splice(i, 1);
+                        score++;
+                        gameSpeed += 0.001;
+                        updateScore();
+                    }
+                }
+                // Check collisions
+                checkCollision();
+            }
+            renderer.render(scene, camera);
+        }
+        // Initialize game when page loads
+        window.addEventListener('load', init);
+        feather.replace();
+    </script>
+</body>
 </html>