Spaces:

THEZYZSTUDIO
/

Z_cam

Paused

App Files Files Community

THEZYZSTUDIO commited on Jun 6

Commit

500ba0e

verified ·

1 Parent(s): b354fe3

Upload car come subway from the z ai agent.html

Browse files

Files changed (1) hide show

car come subway from the z ai agent.html +298 -0

car come subway from the z ai agent.html ADDED Viewed

	@@ -0,0 +1,298 @@

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>سباق السيارات ثلاثي الأبعاد - The Z AI Agent</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #000;
+            user-select: none;
+            touch-action: none;
+        }
+        #ui-layer {
+            position: absolute;
+            top: 20px;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            pointer-events: none;
+            z-index: 10;
+        }
+        #score-board {
+            background: rgba(0, 0, 0, 0.7);
+            color: #fff;
+            padding: 10px 30px;
+            border-radius: 50px;
+            font-size: 24px;
+            font-weight: bold;
+            border: 2px solid #ffcc00;
+            box-shadow: 0 0 15px #ffcc00;
+        }
+        #game-over {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.9);
+            color: white;
+            padding: 40px;
+            text-align: center;
+            border-radius: 20px;
+            display: none;
+            z-index: 20;
+            border: 3px solid #ff0000;
+        }
+        #game-over h1 { font-size: 48px; color: #ff0000; margin-bottom: 10px; }
+        #game-over p { font-size: 20px; margin-bottom: 20px; }
+        #restart-btn {
+            padding: 15px 30px;
+            font-size: 20px;
+            background: #ffcc00;
+            border: none;
+            cursor: pointer;
+            border-radius: 10px;
+            font-weight: bold;
+            transition: 0.3s;
+        }
+        #restart-btn:hover { background: #fff; transform: scale(1.1); }
+        #instructions {
+            position: absolute;
+            bottom: 20px;
+            width: 100%;
+            text-align: center;
+            color: white;
+            font-size: 18px;
+            opacity: 0.7;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="ui-layer">
+        <div id="score-board">النقاط: <span id="score">0</span></div>
+    </div>
+    <div id="game-over">
+        <h1>لقد اصطدمت!</h1>
+        <p>مجموع نقاطك: <span id="final-score">0</span></p>
+        <button id="restart-btn">إعادة المحاولة</button>
+    </div>
+    <div id="instructions">اضغط على اليمين للذهاب يميناً | اضغط على اليسار للذهاب يساراً</div>
+    <!-- استدعاء مكتبة Three.js من مصدر خارجي موثوق -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        /**
+         * لعبة سباق السيارات ثلاثية الأبعاد
+         * تطوير: THE Z AI Agent
+         */
+        // --- الإعدادات الأساسية ---
+        let scene, camera, renderer, player;
+        let enemies = [];
+        let score = 0;
+        let gameActive = true;
+        let speed = 0.5;
+        let laneWidth = 3;
+        let playerTargetX = 0;
+        const scoreElement = document.getElementById('score');
+        const finalScoreElement = document.getElementById('final-score');
+        const gameOverScreen = document.getElementById('game-over');
+        const restartBtn = document.getElementById('restart-btn');
+        function init() {
+            // 1. إنشاء المشهد
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x111122);
+            scene.fog = new THREE.Fog(0x111122, 10, 50);
+            // 2. الكاميرا
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 5, 10);
+            camera.lookAt(0, 0, 0);
+            // 3. الريندر (المصير)
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            document.body.appendChild(renderer.domElement);
+            // 4. الإضاءة
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+            scene.add(ambientLight);
+            const dirLight = new THREE.DirectionalLight(0xffffff, 1);
+            dirLight.position.set(0, 10, 5);
+            scene.add(dirLight);
+            // 5. إنشاء الطريق
+            createRoad();
+            // 6. إنشاء سيارة اللاعب
+            createPlayer();
+            // 7. إدارة المدخلات
+            setupControls();
+            // 8. بدء حلقة اللعبة
+            animate();
+        }
+        function createRoad() {
+            const roadGeo = new THREE.PlaneGeometry(10, 1000);
+            const roadMat = new THREE.MeshPhongMaterial({
+                color: 0x333333,
+                side: THREE.DoubleSide
+            });
+            const road = new THREE.Mesh(roadGeo, roadMat);
+            road.rotation.x = -Math.PI / 2;
+            scene.add(road);
+            // إضافة خطوط الطريق البيضاء
+            for (let i = 0; i < 100; i++) {
+                const lineGeo = new THREE.PlaneGeometry(0.2, 2);
+                const lineMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
+                const line = new THREE.Mesh(lineGeo, lineMat);
+                line.rotation.x = -Math.PI / 2;
+                line.position.y = 0.01;
+                line.position.z = -i * 10;
+                scene.add(line);
+            }
+        }
+        function createPlayer() {
+            // جسم السيارة
+            const bodyGeo = new THREE.BoxGeometry(1.2, 0.6, 2);
+            const bodyMat = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
+            player = new THREE.Mesh(bodyGeo, bodyMat);
+            player.position.y = 0.3;
+            // إضافة سقف للسيارة لتبدو أجمل
+            const roofGeo = new THREE.BoxGeometry(1, 0.5, 1);
+            const roofMat = new THREE.MeshPhongMaterial({ color: 0x00cc00 });
+            const roof = new THREE.Mesh(roofGeo, roofMat);
+            roof.position.y = 0.5;
+            roof.position.z = -0.2;
+            player.add(roof);
+            scene.add(player);
+        }
+        function spawnEnemy() {
+            if (!gameActive) return;
+            const colors = [0xff0000, 0x0000ff, 0xffff00, 0xff00ff];
+            const randomColor = colors[Math.floor(Math.random() * colors.length)];
+            const enemyGeo = new THREE.BoxGeometry(1.2, 0.6, 2);
+            const enemyMat = new THREE.MeshPhongMaterial({ color: randomColor });
+            const enemy = new THREE.Mesh(enemyGeo, enemyMat);
+            // وضع السيارة في أحد المسارات الثلاثة (-3, 0, 3)
+            const lanes = [-laneWidth, 0, laneWidth];
+            enemy.position.x = lanes[Math.floor(Math.random() * lanes.length)];
+            enemy.position.y = 0.3;
+            enemy.position.z = -50; // تظهر بعيداً
+            scene.add(enemy);
+            enemies.push(enemy);
+        }
+        function setupControls() {
+            window.addEventListener('mousedown', (e) => {
+                if (e.clientX < window.innerWidth / 2) {
+                    playerTargetX = -laneWidth; // يسار
+                } else {
+                    playerTargetX = laneWidth; // يمين
+                }
+            });
+            // دعم اللمس للهواتف
+            window.addEventListener('touchstart', (e) => {
+                const touchX = e.touches[0].clientX;
+                if (touchX < window.innerWidth / 2) {
+                    playerTargetX = -laneWidth;
+                } else {
+                    playerTargetX = laneWidth;
+                }
+            });
+            // دعم لوحة المفاتيح
+            window.addEventListener('keydown', (e) => {
+                if (e.key === 'ArrowLeft') playerTargetX = -laneWidth;
+                if (e.key === 'ArrowRight') playerTargetX = laneWidth;
+                if (e.key === 'ArrowDown') playerTargetX = 0;
+            });
+        }
+        function checkCollision(obj1, obj2) {
+            const box1 = new THREE.Box3().setFromObject(obj1);
+            const box2 = new THREE.Box3().setFromObject(obj2);
+            return box1.intersectsBox(box2);
+        }
+        function animate() {
+            if (!gameActive) return;
+            requestAnimationFrame(animate);
+            // تحريك السيارة بسلاسة نحو الهدف
+            player.position.x += (playerTargetX - player.position.x) * 0.1;
+            // تحريك الأعداء نحو اللاعب
+            for (let i = enemies.length - 1; i >= 0; i--) {
+                enemies[i].position.z += speed;
+                // كشف التصادم
+                if (checkCollision(player, enemies[i])) {
+                    endGame();
+                }
+                // زيادة النقاط عند تخطي السيارة
+                if (enemies[i].position.z > 5) {
+                    scene.remove(enemies[i]);
+                    enemies.splice(i, 1);
+                    score++;
+                    scoreElement.innerText = score;
+                    // زيادة الصعوبة تدريجياً
+                    speed += 0.005;
+                }
+            }
+            // توليد أعداء بشكل دوري
+            if (Math.random() < 0.02) {
+                spawnEnemy();
+            }
+            renderer.render(scene, camera);
+        }
+        function endGame() {
+            gameActive = false;
+            finalScoreElement.innerText = score;
+            gameOverScreen.style.display = 'block';
+        }
+        restartBtn.onclick = () => {
+            location.reload(); // إعادة تحميل الصفحة لبدء اللعبة من جديد
+        };
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        init();
+    </script>
+</body>
+</html>