Proximity Detection Ring POC

Back to Gaming Concepts

Move a dot with arrow keys; a ring changes state when the dot enters a proximity radius around a fixed point.

Code for Above

<div style="max-width:1500px;margin:0 auto;">
<iframe
  title="POC — Proximity Detection Ring"
  scrolling="no"
  style="width:1500px;height:1500px;border:0;display:block;background:#111;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.5);"
  sandbox="allow-scripts allow-same-origin"
  srcdoc='
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>POC — Proximity Detection Ring</title>
<style>
  html, body { margin:0; width:100%; height:100%; overflow:hidden; background:#111; }
  canvas { display:block; }
  .hint { position:absolute; left:12px; bottom:12px; color:#aaa; font:14px system-ui; }
</style>
</head>
<body>
<canvas id="c" width="1500" height="1500"></canvas>
<div class="hint">Arrows: move dot • Enter the ring radius</div>

<script>
const c = document.getElementById("c");
const x = c.getContext("2d");
const W = 1500, H = 1500;

// Moving point
const p = { x: 250, y: 1250, vx: 0, vy: 0 };

// Target + proximity radius
const t = { x: 1050, y: 550 };
const R = 220;

// Tunables
const ACCEL = 0.45;
const DRAG  = 0.92;
const MAX   = 12;

// Input
const k = {};
addEventListener("keydown", e => k[e.key] = true);
addEventListener("keyup",   e => k[e.key] = false);

function update(){
  if (k["ArrowUp"])    p.vy -= ACCEL;
  if (k["ArrowDown"])  p.vy += ACCEL;
  if (k["ArrowLeft"])  p.vx -= ACCEL;
  if (k["ArrowRight"]) p.vx += ACCEL;

  p.vx *= DRAG; p.vy *= DRAG;

  const sp = Math.hypot(p.vx, p.vy);
  if (sp > MAX) { p.vx = (p.vx/sp)*MAX; p.vy = (p.vy/sp)*MAX; }

  p.x += p.vx; p.y += p.vy;

  // wrap
  if (p.x < 0) p.x = W;
  if (p.x > W) p.x = 0;
  if (p.y < 0) p.y = H;
  if (p.y > H) p.y = 0;
}

function draw(){
  x.clearRect(0,0,W,H);

  const dx = p.x - t.x;
  const dy = p.y - t.y;
  const d  = Math.hypot(dx, dy);
  const inside = d <= R;

  // ring (state change)
  x.save();
  x.lineWidth = inside ? 8 : 3;
  x.strokeStyle = inside ? "#fff" : "rgba(255,255,255,0.25)";
  x.shadowColor = "rgba(255,255,255,0.9)";
  x.shadowBlur  = inside ? 18 : 0;
  x.beginPath();
  x.arc(t.x, t.y, R, 0, Math.PI*2);
  x.stroke();
  x.restore();

  // target point
  x.fillStyle = "rgba(255,255,255,0.7)";
  x.beginPath();
  x.arc(t.x, t.y, 6, 0, Math.PI*2);
  x.fill();

  // moving point
  x.fillStyle = "#fff";
  x.beginPath();
  x.arc(p.x, p.y, 10, 0, Math.PI*2);
  x.fill();

  // distance text (minimal, for debugging feel)
  x.fillStyle = "rgba(255,255,255,0.5)";
  x.font = "14px system-ui";
  x.fillText(`d = ${Math.round(d)}   inside = ${inside}`, 12, 24);
}

(function loop(){
  update();
  draw();
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>
'></iframe>
</div>