WebTennis

Arcade tennis in the browser, in the spirit of the 16-bit classics: a court seen from above, two small players, one button, and a ball that has to land in. 1 player against the CPU, 2 players on one keyboard, or online with a four-character room code.

No dependencies, no build step. HTML, CSS and JavaScript exactly as the browser receives them.

It is the second game built this way. The first is websoccer, and the two share their engine — see Shared with websoccer.

Getting started

git clone https://github.com/markclausing/webtennis.git
cd webtennis
npm start

Then open http://localhost:5173/. There is no npm install; there are no packages to install.

Controls

	Player 1 (blue)	Player 2 (red)
Move	W A S D	Arrow keys
Serve / hit	Space	Enter
Pause	Esc

• Serving is two presses: one throws the ball up, the second hits it. You get two serves, and the second one is worth taking care over. Both players are put where the rules put them - server behind his own baseline, on the right for an even point and the left for an odd one, receiver in front of the box the ball has to land in - and that box is lit up while you get ready, so which way the serve is going is never a guess.
• Hold the button to hit harder. Hold longer still and the ball goes up instead of through — a lob, for when your opponent is at the net.
• Start early. Holding the button is winding up, not waiting to fire: the shot goes off by itself when the ball arrives, with however much wind-up you have by then. The longer you have been holding, the harder you hit it and the closer it goes to where you aimed — a shot thrown at the ball at the last moment sprays. On screen that is the bar under your player and the racket going back behind him.
• Nothing tells you where the ball will land. Read the shadow: it spreads and fades as the ball climbs, and draws in tight and dark as it drops. That, and a faint mark under your player when the ball is in reach, is all the help there is - judging depth and picking your moment is the game.
• Nothing tells you how hard you are hitting it either. The racket does: back and down as you wind up, through the ball on contact. A bar with a number's worth of precision in it was doing the judging for you.
• You do not have to be exactly right. The reach is generous and the players are drawn bigger than the court's own scale, because standing on precisely the right blade of grass is not the skill this game is about - the timing and the shape of the shot are, and a tight reach was deciding both of them by whether you had judged the last step.
• Holding the button plants you. While it is held the stick shapes the shot instead of moving your feet, which is the only way one stick does both jobs without fighting itself - and it decides what the wind-up is worth: commit early and you have a long time to work on the ball, at the price of having to be standing in the right place already. Let go and you can run again.
• Steer while you swing to place it: sideways sends it across the court, forward drives it deep, back drops it short. Held for a quarter of the wind-up it moves the ball 0.11 of the way to the sideline, half 0.22, all of it 0.42 - and aftertouch adds up to another 0.54 on top. Keep steering for a second after contact and the ball bends in the air. How far it bends is how long you hold it, not which of eight directions you pushed: a quarter of a second is a nudge, a full second walks the ball across half the court. That is where the placement lives, and it is meant to be felt rather than aimed. Aim alone cannot put the ball out - the stick moves you as well as aiming the shot, so the direction you are holding to reach the ball should not fling it past the sideline. Going for the lines takes aftertouch, which is a thing you choose to do.
• Lob puts it over somebody standing at the net. It is the lob button and nothing else - holding the swing longer makes the ball harder, never higher.
• Every key can be changed in the menu, or take a preset.
• On a phone you get a stick and two buttons, and the court is drawn above them rather than behind them: this game is played upright, so the bottom of the screen is your own baseline and a thumb parked over your own player is no way to play. Nothing asks you to turn the phone sideways - a tennis court is taller than it is wide.

The court is not the real shape. A singles court is nearly three times as long as it is wide, and at that shape there is time to stroll to every ball - the width is the only thing you have to cover in a hurry and there was not enough of it. This one is about two to one: shorter, wider, and it makes you choose which ball to go for. The ball speeds came down with the length, or the same shot would simply arrive sooner in a smaller court, which is a different game again - at the old speeds one point in seven was an ace.

The rules themselves are the real ones, because they are what makes tennis tennis: the ball has to land in, it may bounce once, a serve has to find the diagonal box, and the score runs fifteen, thirty, forty, deuce, advantage. A set is won by two clear games, and the score goes up in the middle of the screen after every point, in the words the umpire uses.

Tactics

Two things decide points beyond getting to the ball.

You can volley. Anything up to head height can be played out of the air, so standing at the net is a real position rather than a place to watch balls go past. The CPU answers it by lobbing you, which is what a lob is for.

Pace forces errors. The speed of the ball arriving eats into the wind-up you had, so a shot struck flat out is awkward to handle however early your opponent started - it cannot be outrun, because it is charged at the moment of contact. Measured against the CPU, feeding it the same ball at different speeds: at 262 px/s on arrival it comes back 52% of the way down the court, at 336 it comes back short and sitting up, and at 414 and above it does not come back at all.

The net opens the angles. How sharp a shot you can play depends on how far up the court you are standing: from the baseline a full sideways swing moves the ball 26% of the way to the sideline, from the service line 45%, and from the net 53% - and aftertouch adds to all of them. The price is paid automatically. Stand that close and the next ball is on you before you have finished admiring this one.

The CPU does not come to the net, so for now that half of it is yours alone.

How it plays

Three difficulty settings, and what separates them is measured rather than guessed. The strongest lever is a delay before the CPU sets off after the ball — reading the shot early is most of what makes a good player look quick. The second is how far its aim strays, and that aim is allowed to stray past the lines. That last part sounds like a detail and is not: an earlier version clamped every shot into the court, which meant the CPU could not miss, made no errors at any level, and easy and hard finished level with each other. Games taken off HARD over four matches: EASY 6, NORMAL 17, HARD 22.

Points end the way they do in tennis: at HARD against itself, 93% of them are winners and 7% aces; against EASY, a quarter of the points are errors.

Shared with websoccer

Eleven files are identical in both games — the input mask, the touch controls, the lockstep netcode, the relay, the Cloudflare Worker, the high score table, the three-letter name entry, the formant speech synthesiser and the maths. They are shared by being the same file in both repositories rather than by a package, because neither game has a build step and neither is going to grow one for this.

Copying is only worth anything if somebody notices when the copies part ways:

node tools/sync-shared.js          # are they still the same?
node tools/sync-shared.js --pull   # take websoccer's copy
node tools/sync-shared.js --push   # send this one back

It runs as part of npm test, so a change on one side shows up as a failing test on the other rather than as a mystery six months later. It expects websoccer to be checked out beside this repository, and says so and passes if it is not.

Nothing that knows what sport it is gets shared. The simulation, the court, the sounds and the words are each game's own — a shared file full of if (tennis) would be worse than two files.

The umpire

The score is called out loud by the same formant synthesiser websoccer uses for its commentator: a buzz through three sharp filters, which is roughly what the speech chips of the era did. The voice is shared; the words are not. Tennis is the easy case for a talking scoreboard, because the calls have not changed in a century — love, fifteen, thirty, forty, deuce, advantage, game.

Tests

npm test              # the lot
npm run test:sim      # whole matches headless: determinism, scoring, the rules
npm run test:shared   # the shared files, against websoccer next door

The scoring is tested by driving points straight through the scorer rather than by playing, because deuce, advantage and advantage-lost take a long time to reach by playing and are exactly where a scoreboard goes subtly wrong.

What is not there yet

• No tiebreak: a long set is settled by the first player to get two games past the target rather than at seven points.
• No doubles, no second set, no tournament.
• The CPU plays from the baseline and does not come to the net.
• The players are the football game's figures with a racket drawn on. They will do until somebody draws a tennis player.
• No icons and no title screen art yet.
• The CPU never comes to the net, so there is no serve and volley to play against.

The relay

Online play and the shared high score board run on a Cloudflare Worker of this game's own — the same code websoccer uses, deployed separately on purpose. The board lives in a single Durable Object under one key, so one Worker serving both games would mean one table with football and tennis results mixed into it. Two Workers, two boards. They post into the same Discord channel, which is only a webhook address and does not care which game is talking.

cd worker && npx wrangler login && npx wrangler deploy
npx wrangler secret put DISCORD_WEBHOOK   # optional: announce new entries
npx wrangler secret put ADMIN_KEY         # optional: lets you clean the board

Then put the address it prints in src/config.js as DEFAULT_RELAY, with wss://.

Licence

MIT.

An original tribute to the top-down sports games of the nineties: no code, artwork or other parts of any existing game, and no affiliation with their makers or rights holders.