Shadow City

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Shadow City</title>
<style>
body{margin:0;background:#101820;color:white;font-family:Arial;text-align:center}
h2{color:#4de1ff}
canvas{width:100%;max-width:700px;background:#555;touch-action:none}
button{padding:14px;margin:5px;border-radius:12px;background:#182c40;color:white;font-size:22px;border:2px solid #4de1ff}
</style>
</head>
<body>
<h2>SHADOW CITY</h2>
<p>Open City • Drive Your Car</p>
<canvas id="c" width="700" height="450"></canvas>
<div>
<button id="l">◀</button><button id="f">▲</button>
<button id="b">▼</button><button id="r">▶</button>
</div>
<p>Drive around the city using the buttons.</p>
<script>
const c=document.getElementById('c'),g=c.getContext('2d');
let x=350,y=220,a=0,v=0;
let k={};
function bind(id,key){
let e=document.getElementById(id);
e.onpointerdown=ev=>{ev.preventDefault();k[key]=1};
e.onpointerup=e.onpointercancel=e.onpointerleave=()=>k[key]=0;
}
bind('l','l');bind('r','r');bind('f','f');bind('b','b');
function frame(){
g.fillStyle='#53664d';g.fillRect(0,0,700,450);
for(let i=-100;i<800;i+=170){
g.fillStyle='#343a40';g.fillRect(i,0,65,450);
g.fillRect(0,i,700,65);
g.fillStyle='#d4c878';
for(let j=0;j<450;j+=35)g.fillRect(i+31,j,3,17);
for(let j=0;j<450;j+=170){
g.fillStyle='#78848b';g.fillRect(i+77,j+12,70,58);
g.fillStyle='#b4d7e0';g.fillRect(i+87,j+23,14,12);
g.fillRect(i+119,j+23,14,12);
}
}
if(k.l)a-=.05;if(k.r)a+=.05;
if(k.f)v=Math.min(v+.07,3.5);
else if(k.b)v=Math.max(v-.1,-1.5);
else v*=.98;
x+=Math.sin(a)*v;y-=Math.cos(a)*v;
x=(x+700)%700;y=(y+450)%450;
g.save();g.translate(x,y);g.rotate(a);
g.fillStyle='#090b10';g.fillRect(-17,-25,34,50);
g.fillStyle='#168dc2';g.fillRect(-13,-22,26,44);
g.fillStyle='#9cecff';g.fillRect(-10,-15,20,10);
g.fillStyle='#d7f8ff';g.fillRect(-11,-23,7,3);g.fillRect(4,-23,7,3);
g.restore();
g.fillStyle='white';g.font='18px Arial';
g.fillText('SHADOW CITY  |  SPEED '+Math.round(Math.abs(v)*30),12,25);
requestAnimationFrame(frame);
}
frame();
</script>
</body>
</html>