Sports

A top-down tennis game against an AI, with simplified real rules. There is a cross-court serve with a change of side every point, a change of server every game, the 15-30-40 count with deuce and advantage, and the ball is out if it leaves over the sidelines. Where the ball touches the racket decides where it goes. The first to win three games wins.

Made with Kaplay, in about 175 lines of JavaScript.

How it's made

1. Setup and constants

   The game is created with virtual buttons (up, down, serve), and the court is defined along with the numbers that decide how it plays, such as the speed of the players, the speed of the ball and how much it speeds up with each hit, and AIM_SPREAD, which says how much the angle opens up when you hit with the racket's edge.

   const k = kaplay({
     width: 640,
     height: 360,
     letterbox: true, pixelDensity,
     background: [46, 110, 70],
     buttons: {
       up: { keyboard: ["up", "w"] },
       down: { keyboard: ["down", "s"] },
       serve: { keyboard: ["space", "enter"] },
     },
   });
   
   // The court, seen from above: baselines left and right, sidelines top and bottom.
   const COURT = { left: 40, right: 600, top: 50, bottom: 330 };
   const MID_Y = (COURT.top + COURT.bottom) / 2;
   const HALF_H = (COURT.bottom - COURT.top) / 2;
   const RACKET_H = 56;
   const PLAYER_SPEED = 330; // px/s, the same for you and the AI
   const BALL_SPEED = 320; // first shot of a rally
   const MAX_SPEED = 560; // every hit is 5% faster, up to this
   const AIM_SPREAD = 1.25; // hitting with the racket's edge aims beyond the sideline
   const GAMES_TO_WIN = 3;

2. The court

   The court is drawn with lines, which are the baselines, sidelines, service lines, centre line and net. The lines are not decoration, because the rules rely on them to decide whether the ball is in or out.

   onDraw(() => {
     const { left, right, top, bottom } = COURT;
     drawRect({ pos: vec2(left, top), width: right - left, height: bottom - top, color: rgb(60, 120, 190) });
     const line = (a, b) => drawLine({ p1: vec2(...a), p2: vec2(...b), width: 2, color: rgb(255, 255, 255) });
     line([left, top], [right, top]);
     line([left, bottom], [right, bottom]);
     line([left, top], [left, bottom]);
     line([right, top], [right, bottom]);
     line([170, top], [170, bottom]); // service lines
     line([470, top], [470, bottom]);
     line([170, MID_Y], [470, MID_Y]); // centre service line
     drawLine({ p1: vec2(320, top - 10), p2: vec2(320, bottom + 10), width: 4, color: rgb(230, 230, 230) }); // net
   });

3. The players

   Each player is a racket that moves vertically, with the same top speed for you and the AI, so the match is fair. With the keyboard you move directly. With the mouse or a finger, the racket heads towards the pointer at that same speed. You can step slightly outside the court to reach wide balls.

   const racket = (x, col) => add([rect(10, RACKET_H), pos(x, MID_Y), anchor("center"), color(col), { goal: MID_Y }]);
   const players = [racket(COURT.left + 12, rgb(255, 220, 90)), racket(COURT.right - 12, rgb(255, 120, 120))];
   const [me, ai] = players;
   const moveTowards = (p, goal) => {
     p.pos.y += clamp(goal - p.pos.y, -PLAYER_SPEED * dt(), PLAYER_SPEED * dt());
     p.pos.y = clamp(p.pos.y, 20, 340); // you may step out of the court to reach wide balls
   };
   // Keyboard moves the racket; the mouse or a finger sets where it should go.
   let pointerY = null;
   onMouseMove((p) => (pointerY = p.y));
   me.onUpdate(() => {
     if (state === "serve" && server === 0) return; // the server stands still to serve
     if (isButtonDown("up") || isButtonDown("down")) {
       pointerY = null;
       me.pos.y += (isButtonDown("down") ? 1 : -1) * PLAYER_SPEED * dt();
       me.pos.y = clamp(me.pos.y, 20, 340);
     } else if (pointerY !== null) moveTowards(me, pointerY);
   });

4. The rival AI

   The AI works out where the ball will cross its line and places the racket so the ball hits the part it wants, and that is how it aims. It reacts with a delay, like a person, and picks a safe angle at random. It also knows the rules, because it lets go balls that are flying out, since that wins it the point.

   // The AI predicts where the ball will cross its baseline and places the racket
   // so the ball hits the part it wants (that is how it aims). It reacts late,
   // like a person, and it lets go balls that are flying out: they lose the point.
   let aiDelay = 0;
   let aiAim = 0;
   ai.onUpdate(() => {
     if (state === "serve" && server === 1) return;
     aiDelay -= dt();
     let goal = MID_Y;
     if (state === "rally" && ball.vel.x > 0 && aiDelay <= 0) {
       const y = ball.pos.y + (ball.vel.y * (ai.pos.x - ball.pos.x)) / ball.vel.x;
       const goingOut = y < COURT.top - 6 || y > COURT.bottom + 6;
       if (!goingOut) goal = y - aiAim * (RACKET_H / 2);
     }
     moveTowards(ai, goal);
   });

5. The ball and the shot

   The ball travels in a straight line towards a point on the rival's baseline. A hit happens when it crosses the racket's line within its height. The crossing is checked rather than the overlap, so a fast ball cannot pass through the racket between two frames. Where it touches decides the target, as the centre sends it down the middle while the edge opens it towards the lines. Each hit makes it 5% faster.

   const ball = add([circle(6), pos(0, 0), anchor("center"), color(230, 255, 120), { vel: vec2(0, 0), speed: BALL_SPEED }]);
   let lastHitter = 0;
   
   // Shoot the ball from where it is towards a point on the other baseline.
   function shoot(from, targetY, speed) {
     const targetX = from === 0 ? COURT.right : COURT.left;
     ball.speed = speed;
     ball.vel = vec2(targetX, targetY).sub(ball.pos).unit().scale(speed);
     lastHitter = from;
     if (from === 0) {
       aiDelay = 0.22; // reaction time
       aiAim = rand(-0.75, 0.75);
     }
   }
   
   // A hit happens when the ball crosses the racket's line within its height.
   // Where it touches the racket (centre or edge) decides the aim, as in Pong.
   function checkHit(p, who, prevX) {
     const crossed = who === 0 ? prevX >= p.pos.x && ball.pos.x < p.pos.x : prevX <= p.pos.x && ball.pos.x > p.pos.x;
     const offset = (ball.pos.y - p.pos.y) / (RACKET_H / 2 + 6);
     if (!crossed || Math.abs(offset) > 1) return;
     ball.pos.x = p.pos.x;
     shoot(who, MID_Y + offset * HALF_H * AIM_SPREAD, Math.min(MAX_SPEED, ball.speed * 1.05));
   }
   
   ball.onUpdate(() => {
     if (state === "serve") {
       const s = players[server]; // the ball waits in front of the server
       ball.pos = s.pos.add(server === 0 ? 16 : -16, 0);
       return;
     }
     if (state !== "rally") return;
     const prevX = ball.pos.x;
     ball.pos = ball.pos.add(ball.vel.scale(dt()));
     if (ball.vel.x < 0) checkHit(me, 0, prevX);
     else checkHit(ai, 1, prevX);

6. Rules, out and serve

   This is the genre's mechanic, the game acting as referee. If the ball leaves over a sideline before it is returned, it is out and the point goes to the hitter's rival. If it crosses a baseline inside the court, whoever had to return it missed. The serve goes cross-court and the server switches sides every point, right on even points and left on odd ones, as in real tennis. Aiming at the lines is a risk the rules punish or reward.

     // Simplified tennis rules. If the ball leaves the court over a sideline
     // before anyone returns it, it is OUT: the point goes to the other player.
     // If it passes a baseline inside the court, the receiver missed it.
     const out = ball.pos.y < COURT.top || ball.pos.y > COURT.bottom;
     if (out) return endPoint(1 - lastHitter, t({ es: "¡Fuera!", en: "Out!" }));
     if (ball.pos.x < COURT.left - 10) return endPoint(1, t({ es: "Punto del rival", en: "Rival's point" }));
     if (ball.pos.x > COURT.right + 10) return endPoint(0, t({ es: "¡Punto para ti!", en: "Your point!" }));
   });
   
   // The serve goes cross-court, and the server switches side every point
   // (right side on even points, left on odd ones), as in real tennis.
   let state = "serve";
   let server = 0;
   function placeServer() {
     const played = score.points[0] + score.points[1];
     const side = played % 2 === 0 ? 1 : -1; // 1 = server's right-hand side
     players[server].pos.y = MID_Y + side * (server === 0 ? 1 : -1) * HALF_H * 0.5;
     if (server === 1) wait(1.2, () => state === "serve" && serve());
   }
   function serve() {
     state = "rally";
     const s = players[server];
     shoot(server, MID_Y - (s.pos.y - MID_Y), BALL_SPEED * 0.9); // aim at the opposite diagonal
   }
   onButtonPress("serve", () => state === "serve" && server === 0 && serve());
   onMousePress(() => state === "serve" && server === 0 && serve());

7. Tennis scoring

   Points are counted 0, 15, 30, 40 and game. At 40 all it is «deuce», and two points in a row are needed, advantage and then game. Every game changes the server. Turning an odd count like this into a few conditions is a good example of how a video game encodes a rulebook.

   // Tennis counts 0, 15, 30, 40, game. At 40–40 it is «deuce»: you need two
   // points in a row (advantage, then game). The server changes every game.
   const score = { points: [0, 0], games: [0, 0] };
   const CALLS = ["0", "15", "30", "40"];
   function callScore() {
     const [a, b] = score.points;
     if (a >= 3 && b >= 3) {
       if (a === b) return t({ es: "Iguales", en: "Deuce" });
       return a > b ? t({ es: "Ventaja tuya", en: "Advantage you" }) : t({ es: "Ventaja rival", en: "Advantage rival" });
     }
     return `${CALLS[a]} – ${CALLS[b]}`;
   }
   function endPoint(winner, message) {
     state = "pause";
     const p = score.points;
     p[winner]++;
     if (p[winner] >= 4 && p[winner] - p[1 - winner] >= 2) {
       score.games[winner]++;
       score.points = [0, 0];
       server = 1 - server;
       message += "\n" + t({ es: "Juego", en: "Game" });
     }
     banner.text = message;
     wait(1.4, () => {
       banner.text = "";
       if (score.games[winner] === GAMES_TO_WIN) return go("end", winner === 0, score.games);
       state = "serve";
       placeServer();
     });
   }

8. Scoreboard

   The scoreboard shows the games and the current game's count as it is called in tennis, and tells you when it is your serve. After each point a banner explains what happened (out, point, game), so the player learns the rules while playing.

   const hud = add([text("", { size: 16, font: FONT, align: "center" }), pos(320, 22), anchor("center")]);
   const banner = add([text("", { size: 26, font: FONT, align: "center" }), pos(320, 160), anchor("center"), z(10)]);
   onUpdate(() => {
     const serving = state === "serve" && server === 0 ? t({ es: "  ·  Sacas tú: espacio o clic", en: "  ·  Your serve: space or click" }) : "";
     const games = t({ es: `Tú ${score.games[0]} – ${score.games[1]} Rival`, en: `You ${score.games[0]} – ${score.games[1]} Rival` });
     hud.text = `${games}   ·   ${callScore()}${serving}`;
   });
   placeServer();

9. Scenes

   The game has three scenes, title, game and end. The title explains the controls and the key idea of aiming with the racket's edge, and the end scene shows the result of the set.

   function screen(title, subtitle) {
     add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 50)), anchor("center")]);
     add([text(subtitle, { size: 16, font: FONT, align: "center", width: 560 }), pos(center().add(0, 30)), anchor("center"), color(220, 240, 220)]);
     onButtonPress("serve", () => go("game"));
     onClick(() => go("game"));
   }
   
   scene("title", () =>
     screen(
       t({ es: "Tenis", en: "Tennis" }),
       t({
         es: `Mueve tu raqueta (amarilla) con las flechas o W/S, o con el ratón o el dedo. Donde toca la bola decide hacia dónde sale: con el borde apuntas a las líneas, pero puede irse fuera. Gana ${GAMES_TO_WIN} juegos.\nEspacio o clic para empezar.`,
         en: `Move your racket (yellow) with the arrows or W/S, or with the mouse or a finger. Where the ball touches it decides where it goes: the edge aims at the lines, but it may go out. Win ${GAMES_TO_WIN} games.\nSpace or click to start.`,
       }),
     ),
   );
   
   scene("end", (won, games) =>
     screen(
       won ? t({ es: "¡Ganaste el set!", en: "You won the set!" }) : t({ es: "El rival gana el set", en: "The rival wins the set" }),
       t({ es: `Juegos ${games[0]} – ${games[1]}. Espacio o clic para jugar otra vez.`, en: `Games ${games[0]} – ${games[1]}. Space or click to play again.` }),
     ),
   );
   
   go("title");

What we simplified

• The ball does not bounce or have height, and the net does not stop it. A shot is «in» if the ball crosses the rival's baseline inside the court, and «out» if it leaves over a sideline first.
• The players only move vertically along their baseline, and there are no double faults, no lets on the serve, no tie-break and no change of ends.
• The set is won with three games and without needing a two-game lead (six in real tennis), and the score always shows your points first even when the rival serves.

To modify it

• Require a two-game lead to win the set, and add a 7-point tie-break when it is tied.
• Add a second serve. If the first one goes out it is a fault, and two faults in a row give the point to the rival.
• Let the players also move horizontally, to come up to the net or drop back, and think about what changes in the AI.
• Change the sport to volleyball or badminton, deciding which lines, serves and scoring are needed.

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

// #region setup
const k = kaplay({
  width: 640,
  height: 360,
  letterbox: true, pixelDensity,
  background: [46, 110, 70],
  buttons: {
    up: { keyboard: ["up", "w"] },
    down: { keyboard: ["down", "s"] },
    serve: { keyboard: ["space", "enter"] },
  },
});

// The court, seen from above: baselines left and right, sidelines top and bottom.
const COURT = { left: 40, right: 600, top: 50, bottom: 330 };
const MID_Y = (COURT.top + COURT.bottom) / 2;
const HALF_H = (COURT.bottom - COURT.top) / 2;
const RACKET_H = 56;
const PLAYER_SPEED = 330; // px/s, the same for you and the AI
const BALL_SPEED = 320; // first shot of a rally
const MAX_SPEED = 560; // every hit is 5% faster, up to this
const AIM_SPREAD = 1.25; // hitting with the racket's edge aims beyond the sideline
const GAMES_TO_WIN = 3;
// #endregion

scene("game", () => {
  // #region court
  onDraw(() => {
    const { left, right, top, bottom } = COURT;
    drawRect({ pos: vec2(left, top), width: right - left, height: bottom - top, color: rgb(60, 120, 190) });
    const line = (a, b) => drawLine({ p1: vec2(...a), p2: vec2(...b), width: 2, color: rgb(255, 255, 255) });
    line([left, top], [right, top]);
    line([left, bottom], [right, bottom]);
    line([left, top], [left, bottom]);
    line([right, top], [right, bottom]);
    line([170, top], [170, bottom]); // service lines
    line([470, top], [470, bottom]);
    line([170, MID_Y], [470, MID_Y]); // centre service line
    drawLine({ p1: vec2(320, top - 10), p2: vec2(320, bottom + 10), width: 4, color: rgb(230, 230, 230) }); // net
  });
  // #endregion

  // #region players
  const racket = (x, col) => add([rect(10, RACKET_H), pos(x, MID_Y), anchor("center"), color(col), { goal: MID_Y }]);
  const players = [racket(COURT.left + 12, rgb(255, 220, 90)), racket(COURT.right - 12, rgb(255, 120, 120))];
  const [me, ai] = players;
  const moveTowards = (p, goal) => {
    p.pos.y += clamp(goal - p.pos.y, -PLAYER_SPEED * dt(), PLAYER_SPEED * dt());
    p.pos.y = clamp(p.pos.y, 20, 340); // you may step out of the court to reach wide balls
  };
  // Keyboard moves the racket; the mouse or a finger sets where it should go.
  let pointerY = null;
  onMouseMove((p) => (pointerY = p.y));
  me.onUpdate(() => {
    if (state === "serve" && server === 0) return; // the server stands still to serve
    if (isButtonDown("up") || isButtonDown("down")) {
      pointerY = null;
      me.pos.y += (isButtonDown("down") ? 1 : -1) * PLAYER_SPEED * dt();
      me.pos.y = clamp(me.pos.y, 20, 340);
    } else if (pointerY !== null) moveTowards(me, pointerY);
  });
  // #endregion

  // #region ai
  // The AI predicts where the ball will cross its baseline and places the racket
  // so the ball hits the part it wants (that is how it aims). It reacts late,
  // like a person, and it lets go balls that are flying out: they lose the point.
  let aiDelay = 0;
  let aiAim = 0;
  ai.onUpdate(() => {
    if (state === "serve" && server === 1) return;
    aiDelay -= dt();
    let goal = MID_Y;
    if (state === "rally" && ball.vel.x > 0 && aiDelay <= 0) {
      const y = ball.pos.y + (ball.vel.y * (ai.pos.x - ball.pos.x)) / ball.vel.x;
      const goingOut = y < COURT.top - 6 || y > COURT.bottom + 6;
      if (!goingOut) goal = y - aiAim * (RACKET_H / 2);
    }
    moveTowards(ai, goal);
  });
  // #endregion

  // #region ball
  const ball = add([circle(6), pos(0, 0), anchor("center"), color(230, 255, 120), { vel: vec2(0, 0), speed: BALL_SPEED }]);
  let lastHitter = 0;

  // Shoot the ball from where it is towards a point on the other baseline.
  function shoot(from, targetY, speed) {
    const targetX = from === 0 ? COURT.right : COURT.left;
    ball.speed = speed;
    ball.vel = vec2(targetX, targetY).sub(ball.pos).unit().scale(speed);
    lastHitter = from;
    if (from === 0) {
      aiDelay = 0.22; // reaction time
      aiAim = rand(-0.75, 0.75);
    }
  }

  // A hit happens when the ball crosses the racket's line within its height.
  // Where it touches the racket (centre or edge) decides the aim, as in Pong.
  function checkHit(p, who, prevX) {
    const crossed = who === 0 ? prevX >= p.pos.x && ball.pos.x < p.pos.x : prevX <= p.pos.x && ball.pos.x > p.pos.x;
    const offset = (ball.pos.y - p.pos.y) / (RACKET_H / 2 + 6);
    if (!crossed || Math.abs(offset) > 1) return;
    ball.pos.x = p.pos.x;
    shoot(who, MID_Y + offset * HALF_H * AIM_SPREAD, Math.min(MAX_SPEED, ball.speed * 1.05));
  }

  ball.onUpdate(() => {
    if (state === "serve") {
      const s = players[server]; // the ball waits in front of the server
      ball.pos = s.pos.add(server === 0 ? 16 : -16, 0);
      return;
    }
    if (state !== "rally") return;
    const prevX = ball.pos.x;
    ball.pos = ball.pos.add(ball.vel.scale(dt()));
    if (ball.vel.x < 0) checkHit(me, 0, prevX);
    else checkHit(ai, 1, prevX);
    // #endregion

    // #region rules
    // Simplified tennis rules. If the ball leaves the court over a sideline
    // before anyone returns it, it is OUT: the point goes to the other player.
    // If it passes a baseline inside the court, the receiver missed it.
    const out = ball.pos.y < COURT.top || ball.pos.y > COURT.bottom;
    if (out) return endPoint(1 - lastHitter, t({ es: "¡Fuera!", en: "Out!" }));
    if (ball.pos.x < COURT.left - 10) return endPoint(1, t({ es: "Punto del rival", en: "Rival's point" }));
    if (ball.pos.x > COURT.right + 10) return endPoint(0, t({ es: "¡Punto para ti!", en: "Your point!" }));
  });

  // The serve goes cross-court, and the server switches side every point
  // (right side on even points, left on odd ones), as in real tennis.
  let state = "serve";
  let server = 0;
  function placeServer() {
    const played = score.points[0] + score.points[1];
    const side = played % 2 === 0 ? 1 : -1; // 1 = server's right-hand side
    players[server].pos.y = MID_Y + side * (server === 0 ? 1 : -1) * HALF_H * 0.5;
    if (server === 1) wait(1.2, () => state === "serve" && serve());
  }
  function serve() {
    state = "rally";
    const s = players[server];
    shoot(server, MID_Y - (s.pos.y - MID_Y), BALL_SPEED * 0.9); // aim at the opposite diagonal
  }
  onButtonPress("serve", () => state === "serve" && server === 0 && serve());
  onMousePress(() => state === "serve" && server === 0 && serve());
  // #endregion

  // #region scoring
  // Tennis counts 0, 15, 30, 40, game. At 40–40 it is «deuce»: you need two
  // points in a row (advantage, then game). The server changes every game.
  const score = { points: [0, 0], games: [0, 0] };
  const CALLS = ["0", "15", "30", "40"];
  function callScore() {
    const [a, b] = score.points;
    if (a >= 3 && b >= 3) {
      if (a === b) return t({ es: "Iguales", en: "Deuce" });
      return a > b ? t({ es: "Ventaja tuya", en: "Advantage you" }) : t({ es: "Ventaja rival", en: "Advantage rival" });
    }
    return `${CALLS[a]} – ${CALLS[b]}`;
  }
  function endPoint(winner, message) {
    state = "pause";
    const p = score.points;
    p[winner]++;
    if (p[winner] >= 4 && p[winner] - p[1 - winner] >= 2) {
      score.games[winner]++;
      score.points = [0, 0];
      server = 1 - server;
      message += "\n" + t({ es: "Juego", en: "Game" });
    }
    banner.text = message;
    wait(1.4, () => {
      banner.text = "";
      if (score.games[winner] === GAMES_TO_WIN) return go("end", winner === 0, score.games);
      state = "serve";
      placeServer();
    });
  }
  // #endregion

  // #region hud
  const hud = add([text("", { size: 16, font: FONT, align: "center" }), pos(320, 22), anchor("center")]);
  const banner = add([text("", { size: 26, font: FONT, align: "center" }), pos(320, 160), anchor("center"), z(10)]);
  onUpdate(() => {
    const serving = state === "serve" && server === 0 ? t({ es: "  ·  Sacas tú: espacio o clic", en: "  ·  Your serve: space or click" }) : "";
    const games = t({ es: `Tú ${score.games[0]} – ${score.games[1]} Rival`, en: `You ${score.games[0]} – ${score.games[1]} Rival` });
    hud.text = `${games}   ·   ${callScore()}${serving}`;
  });
  placeServer();
  // #endregion
});

// #region scenes
function screen(title, subtitle) {
  add([text(title, { size: 34, font: FONT, align: "center" }), pos(center().sub(0, 50)), anchor("center")]);
  add([text(subtitle, { size: 16, font: FONT, align: "center", width: 560 }), pos(center().add(0, 30)), anchor("center"), color(220, 240, 220)]);
  onButtonPress("serve", () => go("game"));
  onClick(() => go("game"));
}

scene("title", () =>
  screen(
    t({ es: "Tenis", en: "Tennis" }),
    t({
      es: `Mueve tu raqueta (amarilla) con las flechas o W/S, o con el ratón o el dedo. Donde toca la bola decide hacia dónde sale: con el borde apuntas a las líneas, pero puede irse fuera. Gana ${GAMES_TO_WIN} juegos.\nEspacio o clic para empezar.`,
      en: `Move your racket (yellow) with the arrows or W/S, or with the mouse or a finger. Where the ball touches it decides where it goes: the edge aims at the lines, but it may go out. Win ${GAMES_TO_WIN} games.\nSpace or click to start.`,
    }),
  ),
);

scene("end", (won, games) =>
  screen(
    won ? t({ es: "¡Ganaste el set!", en: "You won the set!" }) : t({ es: "El rival gana el set", en: "The rival wins the set" }),
    t({ es: `Juegos ${games[0]} – ${games[1]}. Espacio o clic para jugar otra vez.`, en: `Games ${games[0]} – ${games[1]}. Space or click to play again.` }),
  ),
);

go("title");
// #endregion