GTA Open World

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GTA Open World</title>
<style>
body{margin:0;background:#111;color:white;text-align:center;font-family:Arial}
canvas{width:100%;max-width:900px;background:#65a35b;touch-action:none}
button{padding:13px;margin:4px;font-size:18px}
</style>
</head>
<body>
<h2>GTA OPEN WORLD</h2>
<p id="stats">Money: $0</p>
<canvas id="game" width="900" height="600"></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="carMode()">🚗 Car</button>
<button onclick="nextCharacter()">👤 Character</button>
<button onclick="mission()">⭐ Mission</button>
</div>
<script>
const canvas=document.getElementById("game");
const ctx=canvas.getContext("2d");

let p={x:100,y:100};
let car={x:350,y:250};
let driving=false;
let money=0;
let character=0;
let characters=["👨","👩","🧑"];
let missionDone=0;

let buildings=[
[40,40],[200,40],[550,40],[720,40],
[40,400],[200,400],[550,400],[720,400]
];

let animals=[
{x:150,y:320,t:"🐕"},
{x:600,y:350,t:"🐈"},
{x:750,y:300,t:"🐄"}
];

function draw(){
ctx.clearRect(0,0,900,600);
ctx.fillStyle="#68a65b";
ctx.fillRect(0,0,900,600);

ctx.fillStyle="#444";
ctx.fillRect(0,220,900,120);
ctx.fillRect(390,0,120,600);

ctx.fillStyle="#999";
buildings.forEach(b=>ctx.fillRect(b[0],b[1],100,100));

ctx.font="35px Arial";
animals.forEach(a=>ctx.fillText(a.t,a.x,a.y));

ctx.font="45px Arial";
ctx.fillText("🚗",car.x,car.y);

if(!driving){
ctx.fillText(characters[character],p.x,p.y);
}

ctx.fillStyle="white";
ctx.font="20px Arial";
ctx.fillText("CITY MISSION: Collect coins",20,580);

requestAnimationFrame(draw);
}

function move(x,y){
let speed=driving?18:12;
if(driving){
car.x+=x*speed;
car.y+=y*speed;
}else{
p.x+=x*speed;
p.y+=y*speed;
}
p.x=Math.max(10,Math.min(850,p.x));
p.y=Math.max(30,Math.min(550,p.y));
car.x=Math.max(10,Math.min(850,car.x));
car.y=Math.max(30,Math.min(550,car.y));
}

function carMode(){
if(!driving && Math.hypot(p.x-car.x,p.y-car.y)<90){
driving=true;
}else if(driving){
driving=false;
p.x=car.x+45;
p.y=car.y;
}
}

function nextCharacter(){
character=(character+1)%characters.length;
}

function mission(){
money+=500;
missionDone++;
document.getElementById("stats").innerText=
"Money: $"+money+" | Missions: "+missionDone;
alert("Mission completed! You earned $500");
}

window.addEventListener("keydown",e=>{
let k=e.key.toLowerCase();
if(k==="w"||k==="arrowup")move(0,-1);
if(k==="s"||k==="arrowdown")move(0,1);
if(k==="a"||k==="arrowleft")move(-1,0);
if(k==="d"||k==="arrowright")move(1,0);
if(k==="e")carMode();
});

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