Racing

A three-lap top-down race against two rivals, with a timer and a best lap. The car has momentum, turns according to its speed, slides if you go into a corner too fast and slows down on the grass. Just enough to feel what defines the genre, which is finding the fastest racing line.

Made with Kaplay, in about 185 lines of JavaScript.

How it's made

1. Setup and constants

   The game is created at a fixed size with virtual buttons (accelerate, brake, left, right), so the same code works with a keyboard or a touch screen. The constants are the car's «handling», because top speed, acceleration, braking, steering, drag and grip decide whether it feels heavy, twitchy or glued to the road. Drag and grip have one value for the track and another for the grass.

   const k = kaplay({
     width: 640,
     height: 360,
     letterbox: true, pixelDensity,
     background: [58, 122, 64],
     // Virtual buttons: the car asks about "accelerate", not about a specific key.
     buttons: {
       left: { keyboard: ["left", "a"] },
       right: { keyboard: ["right", "d"] },
       accelerate: { keyboard: ["up", "w", "x"] },
       brake: { keyboard: ["down", "s", "z"] },
     },
   });
   touchControls(k, [
     { button: "left", label: "◀" },
     { button: "right", label: "▶" },
     { button: "brake", label: "▼", side: "right" },
     { button: "accelerate", label: "▲", side: "right" },
   ]);
   
   const LAPS = 3;
   const MAX_SPEED = 260; // px/s
   const ACCELERATION = 170;
   const BRAKING = 340;
   const STEERING = 3.2; // radians per second at medium speed
   const DRAG = { track: 0.35, grass: 2.2 }; // slows forward motion
   const GRIP = { track: 5, grass: 2 }; // kills sideways sliding
   const COUNTDOWN = 2; // seconds of start lights
   // 75.3 s → "1:15.30"
   const clock = (s) => (isFinite(s) ? `${Math.floor(s / 60)}:${(s % 60).toFixed(2).padStart(5, "0")}` : "—");

2. The circuit as a list of points

   The circuit is the list of points on its centre line, closed by joining the last one to the first. The same list draws the tarmac (a very thick line), tells whether a car has left the track (if it is more than half the width away from the centre line) and gives the waypoints the rivals follow. Changing one point changes everything at once.

   // The circuit is a list of points (its centre line) that closes on itself.
   // It is used three times: to draw the track, to know if you are off it,
   // and as waypoints for the rivals.
   const CIRCUIT = [
     [220, 305], [380, 308], [500, 292], [575, 235], [585, 140], [545, 70], [460, 52],
     [395, 85], [350, 165], [285, 190], [225, 150], [200, 80], [130, 52], [65, 100], [55, 215], [110, 292],
   ].map(([x, y]) => vec2(x, y));
   const N = CIRCUIT.length;
   const TRACK_WIDTH = 50;
   
   // Closest point on the centre line: its distance and section number.
   function closest(p) {
     let best = { dist: Infinity, section: 0 };
     for (let i = 0; i < N; i++) {
       const a = CIRCUIT[i], b = CIRCUIT[(i + 1) % N];
       const ab = b.sub(a);
       const u = clamp(p.sub(a).dot(ab) / ab.dot(ab), 0, 1);
       const dist = p.dist(a.add(ab.scale(u)));
       if (dist < best.dist) best = { dist, section: i };
     }
     return best;
   }
   
   function drawCircuit() {
     const pts = [...CIRCUIT, CIRCUIT[0], CIRCUIT[1]];
     drawLines({ pts, width: TRACK_WIDTH + 8, join: "round", color: rgb(235, 235, 235) }); // kerb
     drawLines({ pts, width: TRACK_WIDTH, join: "round", color: rgb(70, 72, 80) }); // tarmac
     for (const p of CIRCUIT) drawCircle({ pos: p, radius: 2, color: rgb(150, 150, 160) }); // waypoints
     // Finish line, perpendicular to the first section.
     const dir = CIRCUIT[1].sub(CIRCUIT[0]).unit().normal().scale(TRACK_WIDTH / 2);
     drawLine({ p1: CIRCUIT[0].add(dir), p2: CIRCUIT[0].sub(dir), width: 6, color: rgb(255, 255, 255) });
   }

3. The car

   Each car stores two different things, its angle (where the nose points) and its velocity (where it is really moving). When they do not match, the car can slide. It also remembers which section of the circuit it is on and how many laps it has done.

   // A car is a rectangle with an angle (where it points) and a velocity
   // (where it moves). They do not always match: that is drifting.
   function addCar(x, y, c, extra = {}) {
     return add([
       rect(20, 11), pos(x, y), anchor("center"), rotate(0), color(c), outline(2, rgb(20, 20, 20)),
       { heading: 0, vel: vec2(0), section: 0, laps: 0, ...extra },
     ]);
   }

4. Simplified physics

   This is the heart of the genre, in three steps. 1) Steer: the faster you go, the more the car turns, up to a limit, because a stopped car cannot turn and at top speed it turns a little less. 2) Split the velocity into a «forward» part and a «sideways» part relative to the nose (with the dot product). 3) The engine and brake change only the forward part; drag reduces it little by little and grip removes the sideways part. With high grip the car runs on rails; with low grip it keeps sliding where it was going and drifts. On the grass drag rises and grip falls, which is why leaving the track costs time. Since the rule is the same for everyone, the racing line (how you enter and leave each corner) matters more than top speed.

   // Simplified physics in three steps, the same for you and the rivals:
   // 1) steer: turning depends on speed (stopped you cannot turn; flat out you turn less);
   // 2) split the velocity into "forward" and "sideways" relative to the nose;
   // 3) engine and brake change the forward part; drag slows everything,
   //    and grip removes the sideways part. Low grip = drift. Off the track
   //    there is high drag and low grip.
   function physics(c, throttle, steer, skids) {
     const offTrack = closest(c.pos).dist > TRACK_WIDTH / 2;
     const surface = offTrack ? "grass" : "track";
     let nose = vec2(Math.cos(c.heading), Math.sin(c.heading));
     const speedBefore = c.vel.dot(nose);
     const turnFactor = Math.min(Math.abs(speedBefore) / 80, 1) * (1 - 0.4 * Math.abs(speedBefore) / MAX_SPEED);
     c.heading += steer * STEERING * turnFactor * Math.sign(speedBefore) * dt();
   
     nose = vec2(Math.cos(c.heading), Math.sin(c.heading));
     const side = nose.normal();
     let forward = c.vel.dot(nose);
     let sideways = c.vel.dot(side);
   
     if (throttle > 0) forward += ACCELERATION * dt();
     else if (throttle < 0) forward -= (forward > 0 ? BRAKING : ACCELERATION * 0.5) * dt();
     forward *= Math.exp(-DRAG[surface] * dt());
     sideways *= Math.exp(-GRIP[surface] * dt());
     forward = clamp(forward, -MAX_SPEED * 0.3, MAX_SPEED);
   
     c.vel = nose.scale(forward).add(side.scale(sideways));
     c.pos = c.pos.add(c.vel.scale(dt()));
     c.pos.x = clamp(c.pos.x, 10, width() - 10);
     c.pos.y = clamp(c.pos.y, 10, height() - 10);
     c.angle = rad2deg(c.heading);
     // Sliding a lot sideways leaves tyre marks.
     if (Math.abs(sideways) > 45 && skids) skids.push(c.pos.clone());
   }

5. Counting laps

   Each car only advances its section counter when it reaches the next section of the circuit (or the one after). That way cutting across the grass or crossing the line backwards does not count. Going from the last section to the first is crossing the line and adds a lap. The same progress value (laps times sections plus current section) gives your position.

   // To count laps, each car remembers its section of the circuit. It only moves
   // on if it reaches the next section (or the one after), so shortcuts and
   // reversing do not count. Going from the last section to the first is crossing the line.
   function advance(c) {
     const { section } = closest(c.pos);
     if (section !== (c.section + 1) % N && section !== (c.section + 2) % N) return false;
     const crossedLine = section < c.section;
     c.section = section;
     if (crossedLine) c.laps++;
     return crossedLine;
   }
   const progress = (c) => c.laps * N + c.section; // to rank positions

6. Rivals with waypoints

   The rivals use the same physics as you; the AI only decides which buttons to press. They aim at the next waypoint, move on to the following one when they get close or have already passed it, and choose a target speed, which is their pace on the straights and less the more they have to turn. Changing each one's pace is the simplest way to tune the difficulty.

   // Rivals "press the same buttons" you do: they aim at the next waypoint and
   // pick a speed: their pace on the straights, less the more they have to turn.
   function drive(r) {
     // Move on to the next waypoint when close, or if it is already behind.
     const toGo = CIRCUIT[r.wp].sub(r.pos);
     if (toGo.len() < 40 || (toGo.len() < 90 && toGo.dot(r.vel) < 0)) r.wp = (r.wp + 1) % N;
     const target = CIRCUIT[r.wp];
     const wanted = Math.atan2(target.y - r.pos.y, target.x - r.pos.x);
     const diff = Math.atan2(Math.sin(wanted - r.heading), Math.cos(wanted - r.heading));
     const speed = r.vel.len();
     const targetSpeed = r.pace * (1 - 0.6 * Math.min(Math.abs(diff), 1));
     const throttle = speed < targetSpeed ? 1 : speed > targetSpeed + 30 ? -1 : 0;
     physics(r, throttle, clamp(diff * 3, -1, 1));
   }

7. The race and the timer

   The game scene draws the circuit and the skid marks, places the cars on the grid and waits for a two-second start light. Then, every frame, it reads your controls (keyboard, buttons or holding the mouse towards the pointer), moves everyone and checks whether you crossed the line. Each crossing closes a lap, keeps the best one and, on the third, ends the race. Racing against your own best lap is what makes you want to play again.

   const skids = [];
   onDraw(() => {
     drawCircuit();
     for (const m of skids) drawCircle({ pos: m, radius: 2, color: rgb(30, 30, 34), opacity: 0.6 });
   });
   // Starting grid just past the finish line, in two lanes.
   const p0 = CIRCUIT[0];
   const player = addCar(p0.x + 20, p0.y + 10, rgb(240, 70, 60));
   const rivals = [
     addCar(p0.x + 50, p0.y - 10, rgb(70, 140, 240), { wp: 1, pace: 185 }),
     addCar(p0.x + 80, p0.y + 10, rgb(250, 200, 60), { wp: 1, pace: 210 }),
   ];
   
   let time = -COUNTDOWN; // negative while the start lights are on
   let lapStart = 0;
   let bestLap = Infinity;
   const hud = add([text("", { size: 14, font: FONT }), pos(10, 6), z(10)]);
   const notice = add([text("", { size: 48, font: FONT }), pos(center()), anchor("center"), z(10)]);
   
   onUpdate(() => {
     time += dt();
     notice.text = time < 0 ? String(Math.ceil(-time * 1.5)) : time < 0.7 ? t({ es: "¡Ya!", en: "Go!" }) : "";
     if (time < 0) return;
   
     // Your controls: keyboard or buttons, or hold the mouse to head for the pointer.
     let throttle = (isButtonDown("accelerate") ? 1 : 0) - (isButtonDown("brake") ? 1 : 0);
     let steer = (isButtonDown("right") ? 1 : 0) - (isButtonDown("left") ? 1 : 0);
     if (isMouseDown()) {
       const m = mousePos();
       const wanted = Math.atan2(m.y - player.pos.y, m.x - player.pos.x);
       steer = clamp(3 * Math.atan2(Math.sin(wanted - player.heading), Math.cos(wanted - player.heading)), -1, 1);
       throttle = 1;
     }
     physics(player, throttle, steer, skids);
     if (skids.length > 400) skids.splice(0, skids.length - 400);
     rivals.forEach(drive);
     rivals.forEach(advance);
   
     // Time trial: every time you cross the line, a lap is closed.
     if (advance(player)) {
       bestLap = Math.min(bestLap, time - lapStart);
       lapStart = time;
       if (player.laps >= LAPS) {
         const place = 1 + rivals.filter((r) => r.laps >= LAPS).length;
         go("end", { total: time, best: bestLap, place });
       }
     }
     const place = 1 + rivals.filter((r) => progress(r) > progress(player)).length;
     hud.text =
       t({ es: "Vuelta ", en: "Lap " }) + `${Math.min(player.laps + 1, LAPS)}/${LAPS}   ` +
       t({ es: "Tiempo ", en: "Time " }) + clock(time) + "   " +
       t({ es: "Vuelta actual ", en: "Current lap " }) + clock(time - lapStart) + "   " +
       t({ es: "Mejor ", en: "Best " }) + clock(bestLap) + "   " +
       t({ es: "Puesto ", en: "Position " }) + `${place}/${rivals.length + 1}`;
   });

8. Scenes

   The game has three scenes, title, game and end, and go() jumps between them, passing along the results (total time, best lap and position). This restarts the race without cleaning anything up by hand.

   function screen(title, subtitle, next) {
     add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 40)), anchor("center")]);
     add([
       text(subtitle, { size: 16, font: FONT, align: "center", width: 560 }),
       pos(center().add(0, 30)),
       anchor("center"),
       color(225, 240, 225),
     ]);
     onKeyPress(["space", "enter"], next);
     onClick(next);
   }
   
   scene("title", () =>
     screen(
       t({ es: "Carreras", en: "Racing" }),
       t({
         es: `Flecha arriba acelera, abajo frena, izquierda y derecha giran.\nO mantén el clic: el coche va hacia el puntero.\n${LAPS} vueltas contra dos rivales. Fuera del asfalto el coche resbala y frena.\nPulsa espacio o haz clic para empezar.`,
         en: `Up arrow accelerates, down brakes, left and right steer.\nOr hold the mouse button: the car heads for the pointer.\n${LAPS} laps against two rivals. Off the tarmac the car slides and slows.\nPress space or click to start.`,
       }),
       () => go("game"),
     ),
   );
   
   scene("end", ({ total, best, place }) => {
     screen(
       place === 1 ? t({ es: "¡Ganaste!", en: "You won!" }) : t({ es: `Llegaste en el puesto ${place}`, en: `You finished in position ${place}` }),
       t({
         es: `Tiempo total ${clock(total)} · mejor vuelta ${clock(best)}.\n¿Puedes bajar tu mejor vuelta? Pulsa espacio o haz clic para repetir.`,
         en: `Total time ${clock(total)} · best lap ${clock(best)}.\nCan you beat your best lap? Press space or click to race again.`,
       }),
       () => go("game"),
     );
   });
   
   go("title");

What we simplified

• The cars are rectangles and the track is a thick line; there is no sound, no camera following the car and no gears.
• The cars do not collide with each other, and the screen edges are invisible walls.
• The physics does not model tyres, weight or engine torque, only three numbers you can feel (drag, grip and steering). It is «arcade» physics, not simulator physics.

To modify it

• Change GRIP.track from 5 to 2 and then to 12. Describe how the feel changes and which kind of racing game each value resembles most.
• Design your own circuit by changing the CIRCUIT list. Put a tight corner at the end of a long straight and watch where the rivals brake.
• Add a «ghost» that replays your best lap. Store the car's position every frame and draw it on the next lap.
• Make the cars collide with each other, pushing them apart and sharing the speed when they touch.

// Racing demo
// Engine: Kaplay 3001 (https://kaplayjs.com). MIT licence.
import kaplay from "../../vendor/kaplay.mjs";
import { t, FONT, touchControls, pixelDensity } from "../common.js";

// #region setup
const k = kaplay({
  width: 640,
  height: 360,
  letterbox: true, pixelDensity,
  background: [58, 122, 64],
  // Virtual buttons: the car asks about "accelerate", not about a specific key.
  buttons: {
    left: { keyboard: ["left", "a"] },
    right: { keyboard: ["right", "d"] },
    accelerate: { keyboard: ["up", "w", "x"] },
    brake: { keyboard: ["down", "s", "z"] },
  },
});
touchControls(k, [
  { button: "left", label: "◀" },
  { button: "right", label: "▶" },
  { button: "brake", label: "▼", side: "right" },
  { button: "accelerate", label: "▲", side: "right" },
]);

const LAPS = 3;
const MAX_SPEED = 260; // px/s
const ACCELERATION = 170;
const BRAKING = 340;
const STEERING = 3.2; // radians per second at medium speed
const DRAG = { track: 0.35, grass: 2.2 }; // slows forward motion
const GRIP = { track: 5, grass: 2 }; // kills sideways sliding
const COUNTDOWN = 2; // seconds of start lights
// 75.3 s → "1:15.30"
const clock = (s) => (isFinite(s) ? `${Math.floor(s / 60)}:${(s % 60).toFixed(2).padStart(5, "0")}` : "—");
// #endregion

// #region circuit
// The circuit is a list of points (its centre line) that closes on itself.
// It is used three times: to draw the track, to know if you are off it,
// and as waypoints for the rivals.
const CIRCUIT = [
  [220, 305], [380, 308], [500, 292], [575, 235], [585, 140], [545, 70], [460, 52],
  [395, 85], [350, 165], [285, 190], [225, 150], [200, 80], [130, 52], [65, 100], [55, 215], [110, 292],
].map(([x, y]) => vec2(x, y));
const N = CIRCUIT.length;
const TRACK_WIDTH = 50;

// Closest point on the centre line: its distance and section number.
function closest(p) {
  let best = { dist: Infinity, section: 0 };
  for (let i = 0; i < N; i++) {
    const a = CIRCUIT[i], b = CIRCUIT[(i + 1) % N];
    const ab = b.sub(a);
    const u = clamp(p.sub(a).dot(ab) / ab.dot(ab), 0, 1);
    const dist = p.dist(a.add(ab.scale(u)));
    if (dist < best.dist) best = { dist, section: i };
  }
  return best;
}

function drawCircuit() {
  const pts = [...CIRCUIT, CIRCUIT[0], CIRCUIT[1]];
  drawLines({ pts, width: TRACK_WIDTH + 8, join: "round", color: rgb(235, 235, 235) }); // kerb
  drawLines({ pts, width: TRACK_WIDTH, join: "round", color: rgb(70, 72, 80) }); // tarmac
  for (const p of CIRCUIT) drawCircle({ pos: p, radius: 2, color: rgb(150, 150, 160) }); // waypoints
  // Finish line, perpendicular to the first section.
  const dir = CIRCUIT[1].sub(CIRCUIT[0]).unit().normal().scale(TRACK_WIDTH / 2);
  drawLine({ p1: CIRCUIT[0].add(dir), p2: CIRCUIT[0].sub(dir), width: 6, color: rgb(255, 255, 255) });
}
// #endregion

// #region car
// A car is a rectangle with an angle (where it points) and a velocity
// (where it moves). They do not always match: that is drifting.
function addCar(x, y, c, extra = {}) {
  return add([
    rect(20, 11), pos(x, y), anchor("center"), rotate(0), color(c), outline(2, rgb(20, 20, 20)),
    { heading: 0, vel: vec2(0), section: 0, laps: 0, ...extra },
  ]);
}
// #endregion

// #region physics
// Simplified physics in three steps, the same for you and the rivals:
// 1) steer: turning depends on speed (stopped you cannot turn; flat out you turn less);
// 2) split the velocity into "forward" and "sideways" relative to the nose;
// 3) engine and brake change the forward part; drag slows everything,
//    and grip removes the sideways part. Low grip = drift. Off the track
//    there is high drag and low grip.
function physics(c, throttle, steer, skids) {
  const offTrack = closest(c.pos).dist > TRACK_WIDTH / 2;
  const surface = offTrack ? "grass" : "track";
  let nose = vec2(Math.cos(c.heading), Math.sin(c.heading));
  const speedBefore = c.vel.dot(nose);
  const turnFactor = Math.min(Math.abs(speedBefore) / 80, 1) * (1 - 0.4 * Math.abs(speedBefore) / MAX_SPEED);
  c.heading += steer * STEERING * turnFactor * Math.sign(speedBefore) * dt();

  nose = vec2(Math.cos(c.heading), Math.sin(c.heading));
  const side = nose.normal();
  let forward = c.vel.dot(nose);
  let sideways = c.vel.dot(side);

  if (throttle > 0) forward += ACCELERATION * dt();
  else if (throttle < 0) forward -= (forward > 0 ? BRAKING : ACCELERATION * 0.5) * dt();
  forward *= Math.exp(-DRAG[surface] * dt());
  sideways *= Math.exp(-GRIP[surface] * dt());
  forward = clamp(forward, -MAX_SPEED * 0.3, MAX_SPEED);

  c.vel = nose.scale(forward).add(side.scale(sideways));
  c.pos = c.pos.add(c.vel.scale(dt()));
  c.pos.x = clamp(c.pos.x, 10, width() - 10);
  c.pos.y = clamp(c.pos.y, 10, height() - 10);
  c.angle = rad2deg(c.heading);
  // Sliding a lot sideways leaves tyre marks.
  if (Math.abs(sideways) > 45 && skids) skids.push(c.pos.clone());
}
// #endregion

// #region laps
// To count laps, each car remembers its section of the circuit. It only moves
// on if it reaches the next section (or the one after), so shortcuts and
// reversing do not count. Going from the last section to the first is crossing the line.
function advance(c) {
  const { section } = closest(c.pos);
  if (section !== (c.section + 1) % N && section !== (c.section + 2) % N) return false;
  const crossedLine = section < c.section;
  c.section = section;
  if (crossedLine) c.laps++;
  return crossedLine;
}
const progress = (c) => c.laps * N + c.section; // to rank positions
// #endregion

// #region rivals
// Rivals "press the same buttons" you do: they aim at the next waypoint and
// pick a speed: their pace on the straights, less the more they have to turn.
function drive(r) {
  // Move on to the next waypoint when close, or if it is already behind.
  const toGo = CIRCUIT[r.wp].sub(r.pos);
  if (toGo.len() < 40 || (toGo.len() < 90 && toGo.dot(r.vel) < 0)) r.wp = (r.wp + 1) % N;
  const target = CIRCUIT[r.wp];
  const wanted = Math.atan2(target.y - r.pos.y, target.x - r.pos.x);
  const diff = Math.atan2(Math.sin(wanted - r.heading), Math.cos(wanted - r.heading));
  const speed = r.vel.len();
  const targetSpeed = r.pace * (1 - 0.6 * Math.min(Math.abs(diff), 1));
  const throttle = speed < targetSpeed ? 1 : speed > targetSpeed + 30 ? -1 : 0;
  physics(r, throttle, clamp(diff * 3, -1, 1));
}
// #endregion

scene("game", () => {
  // #region race
  const skids = [];
  onDraw(() => {
    drawCircuit();
    for (const m of skids) drawCircle({ pos: m, radius: 2, color: rgb(30, 30, 34), opacity: 0.6 });
  });
  // Starting grid just past the finish line, in two lanes.
  const p0 = CIRCUIT[0];
  const player = addCar(p0.x + 20, p0.y + 10, rgb(240, 70, 60));
  const rivals = [
    addCar(p0.x + 50, p0.y - 10, rgb(70, 140, 240), { wp: 1, pace: 185 }),
    addCar(p0.x + 80, p0.y + 10, rgb(250, 200, 60), { wp: 1, pace: 210 }),
  ];

  let time = -COUNTDOWN; // negative while the start lights are on
  let lapStart = 0;
  let bestLap = Infinity;
  const hud = add([text("", { size: 14, font: FONT }), pos(10, 6), z(10)]);
  const notice = add([text("", { size: 48, font: FONT }), pos(center()), anchor("center"), z(10)]);

  onUpdate(() => {
    time += dt();
    notice.text = time < 0 ? String(Math.ceil(-time * 1.5)) : time < 0.7 ? t({ es: "¡Ya!", en: "Go!" }) : "";
    if (time < 0) return;

    // Your controls: keyboard or buttons, or hold the mouse to head for the pointer.
    let throttle = (isButtonDown("accelerate") ? 1 : 0) - (isButtonDown("brake") ? 1 : 0);
    let steer = (isButtonDown("right") ? 1 : 0) - (isButtonDown("left") ? 1 : 0);
    if (isMouseDown()) {
      const m = mousePos();
      const wanted = Math.atan2(m.y - player.pos.y, m.x - player.pos.x);
      steer = clamp(3 * Math.atan2(Math.sin(wanted - player.heading), Math.cos(wanted - player.heading)), -1, 1);
      throttle = 1;
    }
    physics(player, throttle, steer, skids);
    if (skids.length > 400) skids.splice(0, skids.length - 400);
    rivals.forEach(drive);
    rivals.forEach(advance);

    // Time trial: every time you cross the line, a lap is closed.
    if (advance(player)) {
      bestLap = Math.min(bestLap, time - lapStart);
      lapStart = time;
      if (player.laps >= LAPS) {
        const place = 1 + rivals.filter((r) => r.laps >= LAPS).length;
        go("end", { total: time, best: bestLap, place });
      }
    }
    const place = 1 + rivals.filter((r) => progress(r) > progress(player)).length;
    hud.text =
      t({ es: "Vuelta ", en: "Lap " }) + `${Math.min(player.laps + 1, LAPS)}/${LAPS}   ` +
      t({ es: "Tiempo ", en: "Time " }) + clock(time) + "   " +
      t({ es: "Vuelta actual ", en: "Current lap " }) + clock(time - lapStart) + "   " +
      t({ es: "Mejor ", en: "Best " }) + clock(bestLap) + "   " +
      t({ es: "Puesto ", en: "Position " }) + `${place}/${rivals.length + 1}`;
  });
  // #endregion
});

// #region scenes
function screen(title, subtitle, next) {
  add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 40)), anchor("center")]);
  add([
    text(subtitle, { size: 16, font: FONT, align: "center", width: 560 }),
    pos(center().add(0, 30)),
    anchor("center"),
    color(225, 240, 225),
  ]);
  onKeyPress(["space", "enter"], next);
  onClick(next);
}

scene("title", () =>
  screen(
    t({ es: "Carreras", en: "Racing" }),
    t({
      es: `Flecha arriba acelera, abajo frena, izquierda y derecha giran.\nO mantén el clic: el coche va hacia el puntero.\n${LAPS} vueltas contra dos rivales. Fuera del asfalto el coche resbala y frena.\nPulsa espacio o haz clic para empezar.`,
      en: `Up arrow accelerates, down brakes, left and right steer.\nOr hold the mouse button: the car heads for the pointer.\n${LAPS} laps against two rivals. Off the tarmac the car slides and slows.\nPress space or click to start.`,
    }),
    () => go("game"),
  ),
);

scene("end", ({ total, best, place }) => {
  screen(
    place === 1 ? t({ es: "¡Ganaste!", en: "You won!" }) : t({ es: `Llegaste en el puesto ${place}`, en: `You finished in position ${place}` }),
    t({
      es: `Tiempo total ${clock(total)} · mejor vuelta ${clock(best)}.\n¿Puedes bajar tu mejor vuelta? Pulsa espacio o haz clic para repetir.`,
      en: `Total time ${clock(total)} · best lap ${clock(best)}.\nCan you beat your best lap? Press space or click to race again.`,
    }),
    () => go("game"),
  );
});

go("title");
// #endregion