Shadow City: Mobile Legends

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shadow City: Mobile Legends</title>
<style>
*{box-sizing:border-box}
body{margin:0;background:#10141b;color:white;font-family:Arial;text-align:center}
h2{margin:12px 0;color:#65e7ff}
canvas{width:100%;max-width:700px;display:block;margin:auto;background:#26352d}
p{margin:8px;font-size:13px;color:#ccd5df}
.controls{display:flex;justify-content:center;gap:12px;margin:12px}
button{background:#263849;color:white;border:2px solid #65e7ff;
border-radius:14px;padding:16px;font-size:23px;touch-action:none}
</style>
</head>
<body>
<h2>SHADOW CITY</h2>
<p>Mobile Legends — City Driving Demo</p>
<canvas id="game" width="700" height="480"></canvas>
<p>Drive your car around the city!</p>
<div class="controls">
<button id="left">◀</button>
<button id="up">▲</button>
<button id="down">▼</button>
<button id="right">▶</button>
</div>
<p>Use the arrows or keyboard arrow keys to drive.</p>
<script>
const c=document.getElementById("game");
const ctx=c.getContext("2d");
let x=350,y=240,a=0,speed=0;
const keys={};
function key(k,v){keys[k]=v}
document.addEventListener("keydown",e=>key(e.key.toLowerCase(),true));
document.addEventListener("keyup",e=>key(e.key.toLowerCase(),false));
function bind(id,k){
 const b=document.getElementById(id);
 b.addEventListener("pointerdown",e=>{e.preventDefault();key(k,true)});
 for(const ev of ["pointerup","pointercancel","pointerleave"])
 b.addEventListener(ev,()=>key(k,false));
}
bind("up","arrowup");bind("down","arrowdown");
bind("left","arrowleft");bind("right","arrowright");
function draw(){
 ctx.fillStyle="#34483a";ctx.fillRect(0,0,700,480);
 // City roads
 ctx.fillStyle="#30343a";
 for(let i=-100;i<800;i+=180){
  ctx.fillRect(i,0,76,480);
  ctx.fillRect(0,i,700,76);
 }
 // Buildings
 for(let i=0;i<700;i+=180){
  for(let j=0;j<480;j+=180){
   ctx.fillStyle="#52616b";
   ctx.fillRect(i+88,j+10,65,55);
   ctx.fillStyle="#8396a0";
   ctx.fillRect(i+98,j+20,12,10);
   ctx.fillRect(i+122,j+20,12,10);
   ctx.fillStyle="#47525c";
   ctx.fillRect(i+88,j+91,65,65);
  }
 }
 // Road markings
 ctx.strokeStyle="#e8d987";ctx.lineWidth=3;ctx.setLineDash([18,18]);
 for(let i=-100;i<800;i+=180){
  ctx.beginPath();ctx.moveTo(i+38,0);ctx.lineTo(i+38,480);ctx.stroke();
  ctx.beginPath();ctx.moveTo(0,i+38);ctx.lineTo(700,i+38);ctx.stroke();
 }
 ctx.setLineDash([]);
 // Driving
 if(keys.arrowleft||keys.a)a-=0.045;
 if(keys.arrowright||keys.d)a+=0.045;
 if(keys.arrowup||keys.w)speed=Math.min(speed+0.08,3.5);
 else if(keys.arrowdown||keys.s)speed=Math.max(speed-0.12,-1.5);
 else speed*=0.97;
 x+=Math.sin(a)*speed;y-=Math.cos(a)*speed;
 x=(x+700)%700;y=(y+480)%480;
 // Car
 ctx.save();ctx.translate(x,y);ctx.rotate(a);
 ctx.fillStyle="#111";ctx.fillRect(-15,-22,30,46);
 ctx.fillStyle="#171f2a";ctx.fillRect(-12,-20,24,40);
 ctx.fillStyle="#26bce9";ctx.fillRect(-10,-13,20,12);
 ctx.fillStyle="#8feaff";ctx.fillRect(-9,7,18,8);
 ctx.fillStyle="#fff5bd";ctx.fillRect(-12,-22,7,3);
 ctx.fillRect(5,-22,7,3);
 ctx.restore();
 ctx.fillStyle="white";ctx.font="17px Arial";
 ctx.fillText("CITY DRIVE  |  SPEED: "+Math.round(Math.abs(speed)*30),12,24);
 requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>