Road Chase – Police Escape Car Game in HTML5 Canvas

74 0 Games CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Road Chase – Police Escape Car Game in HTML5 Canvas

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: #1b1d23; font-family: "Trebuchet MS", system-ui, sans-serif; color: #fff; touch-action: none; user-select: none; }
canvas { display: block; width: 100%; height: 100%; }
#hud { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 18px; background: rgba(0,0,0,.55); padding: 8px 18px; border-radius: 99px; font-size: 1.05rem; white-space: nowrap; }
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; background: rgba(10,12,20,.78); padding: 20px; }
.overlay.hide { display: none; }
h1 { font-size: clamp(2.6rem, 9vw, 5rem); letter-spacing: 4px; background: linear-gradient(90deg, #ff3b3b, #ffffff, #2f7bff); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; }
.keys { opacity: .65; font-size: .9rem; line-height: 1.7; }
#last { color: #ffd34d; font-weight: 700; min-height: 1.2em; }
#play { font: inherit; font-size: 1.4rem; font-weight: 800; padding: 14px 54px; border: 0; border-radius: 14px; background: #ffd34d; color: #222; cursor: pointer; box-shadow: 0 6px 0 #b8901a; }
#play:active { transform: translateY(4px); box-shadow: 0 2px 0 #b8901a; }

// ROAD CHASE — original top-down police escape game (HTML5 canvas, no libraries)
var cv = document.getElementById('c'), ctx = cv.getContext('2d');
var W, H, DPR;
function resize() { DPR = window.devicePixelRatio || 1; W = innerWidth; H = innerHeight; cv.width = W * DPR; cv.height = H * DPR; ctx.setTransform(DPR, 0, 0, DPR, 0, 0); }
addEventListener('resize', resize); resize();

var player, cops, coins, parts, skids, time, coinCount, running = false, camX = 0, camY = 0, shake = 0, spawnT = 0, best = 0;
try { best = +localStorage.getItem('roadchase-best') || 0; } catch (e) {}

function update(dt) {
  time += dt;
  var steer = (keys.ArrowLeft || keys.KeyA || touch.l ? -1 : 0) + (keys.ArrowRight || keys.KeyD || touch.r ? 1 : 0);
  var autoGas = 'ontouchstart' in window && !keys.ArrowDown;
  drive(player, steer, keys.ArrowUp || keys.KeyW || autoGas, keys.ArrowDown || keys.KeyS, keys.Space || (touch.l && touch.r), dt);

spawnT -= dt;
  var stars = Math.min(5, 1 + Math.floor(time / 20));
  if (spawnT <= 0 && cops.filter(function (c) { return !c.dead; }).length < 2 + stars * 2) { spawnCop(); spawnT = Math.max(1.2, 5 - stars * 0.7); }

cops.forEach(function (c) {
    if (c.dead) { c.vx *= .95; c.vy *= .95; c.x += c.vx * dt; c.y += c.vy * dt; return; }
    // aim ahead of player
    var tx = player.x + player.vx * 0.4, ty = player.y + player.vy * 0.4;
    var want = Math.atan2(ty - c.y, tx - c.x), diff = Math.atan2(Math.sin(want - c.a), Math.cos(want - c.a));
    // whisker: avoid buildings straight ahead
    var ahead = solidAt(c.x + Math.cos(c.a) * 70, c.y + Math.sin(c.a) * 70);
    if (ahead) diff += solidAt(c.x + Math.cos(c.a + .6) * 70, c.y + Math.sin(c.a + .6) * 70) ? -1 : 1;
    drive(c, Math.max(-1, Math.min(1, diff * 2)), true, false, Math.abs(diff) > 1.2, dt);
    c.siren += dt * 8;
  });
  // car-car collisions
  var all = [player].concat(cops);
  for (var i = 0; i < all.length; i++) for (var j = i + 1; j < all.length; j++) {
    var a = all[i], b = all[j], dx = b.x - a.x, dy = b.y - a.y, d = Math.hypot(dx, dy);
    if (d < 34 && d > 0) {
      var rel = Math.hypot(a.vx - b.vx, a.vy - b.vy), nx = dx / d, ny = dy / d, push = (34 - d) / 2;
      a.x -= nx * push; a.y -= ny * push; b.x += nx * push; b.y += ny * push;
      var t = a.vx; a.vx = b.vx * .7; b.vx = t * .7; t = a.vy; a.vy = b.vy * .7; b.vy = t * .7;
      if (rel > 120) { if (!a.dead) damage(a, rel * (a.cop ? .2 : .05)); if (!b.dead) damage(b, rel * (b.cop ? .2 : .05)); }
    }
  }
  cops = cops.filter(function (c) { return Math.hypot(c.x - player.x, c.y - player.y) < 2500; });

coins.forEach(function (k) {
    k.t += dt;
    if (Math.hypot(k.x - player.x, k.y - player.y) < 30) { k.taken = true; coinCount++; player.hp = Math.min(100, player.hp + 4); }
    if (Math.hypot(k.x - player.x, k.y - player.y) > 1800) k.taken = true;
  });
  coins = coins.filter(function (k) { return !k.taken; });
  while (coins.length < 12) spawnCoin();

parts.forEach(function (p) { p.x += p.vx * dt; p.y += p.vy * dt; p.vx *= .94; p.vy *= .94; p.life -= dt; });
  parts = parts.filter(function (p) { return p.life > 0; });
  skids.forEach(function (s) { s.life -= dt; }); skids = skids.filter(function (s) { return s.life > 0; });
  if (skids.length > 600) skids.splice(0, skids.length - 600);

camX += (player.x + player.vx * 0.3 - camX) * Math.min(1, 6 * dt);
  camY += (player.y + player.vy * 0.3 - camY) * Math.min(1, 6 * dt);
  shake *= 0.9;

document.getElementById('time').textContent = time.toFixed(1);
  document.getElementById('coins').textContent = coinCount;
  document.getElementById('stars').textContent = stars;
  document.getElementById('hp').textContent = Math.max(0, Math.round(player.hp));
  if (player.dead) gameOver();
}

Comments 0

…

Road Chase – Police Escape Car Game in HTML5 Canvas

Recommended

Comments 0