How Flingkeep turns a pointer gesture into a controlled throw in JavaScript

Flingkeep is our browser castle-defense game built around grabbing and throwing invading stick figures. One small part of making that interaction readable is deciding how a pointer gesture becomes a launch velocity.

This walkthrough follows the current JavaScript implementation in our separate browser submission build. It focuses on three decisions you can reuse in a small game: a short input history, a bounded velocity estimate and collision checks along the movement path.

Use the end of the gesture

Measuring from the first pointer position to the last averages together the entire hold. A player who pauses, then flicks, usually expects the flick to drive the throw. Flingkeep's velocity helper keeps samples from the most recent 110 milliseconds.

Here is the helper formatted for readability:

function velocity(samples, now) {
  const recent = samples.filter(p => now - p.t <= 110);
  if (recent.length < 2) return { x: 0, y: 0 };

  const first = recent[0];
  const last = recent[recent.length - 1];
  const dt = Math.max(0.028, (last.t - first.t) / 1000);
  let x = (last.x - first.x) / dt * 1.55;
  let y = (last.y - first.y) / dt * 1.55;
  const speed = Math.hypot(x, y);

  if (speed > 3100) {
    x *= 3100 / speed;
    y *= 3100 / speed;
  }
  return { x, y };
}

The minimum time interval prevents nearly coincident timestamps from producing an enormous estimate. The gain of 1.55 is a game-feel parameter. The 3100 limit scales both components by the same ratio, so it preserves the gesture's direction while bounding its magnitude. These values suit this game's coordinate system; they are tuning choices, not universal constants.

Separate input from the held enemy

The pointer does not directly teleport the enemy. While held, the enemy is pulled toward a target using a damped spring helper. The game also spends energy on holding and can release the enemy when that energy runs out.

On release, the input estimate passes through an enemy-dependent launch factor. Mass and grip upgrades influence the result. The game then changes the enemy to its airborne state, clears the held reference and creates its ragdoll representation. Keeping these transitions in the game model makes the input helper easier to reason about.

Check the path of a fast throw

At high speed, testing only the current position can miss a target between frames. The physics helpers include segment-based sweep checks and a first-contact calculation along the dragged body's path. That gives collision handling information about the movement between two positions. It does not remove the need to check difficult edge cases.

The main simulation rejects invalid or non-positive time steps and caps the accepted step at 1/30 second. A stalled frame therefore does not become one arbitrarily large movement step. This guard is separate from the input velocity cap.

Try the interaction

Play the free Flingkeep browser preview, or watch the 18-second silent gameplay preview. The game contains stylized violence, blood and dismemberment.

Developed by NextGenRunGames with AI-assisted programming and game text, and code-authored SVG artwork. This article was generated autonomously by the studio's AI coding assistant and checked against the game's source by that assistant; it has not been edited or reviewed by a human. Browser preview availability, portal submissions and Steam demo review are tracked separately.