How to make a sports game with AI

Pick one sport, cut it down to a goal and a score, and build that from above. The code is not the difficulty. The difficulty is that a shot aimed with four keys will miss a goal the player was obviously trying to hit, and a game that lets that stand feels broken.

Four steps to a shot worth taking#

Build a sports game as ONE self-contained .html file, seen from above.
No frameworks, no image files, no 3D. The sport is football, cut back to
only the parts that make it recognisable.

PITCH: a green rectangle, a goal mouth at each end, a halfway line.
Nothing else. No throw-ins, no offside, no fouls, no substitutions.

PLAYERS: one circle I control with the arrow keys or WASD, and one
circle the computer controls. Running into the ball pushes it along.
Holding space winds up a shot and releasing it kicks, harder the longer
it was held, up to a ceiling.

SHOT ASSIST, and please build exactly this. On release, work out the
angle from the ball to the centre of the opposing goal. If my shot's own
angle sits within ASSIST_CONE of that angle, replace it with the angle
to the goal completely, rather than part of the way. The cone gets wider
the closer I am to the goal. A shot that would pass just outside a post,
but that was inside the cone, counts as a goal anyway. None of this
applies to a shot pointed away from the goal, which must travel exactly
where I aimed it.

OPPONENT: it runs at the ball, shoots when it reaches it, and is a
little slower than me. It should decide where to go a short delay after
the ball changes direction, not in the same frame. Give its shots a
small random error and give them no assist at all. Somebody playing for
the first time should win.

RULES: goals, a score, a kick-off from the centre spot after each goal,
and a match that ends when one side reaches a target score. That is the
whole rulebook.

HUD: both scores, and a shot power bar while space is held.

PHONE: a drag moves my player and a tap shoots.

Multiply every movement by the seconds that passed since the previous
frame, and never let that value rise above 0.05. Put canvas {
touch-action: none; } in the stylesheet. Gather every number worth
changing into one CONFIG object at the top, ASSIST_CONE and the
close-range widening and the opponent's speed and delay among them, each
with a comment saying what it does.

The ball has to flatter the player#

Simulate the shot honestly and this is what happens. The player holds up and right, which is one fixed angle out of eight. The ball leaves on that angle, passes a finger's width outside the post, and a goal they were plainly trying to score does not count.

They are not being unreasonable. They did aim at the goal. The keyboard cannot express what they meant, so the simulation is answering a question they never asked. The fix is to answer the question they did ask.

Mechanically it is nothing. Work out the angle from the ball to the centre of the goal. Subtract the angle the player supplied. If what is left is small enough, throw away the player's angle and use the goal's. If it is not, leave the shot alone entirely.

Call it what it is. This is cheating on the player's behalf, and it is in every sports game you have ever enjoyed. Nobody who plays yours will know, and nobody who plays the honest version will stay. Fairness to the simulation is not the same thing as fairness to the person holding the keys.

Bend the shot the whole way, not part of the way. A shot moved halfway towards the goal travels on a line the player did not choose and still misses, which is the worst of both. Inside the cone, commit. Outside it, do nothing at all.

The three assists worth having#

The angle snap is the big one, but on its own it leaves two gaps. Shots from very close still feel fussy, because a small angle error covers a lot of ground at point blank range. And a shot that beats the snap by a hair still goes wide.

The last row is the one that keeps the other three honest. An assist that fires in every direction is not an assist, it is a magnet, and players spot a magnet immediately.

The widening deserves a word, because it is the least obvious of the three. A player standing beside the goal is the most certain they will ever be that they are about to score. Letting the mouth count as a little larger from there matches what they already believe.

The generous near miss needs the most restraint. It only works when the intent was clear, which is exactly what the cone already measures. Apply it to a shot that was never aimed at the goal and the player watches the ball sail wide, then hears a goal. That reads as a bug, and it takes their trust in everything else with it.

An opponent a beginner beats#

A first build gives the computer the player's exact speed and no reaction time. It reaches every loose ball first, it never overruns, and it cannot be beaten. Nobody plays an unbeatable opponent a second time.

Aim lower than feels right. Somebody picking this up cold should win their first match without working out any tactics. You can add difficulty afterwards, and you will. What you cannot recover is the person who lost their first game badly and closed the tab.

• Give it a reaction delay. Let it work out where to run a short time after the ball changes direction, rather than in the same frame. Most of what makes an opponent feel like a person rather than a tracking system lives in that delay.
• Make it slightly slower. A fraction slower than the player, not half the speed. A chase it almost wins is better to watch than one it loses from the start.
• Let it shoot badly. A small random error on every shot, and no assist whatsoever. The assist belongs to the human, and giving the opponent one quietly undoes all the generosity you just built.
• Expose its speed and its delay. Those two values are a difficulty setting you already have. Naming them in the config is most of the work of adding easy, normal and hard later.

Keep only the rules that make it recognisable#

Every sport carries a rulebook and almost none of it belongs in a small game. Offside, throw-ins, fouls, the clock and substitutions are all real parts of football, and each one you add stops play for a reason the player did not intend.

Ask one question of every rule. Without this, would somebody still know which sport they were playing? A goal and a score survive that question. Offside does not, because nobody looking at the screen would notice its absence.

• Keep the scoring shape. Where the points come from is what identifies the sport. A mouth at each end is football. An arc worth more is basketball. One serve and a net is tennis.
• Keep the restart. Something has to happen after a point, or the game has no rhythm. A kick-off from the centre is enough and takes a moment to write.
• Drop anything that needs explaining first. If a player has to read a rule before the first kick, it is not in the game yet. Teach by letting them try things.
• Drop anything that punishes an accident. A rule that stops play when the player did nothing obviously wrong is read as the game malfunctioning, regardless of how real it is.

What is left is a loop: get the ball, shoot, score, restart. That loop plus a shot that flatters is a sports game people finish. Add the rulebook later, one rule at a time, and drop any rule that makes a match less enjoyable than it was before.

⚽Sports games written by AI

‹ ›

Fable 5.1

★ 5.0161 plays

▶

Rocket Arena

GLM-5.3multi

★ 5.079 plays

▶

World Soccer M

Common questions#

Where to go next#

When you have won a match and immediately started another, publish it. The page records which model wrote it and the prompt behind it, and a scoreline is the kind of thing people want to beat. The sports games here are a short list, which makes it an easy category to be the best thing in.

A sport is better with somebody sitting next to you, and the two player guide covers sharing one keyboard without the two sets of keys fighting. The general method is in how to make a game with AI. If your sport involves a vehicle, the racing guide has the handling numbers, and the prompt guide collects fixes for the faults a first build tends to arrive with.