City Rush

by StealthFalcon26

153 lines2.6 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>City Rush</title>
<style>
body{margin:0;overflow:hidden;background:#222;font-family:Arial}
canvas{display:block}
#hud{position:fixed;top:10px;left:10px;color:white;background:#000b;
padding:10px;border-radius:10px;font-size:18px}
#buttons{position:fixed;bottom:20px;left:50%;
transform:translateX(-50%);display:flex;gap:8px}
button{width:60px;height:60px;border:0;border-radius:15px;
font-size:25px;background:#fffc}
</style>
</head>

<body>
<canvas id="game"></canvas>

<div id="hud">
💰 $<span id="money">0</span><br>
⭐ <span id="stars">☆☆☆☆☆</span>
</div>

<div id="buttons">
<button id="left">◀</button>
<button id="up">▲</button>
<button id="down">▼</button>
<button id="right">▶</button>
</div>

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

function resize(){
 c.width=innerWidth;
 c.height=innerHeight;
}
resize();
onresize=resize;

let keys={};
let money=0;
let stars=0;

let car={
 x:0,y:0,a:0,s:0
};

document.onkeydown=e=>keys[e.key.toLowerCase()]=true;
document.onkeyup=e=>keys[e.key.toLowerCase()]=false;

function control(id,key){
 let b=document.getElementById(id);
 b.onpointerdown=()=>keys[key]=true;
 b.onpointerup=()=>keys[key]=false;
 b.onpointerleave=()=>keys[key]=false;
}

control("up","w");
control("down","s");
control("left","a");
control("right","d");

let buildings=[];

for(let x=-1500;x<1500;x+=180){
 for(let y=-1500;y<1500;y+=180){
  buildings.push({
   x:x+25,y:y+25,
   w:120,h:120
  });
 }
}

let mission={
 x:600,y:400
};

let police=[];

for(let i=0;i<5;i++){
 police.push({
  x:-500+i*200,
  y:-400,
  a:0
 });
}

function update(){

 if(keys.w)car.s+=.12;
 if(keys.s)car.s-=.1;

 car.s*=.96;
 car.s=Math.max(-3,Math.min(6,car.s));

 if(keys.a)
  car.a-=.05;

 if(keys.d)
  car.a+=.05;

 car.x+=Math.cos(car.a)*car.s;
 car.y+=Math.sin(car.a)*car.s;

 for(let p of police){

  let dx=car.x-p.x;
  let dy=car.y-p.y;
  let target=Math.atan2(dy,dx);

  p.a+=Math.atan2(
   Math.sin(target-p.a),
   Math.cos(target-p.a)
  )*.025;

  p.x+=Math.cos(p.a)*1.4;
  p.y+=Math.sin(p.a)*1.4;

  if(Math.hypot(dx,dy)<70){
   stars=Math.min(5,stars+1);
   car.s*=.7;
  }
 }

 let d=Math.hypot(
  car.x-mission.x,
  car.y-mission.y
 );

 if(d<60){
  money+=500;
  stars=Math.max(0,stars-1);

  mission.x=Math.random()*2400-1200;
  mission.y=Math.random()*2400-1200;
 }

 document.getElementById("money").innerText=money;
 document.getElementById("stars").innerText=
 "★".repeat(stars)+"☆".repeat(5-stars);
}

function pos(x,y){
 return{
  x:x-car.x+c.width/2,
  y:y-car.y+c.height/2
 };
}

Game Source: City Rush

Creator: StealthFalcon26

Libraries: none

Complexity: moderate (153 lines, 2.6 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: city-rush-stealthfalcon26" to link back to the original. Then publish at arcadelab.ai/publish.