Spaces:

THEZYZSTUDIO
/

Z_cam

Paused

App Files Files Community

THEZYZSTUDIO commited on Jun 6

Commit

56adaed

verified ·

1 Parent(s): dbdfbec

Create car crash simulator by the z plus model

Browse files

Files changed (1) hide show

car crash simulator by the z plus model +430 -0

car crash simulator by the z plus model ADDED Viewed

	@@ -0,0 +1,430 @@

+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <title>THE Z AI - محاكاة الاصطدام السينمائي الفائق</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background: #020205;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            color: white;
+        }
+        canvas { display: block; }
+        #ui {
+            position: absolute;
+            top: 30px;
+            right: 30px;
+            pointer-events: none;
+            text-align: right;
+        }
+        .speed-box {
+            background: rgba(0, 0, 0, 0.85);
+            padding: 20px 40px;
+            border-radius: 20px;
+            border: 4px solid #ff0000;
+            box-shadow: 0 0 40px rgba(255, 0, 0, 0.4);
+            backdrop-filter: blur(10px);
+        }
+        .label { font-size: 20px; color: #aaa; text-transform: uppercase; letter-spacing: 2px; }
+        .value {
+            font-size: 85px;
+            font-weight: 900;
+            color: #ff0000;
+            display: block;
+            font-family: 'Courier New', monospace;
+            text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
+        }
+        #instructions {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(255,255,255,0.1);
+            padding: 10px 20px;
+            border-radius: 50px;
+            font-size: 18px;
+            backdrop-filter: blur(5px);
+        }
+    </style>
+</head>
+<body>
+    <div id="ui">
+        <div class="speed-box">
+            <span class="label">السرعة الحالية</span>
+            <span id="speed-value" class="value">0</span>
+            <span class="label">كم / ساعة</span>
+        </div>
+    </div>
+    <div id="instructions">انقر في أي مكان لبدء المحاكاة وتفعيل الصوت 🚀</div>
+    <canvas id="simCanvas"></canvas>
+<script>
+/**
+ * THE Z AI Agent - Ultra Crash Simulation
+ * نظام فيزيائي متكامل: تسارع أسي، بارالاكس، تفتيت جزيئي، وصوت توليدي.
+ */
+const canvas = document.getElementById('simCanvas');
+const ctx = canvas.getContext('2d');
+const speedDisplay = document.getElementById('speed-value');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+// --- الإعدادات الفيزيائية والبيئية ---
+let worldX = 0;
+let cameraX = 0;
+let zoom = 1;
+let shake = 0;
+let isStarted = false;
+let isCrashed = false;
+const CONFIG = {
+    startSpeed: 0,
+    targetSpeed: 220, // السرعة القصوى قبل الاصطدام
+    accelBase: 0.05,
+    turboMultiplier: 1.002, // تسارع أسي
+    houseDistance: 8000, // مسافة بعيدة جداً للوصول للسرعة القصوى
+    gravity: 0.25
+};
+let car = {
+    x: 300,
+    y: canvas.height / 2,
+    w: 140,
+    h: 60,
+    speed: 0,
+    accel: CONFIG.accelBase,
+    color: '#ff0000',
+    parts: [] // لتخزين قطع السيارة عند التحطم
+};
+let house = {
+    x: CONFIG.houseDistance,
+    y: 0,
+    w: 400,
+    h: 500
+};
+let cityLayers = []; // طبقات المدينة (Parallax)
+let particles = []; // انفجارات وشرارات
+let debris = []; // قطع السيارة والمنزل
+// --- نظام الصوت (Web Audio API) ---
+let audioCtx, engineOsc, windOsc, gainNode;
+function initAudio() {
+    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    gainNode = audioCtx.createGain();
+    gainNode.gain.value = 0.1;
+    gainNode.connect(audioCtx.destination);
+    // صوت المحرك
+    engineOsc = audioCtx.createOscillator();
+    engineOsc.type = 'sawtooth';
+    engineOsc.frequency.setValueAtTime(50, audioCtx.currentTime);
+    engineOsc.connect(gainNode);
+    engineOsc.start();
+    // صوت الرياح
+    windOsc = audioCtx.createOscillator();
+    windOsc.type = 'brownian'; // محاكاة ضوضاء
+    windOsc.connect(gainNode);
+}
+function updateAudio() {
+    if(!audioCtx) return;
+    // ربط التردد بالسرعة
+    let freq = 50 + (car.speed * 2);
+    engineOsc.frequency.setTargetAtTime(freq, audioCtx.currentTime, 0.1);
+    gainNode.gain.setTargetAtTime(0.1 + (car.speed/500), audioCtx.currentTime, 0.1);
+}
+function playCrashSound() {
+    if(!audioCtx) return;
+    const noise = audioCtx.createBufferSource();
+    const buffer = audioCtx.createBuffer(1, audioCtx.sampleRate * 2, audioCtx.sampleRate);
+    const data = buffer.getChannelData(0);
+    for(let i=0; i<buffer.length; i++) data[i] = Math.random() * 2 - 1;
+    noise.buffer = buffer;
+    const filter = audioCtx.createBiquadFilter();
+    filter.type = 'lowpass';
+    filter.frequency.value = 1000;
+    noise.connect(filter);
+    filter.connect(gainNode);
+    noise.start();
+    noise.stop(audioCtx.currentTime + 2);
+}
+// --- بن��ء العالم ---
+function createCity() {
+    // 3 طبقات من المباني للبارالاكس
+    for(let layer = 1; layer <= 3; layer++) {
+        let layerBuildings = [];
+        for(let i=0; i<100; i++) {
+            layerBuildings.push({
+                x: i * 400 + Math.random() * 200,
+                w: 150 + Math.random() * 200,
+                h: 200 + Math.random() * 600,
+                color: `rgb(${20*layer}, ${20*layer}, ${30*layer})`,
+                speedMod: layer * 0.1 // الطبقة البعيدة تتحرك أبطأ
+            });
+        }
+        cityLayers.push(layerBuildings);
+    }
+}
+function drawCity() {
+    cityLayers.forEach((layer, index) => {
+        ctx.fillStyle = layer[0].color;
+        layer.forEach(b => {
+            // حساب موقع المبنى بناءً على سرعة الطبقة (Parallax)
+            let relX = (b.x - worldX * b.speedMod);
+            ctx.fillRect(relX, canvas.height - b.h, b.w, b.h);
+        });
+    });
+}
+function drawRoad() {
+    ctx.fillStyle = '#111';
+    ctx.fillRect(0, canvas.height/2 + 30, canvas.width, canvas.height/2);
+    // خطوط الطريق المتحركة
+    ctx.strokeStyle = '#fff';
+    ctx.setLineDash([40, 60]);
+    ctx.lineWidth = 4;
+    ctx.beginPath();
+    ctx.moveTo(0, canvas.height/2 + 35);
+    ctx.lineTo(canvas.width, canvas.height/2 + 35);
+    ctx.stroke();
+    ctx.setLineDash([]);
+}
+function drawHouse() {
+    let relX = house.x - cameraX;
+    if(relX > canvas.width + 500 || relX < -500) return;
+    // الجسم الرئيسي
+    ctx.fillStyle = '#444';
+    ctx.fillRect(relX, house.y, house.w, house.h);
+    // السقف
+    ctx.fillStyle = '#222';
+    ctx.beginPath();
+    ctx.moveTo(relX - 20, house.y);
+    ctx.lineTo(relX + house.w/2, house.y - 100);
+    ctx.lineTo(relX + house.w + 20, house.y);
+    ctx.fill();
+    // النوافذ
+    ctx.fillStyle = '#88ccff';
+    for(let i=0; i<3; i++) {
+        for(let j=0; j<3; j++) {
+            ctx.fillRect(relX + 40 + i*100, house.y + 50 + j*100, 50, 60);
+        }
+    }
+    // الباب
+    ctx.fillStyle = '#5d3a1a';
+    ctx.fillRect(relX + 150, house.y + 300, 100, 100);
+}
+function drawCar() {
+    if(isCrashed) return;
+    let relX = car.x - cameraX;
+    // ظل السيارة
+    ctx.fillStyle = 'rgba(0,0,0,0.5)';
+    ctx.fillRect(relX, car.y + car.h - 10, car.w, 20);
+    // جسم السيارة (تصميم عصري)
+    ctx.fillStyle = car.color;
+    ctx.beginPath();
+    ctx.roundRect(relX, car.y, car.w, car.h, [20, 50, 10, 10]);
+    ctx.fill();
+    // السقف والزجاج
+    ctx.fillStyle = '#222';
+    ctx.beginPath();
+    ctx.roundRect(relX + 30, car.y - 20, 60, 30, [20, 20, 0, 0]);
+    ctx.fill();
+    ctx.fillStyle = '#88ccff';
+    ctx.fillRect(relX + 40, car.y - 15, 40, 15);
+    // العجلات
+    ctx.fillStyle = '#000';
+    ctx.beginPath();
+    ctx.arc(relX + 30, car.y + car.h, 15, 0, Math.PI*2);
+    ctx.arc(relX + car.w - 30, car.y + car.h, 15, 0, Math.PI*2);
+    ctx.fill();
+    // أضواء خلفية
+    ctx.fillStyle = '#ffaa00';
+    ctx.fillRect(relX, car.y + 10, 5, 15);
+}
+// --- نظام التدمير ---
+function explode() {
+    isCrashed = true;
+    shake = 50;
+    playCrashSound();
+    // 1. تفتيت السيارة إلى قطع
+    for(let i=0; i<200; i++) {
+        debris.push({
+            x: car.x + car.w,
+            y: car.y + car.h/2,
+            vx: (Math.random() - 0.3) * (car.speed / 2),
+            vy: (Math.random() - 0.5) * 20,
+            size: Math.random() * 15 + 5,
+            color: Math.random() > 0.5 ? car.color : '#333',
+            rot: Math.random() * Math.PI * 2,
+            vRot: (Math.random() - 0.5) * 0.2
+        });
+    }
+    // 2. شرارات كهربائية
+    for(let i=0; i<300; i++) {
+        particles.push({
+            x: car.x + car.w,
+            y: car.y + car.h/2,
+            vx: (Math.random() - 0.1) * 40,
+            vy: (Math.random() - 0.5) * 40,
+            life: 1.0,
+            color: '#fff700'
+        });
+    }
+    // 3. كرات نارية ودخان
+    for(let i=0; i<100; i++) {
+        particles.push({
+            x: car.x + car.w,
+            y: car.y + car.h/2,
+            vx: (Math.random() - 0.5) * 10,
+            vy: (Math.random() - 0.8) * 15,
+            life: 2.0,
+            size: Math.random() * 40 + 20,
+            color: Math.random() > 0.5 ? '#ff4400' : '#555'
+        });
+    }
+}
+function update() {
+    if(!isStarted) return;
+    if(!isCrashed) {
+        // تسارع أسي
+        car.speed += car.accel;
+        car.accel *= CONFIG.turboMultiplier;
+        if(car.speed > CONFIG.targetSpeed) car.speed = CONFIG.targetSpeed;
+        worldX += car.speed * 0.1;
+        car.x += car.speed * 0.1;
+        // كاميرا سينمائية (Drag & Zoom)
+        let targetCamX = car.x - 300;
+        cameraX += (targetCamX - cameraX) * 0.1;
+        zoom = 1 - (car.speed / 1000); // ز��م ديناميكي
+        // التحقق من الاصطدام
+        if(car.x + car.w >= house.x) {
+            explode();
+        }
+    } else {
+        // تحديث الحطام والجزيئات بعد الاصطدام
+        debris.forEach(d => {
+            d.x += d.vx;
+            d.y += d.vy;
+            d.vy += CONFIG.gravity;
+            d.rot += d.vRot;
+        });
+        particles.forEach(p => {
+            p.x += p.vx;
+            p.y += p.vy;
+            p.life -= 0.02;
+        });
+        particles = particles.filter(p => p.life > 0);
+        if(shake > 0) shake *= 0.9;
+    }
+    updateAudio();
+    speedDisplay.innerText = Math.floor(car.speed);
+}
+function render() {
+    ctx.save();
+    // تطبيق اهتزاز الشاشة
+    if(shake > 0) {
+        ctx.translate(Math.random()*shake - shake/2, Math.random()*shake - shake/2);
+    }
+    // تطبيق الزوم
+    ctx.scale(zoom, zoom);
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    drawCity();
+    drawRoad();
+    drawHouse();
+    drawCar();
+    // رسم الحطام
+    debris.forEach(d => {
+        ctx.save();
+        ctx.translate(d.x - cameraX, d.y);
+        ctx.rotate(d.rot);
+        ctx.fillStyle = d.color;
+        ctx.fillRect(-d.size/2, -d.size/2, d.size, d.size);
+        ctx.restore();
+    });
+    // رسم الجزيئات
+    particles.forEach(p => {
+        ctx.globalAlpha = p.life;
+        ctx.fillStyle = p.color;
+        ctx.beginPath();
+        ctx.arc(p.x - cameraX, p.y, p.size || 3, 0, Math.PI*2);
+        ctx.fill();
+    });
+    ctx.globalAlpha = 1;
+    ctx.restore();
+}
+function loop() {
+    update();
+    render();
+    requestAnimationFrame(loop);
+}
+window.addEventListener('mousedown', () => {
+    if(!isStarted) {
+        isStarted = true;
+        initAudio();
+        document.getElementById('instructions').style.display = 'none';
+    }
+});
+init();
+function init() {
+    createCity();
+    loop();
+}
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+});
+</script>
+</body>
+</html>