Drone City Simulator

Drone City Simulator

Altitude: 0m | Speed: 0 km/h | Controls: Arrow keys to fly, W/S throttle, A/D rotate, R reset

body { background: #b3e5fc; margin: 0; font-family: Arial, sans-serif; text-align: center; } h1 { margin: 18px 0 0 0; color: #263238; } #city-canvas { background: #90caf9; display: block; margin: 20px auto 0 auto; border: 2px solid #1976d2; box-shadow: 0 4px 24px #1976d2aa; } #hud { margin-top: 10px; font-size: 1.1em; color: #263238; background: #e3f2fd; padding: 8px 0; border-radius: 8px; width: 900px; margin-left: auto; margin-right: auto; box-shadow: 0 2px 8px #1976d244; } const canvas = document.getElementById('city-canvas'); const ctx = canvas.getContext('2d'); const altitudeDisplay = document.getElementById('altitude'); const speedDisplay = document.getElementById('speed'); // World size (city is larger than canvas, camera follows drone) const WORLD_WIDTH = 2400; const WORLD_HEIGHT = 1600; // Drone parameters const DRONE_WIDTH = 48; const DRONE_HEIGHT = 18; const ROTOR_RADIUS = 10; const GRAVITY = 0.18; const THRUST = 0.22; const ROTATE_SPEED = 0.045; const AIR_RESISTANCE = 0.992; const MAX_THRUST = 1.0; // Initial drone state function getInitialState() { return { x: WORLD_WIDTH / 2, y: WORLD_HEIGHT - 200, vx: 0, vy: 0, angle: 0, angularVelocity: 0, thrust: 0, throttleUp: false, throttleDown: false, left: false, right: false, rotatingLeft: false, rotatingRight: false, }; } let drone = getInitialState(); // Camera state let camera = { x: drone.x - canvas.width / 2, y: drone.y - canvas.height / 2 }; // City generation (simple buildings, roads, trees) const buildings = []; const roads = []; const trees = []; function generateCity() { // Main road horizontal roads.push({x: 0, y: WORLD_HEIGHT/2 - 40, w: WORLD_WIDTH, h: 80}); // Main road vertical roads.push({x: WORLD_WIDTH/2 - 40, y: 0, w: 80, h: WORLD_HEIGHT}); // Buildings for (let i = 0; i < 60; ++i) { let w = 60 + Math.random()*60; let h = 80 + Math.random()*120; let x = Math.random() * (WORLD_WIDTH - w - 100) + 50; let y = Math.random() * (WORLD_HEIGHT - h - 100) + 50; // Avoid placing on roads if ( (x + w > WORLD_WIDTH/2 - 80 && x < WORLD_WIDTH/2 + 80) || (y + h > WORLD_HEIGHT/2 - 80 && y < WORLD_HEIGHT/2 + 80) ) continue; buildings.push({x, y, w, h, color: randomBuildingColor()}); } // Trees for (let i = 0; i < 120; ++i) { let x = Math.random() * (WORLD_WIDTH - 40) + 20; let y = Math.random() * (WORLD_HEIGHT - 40) + 20; // Avoid roads if ( (x > WORLD_WIDTH/2 - 80 && x < WORLD_WIDTH/2 + 80) || (y > WORLD_HEIGHT/2 - 80 && y < WORLD_HEIGHT/2 + 80) ) continue; trees.push({x, y}); } } function randomBuildingColor() { const colors = ['#90a4ae', '#b0bec5', '#78909c', '#cfd8dc', '#607d8b', '#8d6e63']; return colors[Math.floor(Math.random()*colors.length)]; } generateCity(); // Draw city function drawCity(ctx, cam) { // Sky ctx.fillStyle = '#90caf9'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Roads for (const r of roads) { ctx.fillStyle = '#bdbdbd'; ctx.fillRect(r.x - cam.x, r.y - cam.y, r.w, r.h); // Road lines ctx.strokeStyle = '#fff'; ctx.setLineDash([20, 20]); ctx.lineWidth = 3; ctx.beginPath(); if (r.w > r.h) { // horizontal ctx.moveTo(r.x - cam.x, r.y + r.h/2 - cam.y); ctx.lineTo(r.x + r.w - cam.x, r.y + r.h/2 - cam.y); } else { // vertical ctx.moveTo(r.x + r.w/2 - cam.x, r.y - cam.y); ctx.lineTo(r.x + r.w/2 - cam.x, r.y + r.h - cam.y); } ctx.stroke(); ctx.setLineDash([]); } // Buildings for (const b of buildings) { ctx.fillStyle = b.color; ctx.fillRect(b.x - cam.x, b.y - cam.y, b.w, b.h); ctx.strokeStyle = '#263238'; ctx.lineWidth = 2; ctx.strokeRect(b.x - cam.x, b.y - cam.y, b.w, b.h); // Windows ctx.fillStyle = '#fff9c4'; for (let i = 8; i < b.w-8; i += 18) { for (let j = 12; j < b.h-12; j += 22) { ctx.fillRect(b.x - cam.x + i, b.y - cam.y + j, 10, 12); } } } // Trees for (const t of trees) { ctx.beginPath(); ctx.arc(t.x - cam.x, t.y - cam.y, 10, 0, 2*Math.PI); ctx.fillStyle = '#388e3c'; ctx.fill(); ctx.beginPath(); ctx.arc(t.x - cam.x, t.y - cam.y, 6, 0, 2*Math.PI); ctx.fillStyle = '#66bb6a'; ctx.fill(); // Trunk ctx.fillStyle = '#8d6e63'; ctx.fillRect(t.x - cam.x - 2, t.y - cam.y + 8, 4, 8); } } // Draw drone function drawDrone(ctx, cam) { ctx.save(); ctx.translate(drone.x - cam.x, drone.y - cam.y); ctx.rotate(drone.angle); // Body ctx.fillStyle = '#1976d2'; ctx.fillRect(-DRONE_WIDTH/2, -DRONE_HEIGHT/2, DRONE_WIDTH, DRONE_HEIGHT); // Rotors ctx.beginPath(); ctx.arc(-DRONE_WIDTH/2 + 8, -DRONE_HEIGHT/2, ROTOR_RADIUS, 0, 2 * Math.PI); ctx.arc(DRONE_WIDTH/2 - 8, -DRONE_HEIGHT/2, ROTOR_RADIUS, 0, 2 * Math.PI); ctx.fillStyle = '#bdbdbd'; ctx.fill(); // Rotor spin effect ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(-DRONE_WIDTH/2 + 8, -DRONE_HEIGHT/2); ctx.lineTo(-DRONE_WIDTH/2 + 8 + ROTOR_RADIUS * Math.cos(Date.now()/100), -DRONE_HEIGHT/2 + ROTOR_RADIUS * Math.sin(Date.now()/100)); ctx.moveTo(DRONE_WIDTH/2 - 8, -DRONE_HEIGHT/2); ctx.lineTo(DRONE_WIDTH/2 - 8 + ROTOR_RADIUS * Math.cos(-Date.now()/100), -DRONE_HEIGHT/2 + ROTOR_RADIUS * Math.sin(-Date.now()/100)); ctx.stroke(); // Thrust flame if (drone.thrust > 0.05) { ctx.save(); ctx.translate(0, DRONE_HEIGHT/2); ctx.rotate(Math.random() * 0.2 - 0.1); ctx.beginPath(); ctx.moveTo(-10, 0); ctx.lineTo(0, 20 + Math.random() * 10 * drone.thrust); ctx.lineTo(10, 0); ctx.closePath(); ctx.fillStyle = 'orange'; ctx.globalAlpha = 0.7; ctx.fill(); ctx.globalAlpha = 1; ctx.restore(); } ctx.restore(); } // Camera follows drone, clamped to world bounds function updateCamera() { camera.x = drone.x - canvas.width / 2; camera.y = drone.y - canvas.height / 2; camera.x = Math.max(0, Math.min(WORLD_WIDTH - canvas.width, camera.x)); camera.y = Math.max(0, Math.min(WORLD_HEIGHT - canvas.height, camera.y)); } // Physics update function updateDrone() { // Rotation if (drone.rotatingLeft) drone.angularVelocity -= ROTATE_SPEED; if (drone.rotatingRight) drone.angularVelocity += ROTATE_SPEED; drone.angle += drone.angularVelocity; drone.angularVelocity *= 0.95; // Throttle if (drone.throttleUp) drone.thrust = Math.min(drone.thrust + 0.02, MAX_THRUST); else if (drone.throttleDown) drone.thrust = Math.max(drone.thrust - 0.02, 0.0); else drone.thrust *= 0.98; // Thrust drone.vx += Math.sin(drone.angle) * THRUST * drone.thrust; drone.vy -= Math.cos(drone.angle) * THRUST * drone.thrust; // Gravity drone.vy += GRAVITY; // Air resistance drone.vx *= AIR_RESISTANCE; drone.vy *= AIR_RESISTANCE; // Position update drone.x += drone.vx; drone.y += drone.vy; // Boundaries if (drone.x < DRONE_WIDTH/2) { drone.x = DRONE_WIDTH/2; drone.vx *= -0.5; } if (drone.x > WORLD_WIDTH - DRONE_WIDTH/2) { drone.x = WORLD_WIDTH - DRONE_WIDTH/2; drone.vx *= -0.5; } if (drone.y < DRONE_HEIGHT/2) { drone.y = DRONE_HEIGHT/2; drone.vy *= -0.5; } if (drone.y > WORLD_HEIGHT - DRONE_HEIGHT/2) { drone.y = WORLD_HEIGHT - DRONE_HEIGHT/2; drone.vy *= -0.3; // Simulate landing friction if (Math.abs(drone.vy) < 1) drone.vy = 0; } } // HUD update function updateHUD() { altitudeDisplay.textContent = Math.max(0, Math.floor((WORLD_HEIGHT - drone.y) / 10)); speedDisplay.textContent = Math.floor(Math.sqrt(drone.vx*drone.vx + drone.vy*drone.vy) * 20); } // Main loop function loop() { updateDrone(); updateCamera(); ctx.clearRect(0, 0, canvas.width, canvas.height); drawCity(ctx, camera); drawDrone(ctx, camera); updateHUD(); requestAnimationFrame(loop); } // Controls window.addEventListener('keydown', (e) => { if (e.code === 'ArrowLeft') drone.left = true; if (e.code === 'ArrowRight') drone.right = true; if (e.code === 'ArrowUp') drone.throttleUp = true; if (e.code === 'ArrowDown') drone.throttleDown = true; if (e.code === 'KeyA') drone.rotatingLeft = true; if (e.code === 'KeyD') drone.rotatingRight = true; if (e.code === 'KeyR') drone = getInitialState(); }); window.addEventListener('keyup', (e) => { if (e.code === 'ArrowLeft') drone.left = false; if (e.code === 'ArrowRight') drone.right = false; if (e.code === 'ArrowUp') drone.throttleUp = false; if (e.code === 'ArrowDown') drone.throttleDown = false; if (e.code === 'KeyA') drone.rotatingLeft = false; if (e.code === 'KeyD') drone.rotatingRight = false; }); // Start loop();