Spaces:
Paused
Paused
Rename car crash simulator by the z plus model to carcrashwithplusmodelofthezaiagent.html
b354fe3 verified | <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> |