import React, { useEffect, useRef, useState } from "react"; export default function KarachiRikshaGame() { const canvasRef = useRef(null); const animationRef = useRef(null); const keysRef = useRef({}); const [gameState, setGameState] = useState("menu"); const [score, setScore] = useState(0); const [bestScore, setBestScore] = useState(0); const [speed, setSpeed] = useState(6); useEffect(() => { const savedBest = Number(localStorage.getItem("riksha-best-score") || 0); setBestScore(savedBest); }, []); useEffect(() => { const down = (e) => { keysRef.current[e.key.toLowerCase()] = true; if (["arrowup", "arrowdown", "arrowleft", "arrowright", " "].includes(e.key.toLowerCase())) { e.preventDefault(); } }; const up = (e) => { keysRef.current[e.key.toLowerCase()] = false; }; window.addEventListener("keydown", down, { passive: false }); window.addEventListener("keyup", up); return () => { window.removeEventListener("keydown", down); window.removeEventListener("keyup", up); }; }, []); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); const W = canvas.width; const H = canvas.height; const road = { x: 90, width: 320, laneCount: 3, lineOffset: 0, }; const player = { x: W / 2 - 22, y: H - 120, width: 44, height: 72, speed: 5.5, }; const obstacles = []; const pickups = []; const scenery = []; let frame = 0; let scoreValue = 0; let speedValue = 6; let running = true; function resetObjects() { obstacles.length = 0; pickups.length = 0; scenery.length = 0; for (let i = 0; i < 10; i++) { scenery.push({ x: i % 2 === 0 ? 30 : 450, y: i * 70, type: i % 3, }); } } resetObjects(); function laneCenter(laneIndex) { const laneWidth = road.width / road.laneCount; return road.x + laneWidth * laneIndex + laneWidth / 2; } function spawnObstacle() { const lane = Math.floor(Math.random() * road.laneCount); const types = ["car", "bus", "bike"]; const type = types[Math.floor(Math.random() * types.length)]; const dims = { car: { width: 42, height: 74 }, bus: { width: 52, height: 100 }, bike: { width: 26, height: 56 }, }[type]; obstacles.push({ x: laneCenter(lane) - dims.width / 2, y: -120, width: dims.width, height: dims.height, type, }); } function spawnPickup() { const lane = Math.floor(Math.random() * road.laneCount); pickups.push({ x: laneCenter(lane), y: -30, size: 18, }); } function rectsCollide(a, b) { return ( a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y ); } function circleRectCollide(circle, rect) { const closestX = Math.max(rect.x, Math.min(circle.x, rect.x + rect.width)); const closestY = Math.max(rect.y, Math.min(circle.y, rect.y + rect.height)); const dx = circle.x - closestX; const dy = circle.y - closestY; return dx * dx + dy * dy < circle.size * circle.size; } function drawSky() { const gradient = ctx.createLinearGradient(0, 0, 0, H); gradient.addColorStop(0, "#87ceeb"); gradient.addColorStop(1, "#e6f7ff"); ctx.fillStyle = gradient; ctx.fillRect(0, 0, W, H); } function drawRoadside() { ctx.fillStyle = "#d9c29c"; ctx.fillRect(0, 0, road.x, H); ctx.fillRect(road.x + road.width, 0, W - (road.x + road.width), H); scenery.forEach((item) => { if (item.type === 0) { ctx.fillStyle = "#2e8b57"; ctx.beginPath(); ctx.arc(item.x, item.y, 16, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#6b4f2a"; ctx.fillRect(item.x - 3, item.y + 12, 6, 20); } else if (item.type === 1) { ctx.fillStyle = "#c97b63"; ctx.fillRect(item.x - 18, item.y - 10, 36, 24); ctx.fillStyle = "#7a3e2f"; ctx.fillRect(item.x - 22, item.y + 14, 44, 8); } else { ctx.fillStyle = "#ffd54f"; ctx.beginPath(); ctx.moveTo(item.x, item.y - 18); ctx.lineTo(item.x - 14, item.y + 10); ctx.lineTo(item.x + 14, item.y + 10); ctx.closePath(); ctx.fill(); ctx.fillStyle = "#555"; ctx.fillRect(item.x - 2, item.y + 10, 4, 22); } }); } function drawRoad() { ctx.fillStyle = "#2f2f35"; ctx.fillRect(road.x, 0, road.width, H); ctx.strokeStyle = "#ffffff"; ctx.lineWidth = 4; ctx.setLineDash([26, 22]); for (let i = 1; i < road.laneCount; i++) { const lx = road.x + (road.width / road.laneCount) * i; ctx.beginPath(); ctx.moveTo(lx, -40 + road.lineOffset); ctx.lineTo(lx, H + 40); ctx.stroke(); } ctx.setLineDash([]); ctx.strokeStyle = "#f5d76e"; ctx.lineWidth = 6; ctx.beginPath(); ctx.moveTo(road.x, 0); ctx.lineTo(road.x, H); ctx.stroke(); ctx.beginPath(); ctx.moveTo(road.x + road.width, 0); ctx.lineTo(road.x + road.width, H); ctx.stroke(); } function drawRiksha(x, y) { ctx.fillStyle = "#17a34a"; ctx.fillRect(x, y + 18, player.width, player.height - 18); ctx.fillStyle = "#111827"; ctx.fillRect(x + 4, y + 4, player.width - 8, 22); ctx.fillStyle = "#facc15"; ctx.fillRect(x + 2, y + 14, player.width - 4, 10); ctx.fillStyle = "#93c5fd"; ctx.fillRect(x + 8, y + 8, 12, 12); ctx.fillRect(x + 24, y + 8, 12, 12); ctx.fillStyle = "#111"; ctx.beginPath(); ctx.arc(x + 8, y + player.height - 4, 7, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(x + player.width - 8, y + player.height - 4, 7, 0, Math.PI * 2); ctx.fill(); } function drawObstacle(ob) { if (ob.type === "car") { ctx.fillStyle = "#ef4444"; } else if (ob.type === "bus") { ctx.fillStyle = "#f59e0b"; } else { ctx.fillStyle = "#60a5fa"; } ctx.fillRect(ob.x, ob.y, ob.width, ob.height); ctx.fillStyle = "#111827"; ctx.fillRect(ob.x + 4, ob.y + 6, ob.width - 8, 14); ctx.fillStyle = "#111"; ctx.beginPath(); ctx.arc(ob.x + 8, ob.y + ob.height - 4, 5, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(ob.x + ob.width - 8, ob.y + ob.height - 4, 5, 0, Math.PI * 2); ctx.fill(); } function drawPickup(p) { ctx.fillStyle = "#22c55e"; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#ffffff"; ctx.font = "bold 16px sans-serif"; ctx.textAlign = "center"; ctx.fillText("Rs", p.x, p.y + 5); } function drawHud() { ctx.fillStyle = "rgba(17,24,39,0.82)"; ctx.fillRect(12, 12, 210, 84); ctx.fillStyle = "#ffffff"; ctx.font = "bold 18px sans-serif"; ctx.textAlign = "left"; ctx.fillText(`Score: ${Math.floor(scoreValue)}`, 24, 40); ctx.fillText(`Best: ${bestScore}`, 24, 64); ctx.fillText(`Speed: ${speedValue.toFixed(1)}`, 24, 88); ctx.fillStyle = "rgba(17,24,39,0.8)"; ctx.fillRect(220, 12, 180, 56); ctx.fillStyle = "#fef3c7"; ctx.font = "14px sans-serif"; ctx.fillText("Karachi Riksha MVP", 232, 34); ctx.fillStyle = "#e5e7eb"; ctx.fillText("Arrows / A,D se steer", 232, 56); } function update() { if (!running || gameState !== "playing") return; frame += 1; scoreValue += 0.15; speedValue = Math.min(14, 6 + scoreValue / 45); road.lineOffset = (road.lineOffset + speedValue) % 48; if (keysRef.current["arrowleft"] || keysRef.current["a"]) { player.x -= player.speed; } if (keysRef.current["arrowright"] || keysRef.current["d"]) { player.x += player.speed; } if (keysRef.current["arrowup"] || keysRef.current["w"]) { scoreValue += 0.03; } const minX = road.x + 8; const maxX = road.x + road.width - player.width - 8; player.x = Math.max(minX, Math.min(maxX, player.x)); if (frame % 42 === 0) spawnObstacle(); if (frame % 120 === 0) spawnPickup(); scenery.forEach((item) => { item.y += speedValue * 0.9; if (item.y > H + 30) { item.y = -20; item.x = Math.random() > 0.5 ? 30 + Math.random() * 30 : 450 + Math.random() * 30; item.type = Math.floor(Math.random() * 3); } }); obstacles.forEach((ob) => { ob.y += speedValue; }); pickups.forEach((p) => { p.y += speedValue; }); for (let i = obstacles.length - 1; i >= 0; i--) { if (obstacles[i].y > H + 120) obstacles.splice(i, 1); } for (let i = pickups.length - 1; i >= 0; i--) { if (pickups[i].y > H + 40) pickups.splice(i, 1); } for (const ob of obstacles) { if (rectsCollide(player, ob)) { running = false; const finalScore = Math.floor(scoreValue); setScore(finalScore); setSpeed(Number(speedValue.toFixed(1))); const newBest = Math.max(bestScore, finalScore); if (newBest > bestScore) { localStorage.setItem("riksha-best-score", String(newBest)); setBestScore(newBest); } setGameState("gameover"); return; } } for (let i = pickups.length - 1; i >= 0; i--) { if (circleRectCollide(pickups[i], player)) { pickups.splice(i, 1); scoreValue += 12; } } setScore(Math.floor(scoreValue)); setSpeed(Number(speedValue.toFixed(1))); } function render() { drawSky(); drawRoadside(); drawRoad(); pickups.forEach(drawPickup); obstacles.forEach(drawObstacle); drawRiksha(player.x, player.y); drawHud(); if (gameState === "menu") { ctx.fillStyle = "rgba(0,0,0,0.55)"; ctx.fillRect(0, 0, W, H); ctx.fillStyle = "#ffffff"; ctx.textAlign = "center"; ctx.font = "bold 30px sans-serif"; ctx.fillText("Karachi Riksha", W / 2, 180); ctx.font = "18px sans-serif"; ctx.fillText("Saddar style endless road MVP", W / 2, 215); ctx.fillText("Arrow keys ya A/D use karo", W / 2, 250); ctx.fillText("Coins lo, traffic se bacho", W / 2, 280); ctx.fillStyle = "#facc15"; ctx.fillText("Start Game button dabao", W / 2, 330); } if (gameState === "gameover") { ctx.fillStyle = "rgba(0,0,0,0.6)"; ctx.fillRect(0, 0, W, H); ctx.fillStyle = "#ffffff"; ctx.textAlign = "center"; ctx.font = "bold 30px sans-serif"; ctx.fillText("Accident ho gaya", W / 2, 200); ctx.font = "20px sans-serif"; ctx.fillText(`Final Score: ${Math.floor(scoreValue)}`, W / 2, 240); ctx.fillText(`Best Score: ${Math.max(bestScore, Math.floor(scoreValue))}`, W / 2, 272); ctx.fillStyle = "#fde68a"; ctx.fillText("Restart dabao aur dobara chalao", W / 2, 320); } } function loop() { update(); render(); animationRef.current = requestAnimationFrame(loop); } loop(); return () => { running = false; if (animationRef.current) cancelAnimationFrame(animationRef.current); }; }, [gameState, bestScore]); const startGame = () => { setScore(0); setSpeed(6); setGameState("playing"); }; const restartGame = () => { setScore(0); setSpeed(6); setGameState("playing"); }; return (

Karachi Riksha Driving Game

Ye ek MVP endless runner hai jahan tumhara riksha Karachi ki road par traffic ke beech chalta hai. Abhi is version mein steering, score, pickups, speed scaling aur game over system diya gaya hai.

Controls

Left / Right arrows ya A / D

MVP Features

3-lane road
Riksha player
Cars, bus, bike obstacles
Rs pickups
Increasing difficulty
Best score saved

Agla step: horn sound, passengers pickup, Karachi landmarks, fuel system aur mobile touch controls.

); }