const canvas = document.getElementById("gameCanvas"); const ctx = canvas.getContext("2d"); const scoreValue = document.getElementById("scoreValue"); const timeValue = document.getElementById("timeValue"); const comboValue = document.getElementById("comboValue"); const missionText = document.getElementById("missionText"); const missionIcon = document.getElementById("missionIcon"); const startScreen = document.getElementById("startScreen"); const gameOverScreen = document.getElementById("gameOverScreen"); const startButton = document.getElementById("startButton"); const restartButton = document.getElementById("restartButton"); const finalScore = document.getElementById("finalScore"); const finalDeliveries = document.getElementById("finalDeliveries"); const finalCombo = document.getElementById("finalCombo"); const bestScoreText = document.getElementById("bestScoreText"); const gameOverTitle = document.getElementById("gameOverTitle"); let W = 0; let H = 0; let dpr = 1; let running = false; let lastTime = 0; let elapsed = 0; let score = 0; let timeLeft = 60; let combo = 1; let bestCombo = 1; let deliveries = 0; let crashes = 0; let goldPackages = 0; let crashCooldown = 0; let carrying = false; let currentPackage = null; let deliveryPoint = null; let traffic = []; let message = ""; let messageTimer = 0; let cameraShake = 0; let best = Number(localStorage.getItem("tiny_delivery_best") || 0); const keys = new Set(); const car = { x: 0, y: 0, angle: 0, vx: 0, vy: 0, maxSpeed: 250, response: 14, stopResponse: 22, turnResponse: 16, radius: 14, color: "#f7b928" }; const COLORS = { grass: "#8bcf62", grass2: "#7fc358", road: "#454d57", roadEdge: "#656d76", sidewalk: "#d6d0c4", curb: "#b6afa3", lane: "rgba(255,255,255,.7)", yellow: "#f2cf52", ink: "#1e2530", shadow: "rgba(21,29,19,.22)", }; let city = { roadX: [], roadY: [], roadWidth: 72, lots: [], buildings: [], parks: [], decorations: [] }; const HUD_SAFE_TOP = 108; function resize() { dpr = Math.min(window.devicePixelRatio || 1, 2); W = window.innerWidth; H = window.innerHeight; canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.width = W + "px"; canvas.style.height = H + "px"; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); buildCity(); if (!running) { draw(); } } window.addEventListener("resize", resize); resize(); function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } function rand(min, max) { return Math.random() * (max - min) + min; } function rr(x, y, w, h, r) { ctx.beginPath(); ctx.roundRect(x, y, w, h, r); } function angleDiff(from, to) { let d = (to - from + Math.PI) % (Math.PI * 2) - Math.PI; if (d < -Math.PI) d += Math.PI * 2; return d; } function pointDistance(a, b) { return Math.hypot(a.x - b.x, a.y - b.y); } function buildCity() { const roadWidth = 72; city.roadWidth = roadWidth; const cols = W < 900 ? 3 : 4; const rows = H < 650 ? 2 : 3; const usableHeight = Math.max(320, H - HUD_SAFE_TOP); const blockW = (W - roadWidth * (cols + 1)) / cols; const blockH = (usableHeight - roadWidth * (rows + 1)) / rows; city.roadX = []; city.roadY = []; city.lots = []; city.buildings = []; city.parks = []; city.decorations = []; let x = 0; for (let c = 0; c <= cols; c++) { x += roadWidth / 2; city.roadX.push(x); x += roadWidth / 2 + (c < cols ? blockW : 0); } let y = HUD_SAFE_TOP; for (let r = 0; r <= rows; r++) { y += roadWidth / 2; city.roadY.push(y); y += roadWidth / 2 + (r < rows ? blockH : 0); } const buildingTypes = [ { name: "CAFE", color: "#d9824b", roof: "#b84f35", awning: "#2f8f5b" }, { name: "HOUSE", color: "#e8d8bb", roof: "#cf5a39", awning: null }, { name: "BOOKS", color: "#c99558", roof: "#396da8", awning: "#426da8" }, { name: "PIZZA", color: "#d4874f", roof: "#b34f34", awning: "#c8563f" }, { name: "BANK", color: "#d7d7d5", roof: "#4b6f96", awning: null }, { name: "MARKET", color: "#d49a56", roof: "#a97334", awning: "#3f9253" }, { name: "HOSPITAL", color: "#d5c4ae", roof: "#b34e3f", awning: null }, { name: "PET SHOP", color: "#c38355", roof: "#6a547f", awning: "#486eaa" }, { name: "POST OFFICE", color: "#c5c6c4", roof: "#34669e", awning: "#34669e" }, { name: "GARAGE", color: "#b8784f", roof: "#8d4b2f", awning: null } ]; let typeIndex = 0; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const left = city.roadX[c] + roadWidth / 2; const right = city.roadX[c + 1] - roadWidth / 2; const top = city.roadY[r] + roadWidth / 2; const bottom = city.roadY[r + 1] - roadWidth / 2; const lot = { row: r, col: c, roadLeft: city.roadX[c], roadRight: city.roadX[c + 1], roadTop: city.roadY[r], roadBottom: city.roadY[r + 1], x: left + 12, y: top + 12, w: Math.max(80, right - left - 24), h: Math.max(70, bottom - top - 24) }; city.lots.push(lot); const parkCell = (r === 1 && c === 1) || (r === 0 && c === cols - 1); if (parkCell) { city.parks.push(lot); continue; } const type = buildingTypes[ typeIndex % buildingTypes.length ]; typeIndex++; const bw = lot.w * 0.68; const bh = lot.h * 0.62; city.buildings.push({ x: lot.x + (lot.w - bw) / 2, y: lot.y + (lot.h - bh) / 2, w: bw, h: bh, type }); } } // Decorative objects remain inside lots and are never placed on roads. city.lots.forEach((lot, i) => { const count = 3 + (i % 3); for ( let n = 0; n < count; n++ ) { const tx = lot.x + 18 + ( (n * 53 + i * 31) % Math.max(30, lot.w - 36) ); const ty = lot.y + 20 + ( (n * 67 + i * 41) % Math.max(30, lot.h - 40) ); const blocked = city.buildings.some(b => tx > b.x - 22 && tx < b.x + b.w + 22 && ty > b.y - 22 && ty < b.y + b.h + 22 ); if (!blocked) { city.decorations.push({ type: n % 4 === 0 ? "lamp" : "tree", x: tx, y: ty }); } } }); } function isRoadPoint(x, y) { if (y < HUD_SAFE_TOP) { return false; } const half = city.roadWidth / 2 - 8; const vertical = city.roadX.some( rx => Math.abs(x - rx) <= half ); const horizontal = city.roadY.some( ry => Math.abs(y - ry) <= half ); return vertical || horizontal; } function randomRoadPoint() { const chooseVertical = Math.random() < 0.5; if (chooseVertical) { const rx = city.roadX[ Math.floor( Math.random() * city.roadX.length ) ]; return { x: rx + rand( -city.roadWidth * 0.22, city.roadWidth * 0.22 ), y: rand( HUD_SAFE_TOP + city.roadWidth / 2, H - 35 ) }; } const ry = city.roadY[ Math.floor( Math.random() * city.roadY.length ) ]; return { x: rand(35, W - 35), y: ry + rand( -city.roadWidth * 0.22, city.roadWidth * 0.22 ) }; } function randomDeliveryPoint() { const lot = city.lots[ Math.floor( Math.random() * city.lots.length ) ]; const side = Math.floor( Math.random() * 4 ); // Put the marker in the lane closest to the selected lot, // not inside the lot or building. const laneOffset = 18; const edgePadding = 28; if (side === 0) { // Top road. return { x: rand( lot.x + edgePadding, lot.x + lot.w - edgePadding ), y: lot.roadTop + laneOffset }; } if (side === 1) { // Right road. return { x: lot.roadRight - laneOffset, y: rand( lot.y + edgePadding, lot.y + lot.h - edgePadding ) }; } if (side === 2) { // Bottom road. return { x: rand( lot.x + edgePadding, lot.x + lot.w - edgePadding ), y: lot.roadBottom - laneOffset }; } // Left road. return { x: lot.roadLeft + laneOffset, y: rand( lot.y + edgePadding, lot.y + lot.h - edgePadding ) }; } function spawnTraffic() { traffic = []; const count = Math.min(10, 4 + Math.floor(deliveries / 2)); for (let i = 0; i < count; i++) { const vertical = Math.random() < 0.5; if (vertical) { const rx = city.roadX[Math.floor(Math.random() * city.roadX.length)]; traffic.push({ x: rx + (Math.random() < 0.5 ? -18 : 18), y: rand(HUD_SAFE_TOP + 42, H - 20), angle: Math.PI / 2, vx: 0, vy: (Math.random() < 0.5 ? -1 : 1) * rand(55, 95), radius: 13, color: ["#3a80d6", "#2bb7a0", "#8057c8", "#ef6d55"][i % 4] }); } else { const ry = city.roadY[Math.floor(Math.random() * city.roadY.length)]; traffic.push({ x: rand(0, W), y: ry + (Math.random() < 0.5 ? -18 : 18), angle: 0, vx: (Math.random() < 0.5 ? -1 : 1) * rand(55, 95), vy: 0, radius: 13, color: ["#3a80d6", "#2bb7a0", "#8057c8", "#ef6d55"][i % 4] }); } } } function newDelivery() { carrying = false; const gold = deliveries >= 2 && Math.random() < 0.16; currentPackage = { ...randomDeliveryPoint(), gold }; deliveryPoint = randomDeliveryPoint(); // Avoid making pickup and drop point almost identical. let guard = 0; while (pointDistance(currentPackage, deliveryPoint) < Math.min(W, H) * 0.28 && guard < 20) { deliveryPoint = randomDeliveryPoint(); guard++; } missionText.textContent = gold ? "Pick up the GOLD package" : "Pick up the package"; missionIcon.textContent = gold ? "✨" : "📦"; } function resetGame() { score = 0; timeLeft = 60; elapsed = 0; combo = 1; bestCombo = 1; deliveries = 0; crashes = 0; goldPackages = 0; crashCooldown = 0; cameraShake = 0; message = ""; messageTimer = 0; buildCity(); const p = randomRoadPoint(); car.x = p.x; car.y = p.y; car.angle = 0; car.vx = 0; car.vy = 0; spawnTraffic(); newDelivery(); updateHUD(); startScreen.classList.add("hidden"); gameOverScreen.classList.add("hidden"); running = true; lastTime = performance.now(); requestAnimationFrame(loop); } function updateHUD() { scoreValue.textContent = Math.floor(score).toLocaleString(); timeValue.textContent = Math.max(0, timeLeft).toFixed(1); comboValue.textContent = "x" + combo; } function showMessage(text) { message = text; messageTimer = 1.05; } function crash() { if (crashCooldown > 0) return; crashCooldown = 0.65; crashes++; combo = 1; timeLeft = Math.max(0, timeLeft - 2); cameraShake = 1; showMessage("-2 SEC"); updateHUD(); } function pickupPackage() { carrying = true; missionText.textContent = currentPackage.gold ? "Deliver the GOLD package" : "Deliver the package"; missionIcon.textContent = currentPackage.gold ? "⭐" : "🏠"; showMessage("PACKAGE PICKED UP"); } function completeDelivery() { deliveries++; if (currentPackage.gold) { goldPackages++; } const base = currentPackage.gold ? 900 : 350; const gain = base * combo; score += gain; combo++; bestCombo = Math.max(bestCombo, combo); timeLeft += currentPackage.gold ? 6 : 4; showMessage(currentPackage.gold ? `GOLD +${gain}` : `DELIVERED +${gain}` ); if (deliveries % 3 === 0) { spawnTraffic(); } newDelivery(); updateHUD(); } function nearestRoadCorrection() { // Keep the player visually on roads instead of allowing them into lots. if (isRoadPoint(car.x, car.y)) return; const candidates = []; city.roadX.forEach(rx => candidates.push({ x: rx, y: car.y })); city.roadY.forEach(ry => candidates.push({ x: car.x, y: ry })); let bestPoint = candidates[0]; let bestDist = Infinity; candidates.forEach(p => { const d = Math.hypot(p.x - car.x, p.y - car.y); if (d < bestDist) { bestDist = d; bestPoint = p; } }); car.x += (bestPoint.x - car.x) * 0.35; car.y += (bestPoint.y - car.y) * 0.35; } function updateCar(dt) { let dx = 0; let dy = 0; if (keys.has("w") || keys.has("arrowup")) dy -= 1; if (keys.has("s") || keys.has("arrowdown")) dy += 1; if (keys.has("a") || keys.has("arrowleft")) dx -= 1; if (keys.has("d") || keys.has("arrowright")) dx += 1; const mag = Math.hypot(dx, dy); if (mag > 0) { dx /= mag; dy /= mag; const targetVx = dx * car.maxSpeed; const targetVy = dy * car.maxSpeed; const response = 1 - Math.exp(-car.response * dt); car.vx += (targetVx - car.vx) * response; car.vy += (targetVy - car.vy) * response; const targetAngle = Math.atan2(dy, dx); const angleResponse = 1 - Math.exp(-car.turnResponse * dt); car.angle += angleDiff(car.angle, targetAngle) * angleResponse; } else { const stop = 1 - Math.exp(-car.stopResponse * dt); car.vx += (0 - car.vx) * stop; car.vy += (0 - car.vy) * stop; } const oldX = car.x; const oldY = car.y; car.x += car.vx * dt; car.y += car.vy * dt; if (!isRoadPoint(car.x, car.y)) { car.x = oldX; car.y = oldY; const impact = Math.hypot(car.vx, car.vy); if (impact > 80) crash(); car.vx *= -0.12; car.vy *= -0.12; } car.x = clamp(car.x, 15, W - 15); car.y = clamp(car.y, 15, H - 15); nearestRoadCorrection(); } function updateTraffic(dt) { traffic.forEach(v => { v.x += v.vx * dt; v.y += v.vy * dt; if (v.x < -40) v.x = W + 40; if (v.x > W + 40) v.x = -40; if (v.y < HUD_SAFE_TOP + 18) v.y = H + 40; if (v.y > H + 40) v.y = HUD_SAFE_TOP + 40; if (Math.hypot(car.x - v.x, car.y - v.y) < car.radius + v.radius) { const nx = car.x - v.x; const ny = car.y - v.y; const m = Math.hypot(nx, ny) || 1; car.x += (nx / m) * 18; car.y += (ny / m) * 18; car.vx += (nx / m) * 80; car.vy += (ny / m) * 80; crash(); } }); } function checkMission() { if (!carrying) { if (pointDistance(car, currentPackage) < 34) { pickupPackage(); } } else { if (pointDistance(car, deliveryPoint) < 36) { completeDelivery(); } } } function endGame() { if (!running) return; running = false; const rounded = Math.floor(score); if (window.Arcade && typeof window.Arcade.submitScore === "function") { window.Arcade.submitScore({ score: rounded, duration: elapsed, stats: { deliveries, bestCombo, crashes, goldPackages } }); } if (rounded > best) { best = rounded; localStorage.setItem("tiny_delivery_best", best); gameOverTitle.textContent = "NEW BEST"; } else { gameOverTitle.textContent = "SHIFT OVER"; } finalScore.textContent = rounded.toLocaleString(); finalDeliveries.textContent = deliveries; finalCombo.textContent = "x" + bestCombo; bestScoreText.textContent = "Best: " + best.toLocaleString(); setTimeout(() => { gameOverScreen.classList.remove("hidden"); }, 250); } function update(dt) { elapsed += dt; timeLeft -= dt; updateCar(dt); updateTraffic(dt); checkMission(); if (messageTimer > 0) messageTimer -= dt; if (crashCooldown > 0) crashCooldown -= dt; cameraShake = Math.max(0, cameraShake - dt * 4); updateHUD(); if (timeLeft <= 0) { timeLeft = 0; endGame(); } } function drawRoads() { const rw = city.roadWidth; // World background. ctx.fillStyle = COLORS.grass; ctx.fillRect(0, 0, W, H); // Dedicated HUD-safe strip. ctx.fillStyle = "#7dc35a"; ctx.fillRect(0, 0, W, HUD_SAFE_TOP); ctx.fillStyle = "rgba(255,255,255,.08)"; ctx.fillRect(0, HUD_SAFE_TOP - 2, W, 2); // Grass texture below HUD. for (let i = 0; i < 160; i++) { const x = (i * 97 + 31) % W; const y = HUD_SAFE_TOP + ((i * 61 + 17) % Math.max(1, H - HUD_SAFE_TOP)); ctx.fillStyle = i % 2 === 0 ? "rgba(49,100,37,.08)" : "rgba(255,255,255,.08)"; ctx.beginPath(); ctx.arc( x, y, i % 5 === 0 ? 2 : 1.2, 0, Math.PI * 2 ); ctx.fill(); } // Sidewalk beds. ctx.strokeStyle = COLORS.sidewalk; ctx.lineWidth = rw + 22; city.roadX.forEach(x => { ctx.beginPath(); ctx.moveTo(x, HUD_SAFE_TOP); ctx.lineTo(x, H); ctx.stroke(); }); city.roadY.forEach(y => { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }); // Asphalt. ctx.strokeStyle = COLORS.road; ctx.lineWidth = rw; city.roadX.forEach(x => { ctx.beginPath(); ctx.moveTo(x, HUD_SAFE_TOP); ctx.lineTo(x, H); ctx.stroke(); }); city.roadY.forEach(y => { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(W, y); ctx.stroke(); }); // Clean dashed center lines. // These are intentionally drawn only BETWEEN intersections, // leaving each intersection/crosswalk area completely clear. ctx.strokeStyle = "rgba(255,255,255,.62)"; ctx.lineWidth = 2; ctx.setLineDash([12, 14]); const intersectionGap = rw / 2 + 8; // Vertical roads: split into segments between horizontal roads. city.roadX.forEach(x => { let segmentStart = HUD_SAFE_TOP; city.roadY.forEach(y => { const segmentEnd = y - intersectionGap; if (segmentEnd > segmentStart) { ctx.beginPath(); ctx.moveTo(x, segmentStart); ctx.lineTo(x, segmentEnd); ctx.stroke(); } segmentStart = y + intersectionGap; }); if (segmentStart < H) { ctx.beginPath(); ctx.moveTo(x, segmentStart); ctx.lineTo(x, H); ctx.stroke(); } }); // Horizontal roads: split into segments between vertical roads. city.roadY.forEach(y => { let segmentStart = 0; city.roadX.forEach(x => { const segmentEnd = x - intersectionGap; if (segmentEnd > segmentStart) { ctx.beginPath(); ctx.moveTo(segmentStart, y); ctx.lineTo(segmentEnd, y); ctx.stroke(); } segmentStart = x + intersectionGap; }); if (segmentStart < W) { ctx.beginPath(); ctx.moveTo(segmentStart, y); ctx.lineTo(W, y); ctx.stroke(); } }); ctx.setLineDash([]); // Crosswalk helper. function drawCrosswalk(x, y) { const stripe = 6; const gap = 5; const depth = 14; const inset = 8; ctx.fillStyle = "rgba(255,255,255,.88)"; const usable = rw - inset * 2; const count = Math.floor( usable / (stripe + gap) ); // North / south crossings. for (let i = 0; i < count; i++) { const sx = x - rw / 2 + inset + i * (stripe + gap); ctx.fillRect( sx, y - rw / 2 + 5, stripe, depth ); ctx.fillRect( sx, y + rw / 2 - depth - 5, stripe, depth ); } // West / east crossings. for (let i = 0; i < count; i++) { const sy = y - rw / 2 + inset + i * (stripe + gap); ctx.fillRect( x - rw / 2 + 5, sy, depth, stripe ); ctx.fillRect( x + rw / 2 - depth - 5, sy, depth, stripe ); } } // Only interior intersections get crosswalks. for ( let xi = 1; xi < city.roadX.length - 1; xi++ ) { for ( let yi = 1; yi < city.roadY.length - 1; yi++ ) { drawCrosswalk( city.roadX[xi], city.roadY[yi] ); } } } function drawTree(x, y, scale = 1) { ctx.fillStyle = "rgba(35,72,29,.18)"; ctx.beginPath(); ctx.ellipse(x + 5, y + 8, 15 * scale, 7 * scale, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#77533b"; ctx.fillRect(x - 2 * scale, y - 2 * scale, 4 * scale, 12 * scale); ctx.fillStyle = "#4eaa4b"; ctx.beginPath(); ctx.arc(x, y - 8 * scale, 12 * scale, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#65bc5b"; ctx.beginPath(); ctx.arc(x - 5 * scale, y - 12 * scale, 7 * scale, 0, Math.PI * 2); ctx.fill(); } function drawLamp(x, y) { ctx.strokeStyle = "#4a4f55"; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(x, y + 8); ctx.lineTo(x, y - 9); ctx.stroke(); ctx.fillStyle = "#31363c"; ctx.beginPath(); ctx.arc(x, y - 11, 5, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#ffe38a"; ctx.beginPath(); ctx.arc(x, y - 11, 2.3, 0, Math.PI * 2); ctx.fill(); } function drawPark(lot) { ctx.fillStyle = "#71bc56"; rr(lot.x, lot.y, lot.w, lot.h, 18); ctx.fill(); ctx.strokeStyle = "#d7d0c3"; ctx.lineWidth = 10; rr(lot.x + 4, lot.y + 4, lot.w - 8, lot.h - 8, 16); ctx.stroke(); const cx = lot.x + lot.w / 2; const cy = lot.y + lot.h / 2; ctx.fillStyle = "#d9d5cb"; ctx.beginPath(); ctx.arc(cx, cy, 26, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#74c8e8"; ctx.beginPath(); ctx.arc(cx, cy, 18, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#d9d5cb"; ctx.fillRect(cx - 2, cy - 20, 4, 15); drawTree(lot.x + 30, lot.y + 35, 0.9); drawTree(lot.x + lot.w - 30, lot.y + 35, 0.9); drawTree(lot.x + 30, lot.y + lot.h - 28, 0.9); } function drawBuilding(b) { const { type } = b; // Lot border / path. ctx.fillStyle = COLORS.sidewalk; rr(b.x - 16, b.y - 16, b.w + 32, b.h + 32, 18); ctx.fill(); // Lawn. ctx.fillStyle = "#79c85d"; rr(b.x - 9, b.y - 9, b.w + 18, b.h + 18, 15); ctx.fill(); // Shadow. ctx.fillStyle = COLORS.shadow; rr(b.x + 8, b.y + 10, b.w, b.h, 10); ctx.fill(); // Building body. ctx.fillStyle = type.color; rr(b.x, b.y, b.w, b.h, 10); ctx.fill(); // Roof. ctx.fillStyle = type.roof; rr(b.x - 4, b.y - 8, b.w + 8, Math.min(34, b.h * 0.25), 8); ctx.fill(); // Sign. if (type.name !== "HOUSE") { const signW = Math.min(b.w - 20, Math.max(68, type.name.length * 10)); const signX = b.x + (b.w - signW) / 2; ctx.fillStyle = "#27313a"; rr(signX, b.y + 8, signW, 24, 5); ctx.fill(); ctx.fillStyle = "#fff"; ctx.font = `800 ${Math.min(15, Math.max(11, b.w / 10))}px system-ui`; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(type.name, b.x + b.w / 2, b.y + 20); } // Door. const doorW = Math.max(16, b.w * 0.15); const doorH = Math.max(22, b.h * 0.27); ctx.fillStyle = "#5b4436"; rr(b.x + b.w / 2 - doorW / 2, b.y + b.h - doorH, doorW, doorH, 3); ctx.fill(); // Windows. const windowY = b.y + b.h * 0.52; const count = Math.max(2, Math.floor(b.w / 55)); for (let i = 0; i < count; i++) { const wx = b.x + 16 + i * ((b.w - 32) / Math.max(1, count - 1)); ctx.fillStyle = "#c9ebf6"; rr(wx - 7, windowY - 6, 14, 12, 2); ctx.fill(); ctx.fillStyle = "rgba(255,255,255,.7)"; ctx.fillRect(wx - 5, windowY - 4, 4, 3); } // Awning. if (type.awning) { ctx.fillStyle = type.awning; rr(b.x + b.w * 0.18, b.y + b.h * 0.33, b.w * 0.64, 10, 3); ctx.fill(); ctx.fillStyle = "rgba(255,255,255,.9)"; const stripes = 5; for (let i = 0; i < stripes; i++) { if (i % 2 === 0) { ctx.fillRect( b.x + b.w * 0.18 + i * (b.w * 0.64 / stripes), b.y + b.h * 0.33, b.w * 0.64 / stripes, 10 ); } } } // Little decorative shrubs. drawTree(b.x - 2, b.y + b.h + 8, 0.55); drawTree(b.x + b.w + 2, b.y + b.h + 8, 0.55); } function drawCar(x, y, angle, color, scale = 1) { ctx.save(); ctx.translate(x, y); ctx.rotate(angle); ctx.scale(scale, scale); ctx.fillStyle = "rgba(21,28,36,.22)"; rr(-17, -5, 34, 18, 7); ctx.fill(); ctx.fillStyle = "#252a31"; rr(-12, -12, 7, 4, 2); ctx.fill(); rr(5, -12, 7, 4, 2); ctx.fill(); rr(-12, 8, 7, 4, 2); ctx.fill(); rr(5, 8, 7, 4, 2); ctx.fill(); ctx.fillStyle = color; rr(-17, -9, 34, 18, 7); ctx.fill(); ctx.fillStyle = "#c7e8f4"; rr(-5, -6, 11, 12, 3); ctx.fill(); ctx.fillStyle = "rgba(255,255,255,.18)"; rr(7, -7, 8, 14, 4); ctx.fill(); ctx.fillStyle = "#fff3a6"; ctx.beginPath(); ctx.arc(16, -5, 2.2, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(16, 5, 2.2, 0, Math.PI * 2); ctx.fill(); if (color === car.color) { ctx.fillStyle = "#fff"; rr(-14, -4, 7, 8, 2); ctx.fill(); ctx.fillStyle = "#a57b19"; ctx.font = "800 7px system-ui"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("P", -10.5, 0); } ctx.restore(); } function drawMarker(point, color, icon) { const bob = Math.sin(elapsed * 5) * 3; const py = point.y - 18 + bob; ctx.beginPath(); ctx.ellipse(point.x, point.y + 8, 28, 10, 0, 0, Math.PI * 2); ctx.fillStyle = "rgba(255,255,255,.25)"; ctx.fill(); ctx.beginPath(); ctx.arc(point.x, py, 22, 0, Math.PI * 2); ctx.fillStyle = color; ctx.fill(); ctx.strokeStyle = "#fff"; ctx.lineWidth = 4; ctx.stroke(); ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "18px system-ui"; ctx.fillStyle = COLORS.ink; ctx.fillText(icon, point.x, py + 1); } function draw() { ctx.clearRect(0, 0, W, H); const shakeX = cameraShake > 0 ? rand(-5, 5) * cameraShake : 0; const shakeY = cameraShake > 0 ? rand(-5, 5) * cameraShake : 0; ctx.save(); ctx.translate(shakeX, shakeY); drawRoads(); city.parks.forEach(drawPark); city.buildings.forEach(drawBuilding); city.decorations.forEach(d => { if (d.type === "tree") drawTree(d.x, d.y, 0.75); else drawLamp(d.x, d.y); }); if (!carrying && currentPackage) { drawMarker( currentPackage, currentPackage.gold ? "#f7cf45" : "#fff", currentPackage.gold ? "★" : "📦" ); } if (carrying && deliveryPoint) { drawMarker(deliveryPoint, "#fff", "🏠"); } traffic.forEach(v => drawCar( v.x, v.y, Math.atan2(v.vy, v.vx), v.color, 0.9 )); drawCar(car.x, car.y, car.angle, car.color, 1.08); if (carrying) { ctx.save(); ctx.translate(car.x, car.y); ctx.rotate(car.angle); ctx.fillStyle = currentPackage.gold ? "#f7cf45" : "#bd8650"; rr(-6, -5, 12, 10, 2); ctx.fill(); ctx.fillStyle = "rgba(255,255,255,.55)"; ctx.fillRect(-1, -5, 2, 10); ctx.restore(); } if (message && messageTimer > 0) { ctx.globalAlpha = Math.min(1, messageTimer * 2); ctx.font = "900 24px system-ui"; ctx.textAlign = "center"; ctx.fillStyle = "#fff"; ctx.strokeStyle = "rgba(20,28,34,.3)"; ctx.lineWidth = 5; ctx.strokeText(message, W / 2, H * 0.22); ctx.fillText(message, W / 2, H * 0.22); ctx.globalAlpha = 1; } ctx.restore(); } function loop(now) { if (!running) return; const dt = Math.min( 0.033, (now - lastTime) / 1000 || 0 ); lastTime = now; update(dt); draw(); if (running) { requestAnimationFrame(loop); } } window.addEventListener( "keydown", event => { const key = event.key.toLowerCase(); if ([ "arrowup", "arrowdown", "arrowleft", "arrowright", "w", "a", "s", "d" ].includes(key)) { event.preventDefault(); keys.add(key); } }, { passive: false } ); window.addEventListener("keyup", event => { keys.delete(event.key.toLowerCase()); }); document.querySelectorAll(".touch-btn").forEach(button => { const key = button.dataset.key; const press = event => { event.preventDefault(); keys.add(key); }; const release = event => { event.preventDefault(); keys.delete(key); }; button.addEventListener("pointerdown", press); button.addEventListener("pointerup", release); button.addEventListener("pointercancel", release); button.addEventListener("pointerleave", release); }); startButton.addEventListener("click", resetGame); restartButton.addEventListener("click", resetGame); buildCity(); draw();

TINY DELIVERY

NICE RUN