ARSAL CITY

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ARSAL CITY</title>
<style>
body {
  margin: 0;
  background: #20252b;
  color: white;
  font-family: Arial;
  text-align: center;
}
h1 { color: gold; }
canvas {
  width: 95%;
  max-width: 900px;
  background: #65a65b;
  border: 3px solid white;
}
button {
  padding: 12px 20px;
  margin: 5px;
  font-size: 18px;
  border-radius: 10px;
}
</style>
</head>
<body>

<h1>🏙️ ARSAL CITY</h1>
<p>WASD = Move | E = Enter / Exit Car</p>

<canvas id="game" width="900" height="500"></canvas>

<div>
<button onclick="move(0,-1)">⬆️</button><br>
<button onclick="move(-1,0)">⬅️</button>
<button onclick="move(0,1)">⬇️</button>
<button onclick="move(1,0)">➡️</button>
<button onclick="enterExit()">🚗 ENTER / EXIT</button>
</div>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let player = {x:130,y:250};
let cars = [
 {x:250,y:220,color:"yellow",name:"Lamborghini"},
 {x:390,y:220,color:"blue",name:"Bugatti"},
 {x:530,y:220,color:"white",name:"Toyota"},
 {x:670,y:220,color:"red",name:"Truck"}
];

let driving = false;
let selected = 0;

function move(dx,dy) {
 if(driving) {
   cars[selected].x += dx*10;
   cars[selected].y += dy*10;
 } else {
   player.x += dx*6;
   player.y += dy*6;
 }
}

function enterExit() {
 if(driving) {
   player.x = cars[selected].x;
   player.y = cars[selected].y+40;
   driving = false;
   return;
 }

 let nearest = -1;
 let distance = 60;

 cars.forEach((car,i)=>{
   let d = Math.hypot(player.x-car.x,player.y-car.y);
   if(d<distance) {
     distance=d;
     nearest=i;
   }
 });

 if(nearest !== -1) {
   selected=nearest;
   driving=true;
 }
}

document.addEventListener("keydown",e=>{
 let k=e.key.toLowerCase();
 if(k==="w")move(0,-1);
 if(k==="s")move(0,1);
 if(k==="a")move(-1,0);
 if(k==="d")move(1,0);
 if(k==="e")enterExit();
});

function drawCar(car) {
 ctx.fillStyle=car.color;
 ctx.fillRect(car.x-35,car.y-15,70,30);

 ctx.fillStyle="#111";
 ctx.fillRect(car.x-20,car.y-21,18,8);
 ctx.fillRect(car.x+5,car.y-21,18,8);

 ctx.fillStyle="white";
 ctx.font="12px Arial";
 ctx.fillText(car.name,car.x-35,car.y+32);
}

function draw() {
 ctx.clearRect(0,0,900,500);

 // City roads
 ctx.fillStyle="#555";
 ctx.fillRect(0,180,900,140);
 ctx.fillRect(380,0,140,500);

 // Road markings
 ctx.strokeStyle="white";
 ctx.setLineDash([25,20]);
 ctx.beginPath();
 ctx.moveTo(0,250);
 ctx.lineTo(900,250);
 ctx.moveTo(450,0);
 ctx.lineTo(450,500);
 ctx.stroke();
 ctx.setLineDash([]);

 // Buildings
 for(let x=20;x<900;x+=180) {
   ctx.fillStyle="#777";
   ctx.fillRect(x,20,90,100);
   ctx.fillRect(x,370,90,100);
 }

 // Cars
 cars.forEach(drawCar);

 // Player
 if(!driving) {
   ctx.fillStyle="#ffcc99";
   ctx.beginPath();
   ctx.arc(player.x,player.y,10,0,Math.PI*2);
   ctx.fill();

   ctx.fillStyle="blue";
   ctx.fillRect(player.x-7,player.y+10,14,20);
 }

 ctx.fillStyle="white";
 ctx.font="22px Arial";
 ctx.fillText(driving?"DRIVING 🚗":"WALKING 🚶",20,30);

 requestAnimationFrame(draw);
}

draw();
</script>
</body>
</html>