Kick How to Make a Soccer Game (Browser Goal Loop 2026)

Most beginners who search “how to make a soccer game” want a green pitch you can see from above, a player you move with the keyboard, a ball that rolls with friction until someone kicks it again, and two goals that increment score when the ball crosses the line. A FIFA-grade sim with eleven-a-side formations, licensed kits, and broadcast replays is a studio franchise. A browser goal loop is different. A coding agent scaffolds top-down movement, kick impulse, and goal detection from one prompt, and AI generation covers jersey sprites, pitch art, and stadium audio. On desktop or web, that means WizardGenie for the move-kick-score interpreter, Quick Sprites for player sprites, AI Image Gen for the pitch texture, SFX Gen for kick and whistle audio, and optional Music Gen for a crowd bed. This guide is the honest end-to-end for how to make a soccer game in 2026, as a weekend build you can finish once.

What how to make a soccer game actually means in 2026

The query “how to make a soccer game” hides three intents. Some searchers want a Unity asset pack with stadium meshes, crowd animations, and licensed player likenesses — that is engine shopping, not a minimal playable loop. A second intent is a broadcast-style football sim with offside lines, slide tackles, and career mode transfers — a product team, not a solo jam. The third intent, and the one this guide targets, is a browser goal loop: one top-down pitch, two goals on the left and right edges, keyboard movement for the human player, a ball that slows with friction, kick on Space when near the ball, and a 90-second match timer that declares a winner. That is a weekend build, it demos the Sorceress toolset, and it is the format most soccer game tutorial and javascript soccer searchers actually want.

The presentation contract is small and strict. A title screen shows the match name, control hints (WASD to move, Space to kick), and Play. The play screen shows the pitch from above, both goals marked with posts, a scoreboard (0–0), a countdown timer, and optional mute toggle. On kick, play a short thud and apply velocity toward the player’s last movement direction. On goal, pause for 1.5 seconds, increment the scorer’s tally, reset ball and players to center kickoff, and resume the timer. On timer expiry, show Match Over with final score and Play Again. The Association football overview on Wikipedia (verified 2026-08-27) traces the sport from codified rules in 1863 through modern league formats — cite it when you write your itch.io blurb so players know you shipped an arcade pitch, not a full roster sim. If you already shipped another sports loop, the sibling guide on how to make a golf game covers drag aim and cup friction; this post owns keyboard movement, kick impulse, and goal-line scoring instead.

The soccer loop in one minute (move, kick, roll, score, reset)

Five moving parts, repeated until the match timer hits zero. First, move — read WASD or arrow keys each frame and translate the human player by a fixed speed (roughly 3 pixels per frame at 60 FPS). Second, kick — when Space is pressed and distance from player center to ball center is under kick radius (20 pixels), set ball velocity to the player’s facing direction times kick power. Third, roll — each frame move the ball, multiply velocity by friction (0.98 on grass), and reflect off pitch boundaries with a damp factor. Fourth, score — if ball center crosses the left or right goal line between the posts while speed exceeds a minimum threshold, increment the appropriate side and trigger goal celebration. Fifth, reset — place ball at center spot, return both players to kickoff positions, pause briefly, then resume. Slide tackles, corner kicks, and penalty shootouts are polish layered after one honest match finishes with a declared winner.

Pick your engine for how to make a soccer game: canvas, Phaser, or WizardGenie

Three good targets in 2026, each with a different trade-off. Vanilla JavaScript with canvas is the honest default and the pick this guide recommends for a first build. One <canvas> draws the pitch rectangle, goal posts, players as circles or sprites, and the ball each frame. Integrate ball position with velocity and friction, run circle-circle collision between player and ball for possession hints, and test goal overlap with simple line crossing. Total code footprint for a working browser football game is under 420 lines including CPU opponent, timer, and scoreboard. The MDN Canvas API docs cover drawing, and 2D collision detection covers circle overlap for kick range checks.

CPU opponent without pathfinding stays readable: each frame, if the CPU is closer to its own goal than the ball, move toward the ball at 70 percent of player speed; otherwise move toward a defensive spot between ball and goal. That produces chase behavior good enough for a penalty kick game jam build without A* grids.

Phaser 4.1.0 (verified 2026-08-27 on the official Phaser API documentation page) becomes the right pick if you want Arcade Physics circle bodies, tweened camera shake on goals, or keyboard cursors with gamepad fallback. Phaser does not invent your friction curve — you still need the same velocity decay and goal-line tests. Use Phaser when animated player spritesheets and stadium panning are the product; use raw canvas when the product is an html5 soccer walkthrough people can read in one sitting.

WizardGenie is not a separate rendering engine — it scaffolds whichever of the two you pick from a single natural-language prompt. WizardGenie ships as both a desktop app (Windows installer with auto-update, available to Early Access supporters and above) and a no-install web build. Its coding-model lineup covers Claude Opus 4.7, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7 (verified 2026-08-27 in src/app/_home-v2/_data/tools.ts). For soccer loops, any frontier model scaffolds movement, kick impulse, and goal detection in one prompt. Pair a frontier planner with a budget executor like DeepSeek V4 Pro or Kimi K2.5 for the typing pass — the Dual-agent pattern lands most projects at roughly one-fifth the single-frontier cost.

Step 1 — model player movement, kick impulse, and ball friction

Nothing else in the pipeline matters if the ball tunnels through a post or kicks fire in random directions. Start with a small, testable model:

const PITCH_W = 640;
const PITCH_H = 400;
const PLAYER_R = 14;
const BALL_R = 8;
const KICK_RADIUS = 20;
const KICK_POWER = 10;
const FRICTION = 0.98;
const PLAYER_SPEED = 3;

const player = { x: 320, y: 200, vx: 0, vy: 0, facing: 0 };
const cpu = { x: 320, y: 120 };
const ball = { x: 320, y: 200, vx: 0, vy: 0 };
let scoreHome = 0;
let scoreAway = 0;
let timerSec = 90;

function updatePlayer(keys) {
  let dx = 0, dy = 0;
  if (keys.has('ArrowLeft') || keys.has('a')) dx -= 1;
  if (keys.has('ArrowRight') || keys.has('d')) dx += 1;
  if (keys.has('ArrowUp') || keys.has('w')) dy -= 1;
  if (keys.has('ArrowDown') || keys.has('s')) dy += 1;
  if (dx || dy) {
    const len = Math.hypot(dx, dy) || 1;
    player.x += (dx / len) * PLAYER_SPEED;
    player.y += (dy / len) * PLAYER_SPEED;
    player.facing = Math.atan2(dy, dx);
  }
  player.x = Math.max(PLAYER_R, Math.min(PITCH_W - PLAYER_R, player.x));
  player.y = Math.max(PLAYER_R, Math.min(PITCH_H - PLAYER_R, player.y));
}

function tryKick() {
  const dist = Math.hypot(ball.x - player.x, ball.y - player.y);
  if (dist > KICK_RADIUS) return;
  ball.vx = Math.cos(player.facing) * KICK_POWER;
  ball.vy = Math.sin(player.facing) * KICK_POWER;
}

function updateBall() {
  ball.x += ball.vx;
  ball.y += ball.vy;
  ball.vx *= FRICTION;
  ball.vy *= FRICTION;
  if (Math.abs(ball.vx) < 0.05) ball.vx = 0;
  if (Math.abs(ball.vy) < 0.05) ball.vy = 0;
  // wall bounce
  if (ball.x < BALL_R || ball.x > PITCH_W - BALL_R) ball.vx *= -0.85;
  if (ball.y < BALL_R || ball.y > PITCH_H - BALL_R) ball.vy *= -0.85;
  ball.x = Math.max(BALL_R, Math.min(PITCH_W - BALL_R, ball.x));
  ball.y = Math.max(BALL_R, Math.min(PITCH_H - BALL_R, ball.y));
}

function checkGoal() {
  const goalTop = PITCH_H / 2 - 40;
  const goalBot = PITCH_H / 2 + 40;
  if (ball.y > goalTop && ball.y < goalBot) {
    if (ball.x < 8) { scoreHome += 1; resetKickoff(); return 'home'; }
    if (ball.x > PITCH_W - 8) { scoreAway += 1; resetKickoff(); return 'away'; }
  }
  return null;
}

Unit-test three cases before you generate art: a stationary kick from beside the ball sends it toward mid-field; a wall bounce reverses horizontal velocity without the ball leaving the pitch; and a slow roll across the left goal line increments score exactly once. Those three tests catch ninety percent of javascript soccer bugs. Keep the pitch aspect ratio near 8:5 so goals feel wide enough for arcade play without turning every match into a shutout.

Step 2 — wire match timer, CPU chase, and goal celebration in WizardGenie

With movement and kick helpers drafted, open WizardGenie. Drop in a bare index.html shell referencing placeholder circle draws for players and ball. Give the agent one paragraph: Build a browser top-down soccer game. Pitch 640x400. Human player WASD, CPU chases ball at 70% speed. Space kicks when within 20px of ball. Ball friction 0.98, wall bounce 0.85. Goals on left and right between y=160 and y=240. 90-second timer, scoreboard top center. On goal pause 1.5s, increment score, reset to center kickoff. Match Over when timer hits zero. Autosave high score to localStorage. Feed that to any coding model in the lineup and the interpreter scaffolds in under five minutes.

The remaining hour is polish via follow-up prompts. Add a goal flash — white overlay fade on score — six lines. Add a ball trail — faint circles behind fast rolls — eight lines. Add a kick wind-up — scale player 1.1x for 80ms on Space — four lines. Add a stoppage whistle on timer expiry — hook to your SFX clip. Each item is a follow-up prompt, and the whole top down soccer browser experience comes together over a Saturday afternoon.

Optional sibling: if your jam needs networked two-human play instead of CPU chase, borrow the lobby pattern from how to make a multiplayer game — same pitch, different input routing.

Step 3 — Quick Sprites jerseys, AI Image Gen pitch, SFX Gen kicks, Music Gen crowd

Flat colored circles read as a tech demo even when kick math is perfect. Four asset passes cover the whole browser football game experience:

• Player jersey sprites — two top-down character variants from Quick Sprites. Prompt for “top-down soccer player sprite, 32x32, [blue/red] jersey, white shorts, transparent background, arcade sports game asset”. Quick Sprites bills 9 credits per generation per src/app/quick-sprites/page.tsx. Two teams is 18 credits.
• Pitch texture — one seamless top-down grass field from AI Image Gen. Prompt for “top-down soccer pitch texture, green striped grass, white center line and penalty boxes, 640x400, game asset, no players”. Nano Banana Pro costs 18 credits per generation per src/lib/models.ts.
• Kick thud — short impact under 0.3 seconds when Space connects.
• Goal cheer — 1 to 2 second crowd burst on score.
• Whistle start — referee tone under 0.5 seconds on kickoff.
• Match end horn — flat note under 1 second when timer expires.

Open SFX Gen, describe each clip in plain language (“soccer kick impact, leather thud, single hit”), and export WAV into your assets/audio/ folder. Billing is 1 credit per second of generated audio per src/app/sfx-gen/page.tsx — four short clips land around 6 credits total.

For the background loop, open Music Gen and prompt for “stadium crowd ambience loop, 100 BPM, subtle chants, no vocals, seamless loop, 30 seconds”. Music Gen costs 10 credits per generation (MUSIC_CREDIT_COST in src/app/music-gen/page.tsx). Mute by default with a toggle — mobile browsers often block autoplay until the first click anyway.

Step 4 — playtest the browser goal loop like a jam judge

Before you share the build, run a five-minute checklist borrowed from game-jam judging:

1. Kick feels responsive — Space within kick radius always applies velocity in the facing direction; no dead frames after movement stops.
2. Friction reads honest — ball stops within three seconds on open grass without manual velocity zeroing.
3. Goals register once — ball hovering on the line does not double-count; reset positions both players and ball cleanly.
4. CPU is beatable — human can score at least twice in 90 seconds against default chase AI.
5. Timer is visible — countdown never stalls during goal pause; Match Over appears exactly at zero.

Log issues as WizardGenie follow-ups, not rewrites. “CPU stays between ball and its goal when ball is in CPU half” is one prompt. “Add arrow indicator showing kick direction before Space” is another. The Sorceress tools guide lists every asset tool if you want to swap Music Gen for Sound Studio on a longer loop.

What how to make a soccer game costs on Sorceress in 2026

A honest budget for the stack above against the 2026 Sorceress rate card (verified 2026-08-27 against local source):

• Two Quick Sprites jersey passes: 18 credits (0.18 USD)
• One AI Image Gen pitch texture at Nano Banana Pro: 18 credits (0.18 USD)
• Four SFX Gen clips (~6 seconds total): ~6 credits (0.06 USD)
• One Music Gen stadium bed: 10 credits (0.10 USD)
• Coding-model API time for WizardGenie scaffolding: under 0.40 USD with a planner plus budget executor pair

Total art and audio: roughly 52 credits or 0.52 USD. The free 100-credit signup grant (src/app/api/admin/credits/route.ts) covers the full stack outright. If you already built a racing game or bowling game in the same jam week, reuse the SFX Gen whistle clip and Music Gen loop — sports audio generalizes well.