World Soccer M

Play World Soccer M free in your browser: an action game with nothing to download and no sign-up. You can play it online against other people, in a room the site puts together for you. GLM-5.3 wrote the code; the prompt that produced it is on this page. It works on a phone as well as a desktop.

About World Soccer M

World Soccer M is an action-packed 2D arcade soccer game featuring multiple game modes, intense 1v1 online multiplayer, and classic pass-and-play local options. Lead your favorite team through 34 competitive championship leagues, earn coins, and unlock a wide roster of custom ball skins and unique formations. Use precise directional aiming and strategic power shots to outsmart AI opponents or challenge friends live over peer-to-peer online connections with simple 6-character room codes. Whether practicing in Quick Match mode or fighting for the top spot in championship tournaments, World Soccer M delivers smooth physics-based football action directly in your browser with automatic save progression and full mobile compatibility.

How was World Soccer M made?

Creator

real game

Model

GLM-5.3Zhipu AI

Effort

Max

Cost to build

$0.50

Build time

25 min

Multiplayer

yes

On phones

plays on mobile

The prompt behind World Soccer M

Build a complete, polished 2D mobile-style physics soccer game called "World Soccer M" 
(similar to "Soccer Stars"), delivered as a SINGLE self-contained .html file containing 
all HTML, CSS, and JavaScript inline (no external files, no build step, no external 
libraries/CDNs required — write the 2D physics engine, rendering, and game logic from 
scratch in vanilla JavaScript using the Canvas API). The file must run immediately by 
just double-clicking/opening it in any modern browser. Use the attached reference 
screenshots as the exact visual and functional blueprint. Implement every system below 
fully and make it production-ready, not a demo.

═══════════════════════════════════════
1. CORE GAMEPLAY — PHYSICS "FLICK" MECHANIC (CRITICAL)
═══════════════════════════════════════
- The field is an octagon-shaped pitch (angled corners, not a rectangle) with two goals 
  (top and bottom), matching the screenshots.
- Each team has 4 round token-style player pieces (one is the goalkeeper positioned near 
  the goal line) plus a ball.
- CORE MECHANIC (must be implemented precisely, this is not shown in the screenshots but 
  is mandatory):
  • When the player presses/touches one of their own player pieces, entering "aim mode" 
    for that piece.
  • The player then drags anywhere on the screen (not just directly on/around the piece) — 
    track the drag vector from the ORIGINAL touch-down point on the piece to the current 
    finger/mouse position, regardless of where on the screen the drag ends.
  • Show a visual aiming indicator (dotted trail / stretch line / slingshot-style pull-back 
    arrow) from the piece opposite to the drag direction, with a power gauge.
  • On release, launch the piece using physics (impulse force) in the direction OPPOSITE 
    to the drag vector, with force magnitude proportional to drag distance (clamped to a 
    max power so pieces near corners/edges of the screen can still achieve full power — 
    do NOT limit power just because the piece is near a screen edge or corner; compute 
    power purely from drag distance/vector, independent of the piece's on-screen position).
  • Support full 360° directional flicks regardless of where the piece sits on the pitch 
    (corners, edges, center).
  • Implement realistic 2D physics: momentum, friction/deceleration, elastic collisions 
    between pieces, wall bounces off the pitch boundary, and goal-post collisions.
  • Turn-based or momentum-based turn switching (once all pieces stop moving, turn passes 
    to the other side) — implement standard Soccer Stars turn logic: player takes a shot, 
    if it results in a goal or hits an opponent piece, they get another turn; otherwise 
    turn switches.
  • Ball must be kickable by any piece on contact, with realistic transfer of momentum.
  • Detect goals when ball fully crosses the goal line, trigger "GOAL!" banner animation 
    (as shown in reference image) and update score.
  • Detect match win when score limit reached or ball limit (×2 balls shown in HUD) is 
    exhausted, trigger "WIN" banner animation with confetti/stars (as shown in reference).

═══════════════════════════════════════
2. GAME MODES (MUST INCLUDE ALL THREE)
═══════════════════════════════════════
Add a "Game Mode" selection accessible from the main menu (e.g., a new card/button, or a 
mode-select popup before entering Championship), offering:

--- MODE A: VS COMPUTER (AI) — ALL DIFFICULTY LEVELS ---
- This is the mode used for the entire Championship/League progression (section 3 below).
- AI difficulty must scale automatically with league tier: early leagues = AI shoots with 
  poor accuracy, random power, slow "thinking" delay, and weak positioning; late leagues 
  = AI shoots with near-perfect aim, calculates rebounds/bank shots off walls, defends 
  goal actively by repositioning its goalkeeper piece, and takes calculated risk shots at 
  the opponent's pieces to gain extra turns.
- Also add a separate "Quick Match vs AI" option outside the Championship flow (no entry 
  fee/no reward, just casual practice) with a manual difficulty selector: Easy / Medium / 
  Hard / Expert, so the player can practice against any AI level anytime, freely.

--- MODE B: 2 PLAYER (LOCAL/PASS-AND-PLAY) ---
- Same device, same screen: two human players take turns, each controlling their own 
  team's pieces on their respective turns.
- Add a brief "Player 1's Turn" / "Player 2's Turn" banner/indicator that appears at the 
  start of each turn so it's clear whose turn it is.
- No entry fee/coin wager in this mode (it's a free casual local match) — optionally 
  allow players to set a custom score limit or ball count before starting.

--- MODE C: ONLINE MULTIPLAYER (REAL-TIME PVP) ---
- Implement real-time online play so two players on different devices/browsers can play 
  against each other live.
- Since this is a single self-contained HTML file with no backend server, implement this 
  using a serverless WebRTC peer-to-peer connection with manual signaling: 
  • One player clicks "Create Room" → the game generates a short room code/connection 
    string (e.g., using WebRTC's offer/answer SDP exchange encoded as a short shareable 
    code or QR-like text string).
  • The other player clicks "Join Room" and pastes/enters that code to establish a direct 
    peer-to-peer WebRTC DataChannel connection between the two browsers (no server 
    required, works purely client-side).
  • Once connected, synchronize game state in real-time: player inputs (flick vector, 
    power, which piece), physics simulation results, scores, and turn changes are sent 
    over the DataChannel so both players see the same live match.
  • Handle basic connection states gracefully: "Waiting for opponent...", "Connected!", 
    "Opponent disconnected" (show a reconnect/exit option if the connection drops).
  • Add a simple in-match text chat or quick-emote reaction system (optional nice-to-have) 
    between the two connected players during online matches.
  • Clearly label this mode as "Online 1v1 (Direct Connect)" in the UI, and include a 
    short in-app instruction tooltip explaining how Create Room / Join Room works, since 
    there's no matchmaking server.
- No entry fee/coin wager in online mode either (since there's no server to validate fair 
  wagering) — purely for fun/competitive play with a live opponent.

--- MODE SELECTION UI ---
- From the main menu, add a clear "Play" flow: tapping "Championship" always uses VS 
  Computer with league-based AI scaling (as already defined). Add a new dedicated menu 
  card/button "Multiplayer" (or "Play With Friends") that opens a mode-select screen with 
  three clearly labeled options: "Quick Match vs AI" (with difficulty picker), "2 Player 
  (Same Device)", and "Online 1v1 (Direct Connect)" — each with a short one-line 
  description and an icon, styled consistently with the game's dark navy/gold UI theme.

═══════════════════════════════════════
3. MAIN MENU SCREEN
═══════════════════════════════════════
- Title logo "WORLD SOCCER M" (red/blue stylized text with soccer ball icon).
- Top bar: coin icon + coin balance counter + "+" button (opens IAP/coin shop), Help "?" 
  button, Settings gear icon.
- Main navigation cards: 
  1. "Championship" (large card with glowing soccer ball animation, tappable, arrow icon) 
     — VS Computer, league-based, with entry fees/rewards.
  2. "Multiplayer" / "Play With Friends" (new card) — opens the mode-select screen from 
     section 2 above (Quick Match vs AI / 2 Player / Online 1v1).
  3. "T & F" (Team & Formation) — shows current selected team icon + formation preview
  4. "Shop" — shows stacked gold coins icon
- Starting currency: every new player starts with exactly 1,000 coins.

═══════════════════════════════════════
4. CHAMPIONSHIP / LEAGUE PROGRESSION SYSTEM (VS COMPUTER ONLY)
═══════════════════════════════════════
- Horizontal swipeable league carousel (left/right chevron arrow buttons) showing leagues 
  in sequence, each represented by a glowing soccer ball banner with a star-rating display 
  above it (0 to 4+ stars earned, shown as filled/unfilled gold stars).
- Generate a minimum of 30 leagues total (going well beyond "Training Center" → "Rookie 
  League" → ... → "Premier League" shown in screenshots), each with escalating difficulty, 
  named uniquely and thematically (e.g., Training Center, Rookie League, Amateur Cup, 
  Bronze League, Silver League, Gold League, Platinum Cup, Diamond League, Regional Cup, 
  National League, Champions Path, World Series, Elite Arena, Battle Arena tiers 1–10, 
  Masters League, Legend Cup, Premier League, Ultimate Championship, World Cup Final, etc.)
- Each league card shows:
  • League name
  • Reward: coin stack icon + reward amount (scale rewards from 200 coins at early levels 
    up to 200,000 coins at the hardest/final league)
  • "Need Goals" requirement (e.g., 2 Goals, 3 Goals, scaling up with difficulty)
  • "Fee" to enter — scale entry fees from Free (level 1) up to a maximum entry fee of 
    100,000 coins for the hardest late-game leagues
  • "Game start" button (disabled/greyed with a lock icon + "Open condition" text if 
    locked — e.g., "Win Battle Arena 5", showing 5 trophy icons as progress indicator, 
    when prerequisites aren't met)
- Leagues unlock sequentially; some require winning a specific number of trophies/previous 
  leagues (locked leagues show a padlock icon and unlock condition text instead of the 
  Game Start button).
- Reward scaling: highest-tier league reward must reach 200,000 coins; highest entry fee 
  must reach 100,000 coins.
- AI difficulty in each league scales exactly as described in section 2, Mode A.

═══════════════════════════════════════
5. T & F (TEAM & FORMATION) SCREEN
═══════════════════════════════════════
- Two toggle tabs at top: "Star" (default player skin/team) and "Base" (shows a mini 
  formation preview thumbnail of the 4 pieces on a pitch).
- "Available teams" section header with a counter badge showing "X / 56" or higher 
  (unlocked count / total).
- Grid of selectable team icons; the currently equipped team is highlighted with a 
  gold/yellow border and a number badge in the corner.
- Selecting a team from this screen equips it immediately for matches (used across all 
  modes: Championship, vs AI, 2 Player, and Online).

═══════════════════════════════════════
6. SHOP SCREEN — 3 TABS
═══════════════════════════════════════
Top bar identical to main menu (coins, +, help, settings). Three tabs: "Team", 
"Formation", "Coin".

--- TAB A: "Team" ---
- Grid (4 columns) of purchasable team/character icons — round token portraits featuring 
  a wide variety of themes: animals (tiger, wolf, panda, fox, snake, cheetah, bear, lion, 
  bull), sports balls (tennis ball, golf ball, baseball, volleyball, basketball, football/
  rugby ball, 8-ball/billiard), fruits (kiwi, orange, watermelon), and more abstract/
  colorful orbs (bowling ball style, etc.) — generate a MINIMUM of 60 unique team skins 
  total, numbered sequentially (#1 to #60+).
- Each team has a coin price displayed on a button below its icon; prices scale from very 
  cheap (250–1,000 coins for simple sports balls) up to very expensive (100,000+ coins for 
  rare/exotic skins like snow leopard, lion, etc.).
- Already-owned/equipped items show differently (e.g., highlighted green button as seen 
  with a couple of items in the screenshot, indicating "equip"/"selected" state vs the 
  grey "buy" state for locked items).
- Tapping an affordable locked item purchases it (deducts coins) and unlocks it in the 
  T&F screen; tapping an unaffordable item shows an insufficient-funds prompt.

--- TAB B: "Formation" ---
- Grid (2 columns) of formation cards, each showing:
  • Formation number/ID badge (top-left corner)
  • Mini pitch diagram preview showing the exact positions of the 4 player tokens for 
    that formation (varied layouts: diamond, triangle-attack, wide-defense, box, etc.)
  • Price button below (scaling from 500 coins for early formations up to 2,500+ for mid 
    tier)
  • Locked/special formations show a padlock icon + a label instead of a price (e.g., 
    "Battle Arena" — meaning this formation only unlocks by reaching/winning a specific 
    league/mode, not purchasable with coins)
- Generate a MINIMUM of 30 unique formations total (well beyond the 7 shown), each with a 
  visually distinct token layout on the mini pitch preview. Mix purchasable (coin-priced) 
  and lockable (condition-based) formations.
- Selecting/buying a formation applies it to the player's team layout in matches.

--- TAB C: "Coin" ---
- IAP-style coin package store: list of coin bundles at increasing price/quantity tiers 
  (small/medium/large/mega packs) — implement as a mock/simulated purchase system 
  (since this won't have real payments) that just adds coins to the balance for demo 
  purposes, with a "Watch Ad for X coins" free option too.

═══════════════════════════════════════
7. MATCH HUD (IN-GAME) — ADAPTS TO MODE
═══════════════════════════════════════
- Top status bar: 
  • Left: player's team icon badge + "ME" label
  • Center-left: player's score
  • Center: coin wager pot icon showing the amount at stake for this match (only shown in 
    Championship mode; hidden/replaced with mode label in Quick Match/2 Player/Online 
    modes since those have no wager)
  • Center-right: opponent's score
  • Right: opponent icon + opponent name — in Championship/Quick Match vs AI, use randomly 
    generated funny AI names (e.g., "Monkey King", "Meow Punch" — generate a pool of 20+ 
    such names); in 2 Player mode show "Player 2"; in Online mode show the connected 
    opponent's chosen display name/nickname.
  • A momentum/advantage progress bar beneath the score row (green-to-orange gradient bar 
    showing whose "turn streak" advantage is building) — shown in AI and local modes; in 
    Online mode also show a small connection status indicator (e.g., green dot = 
    connected, ping/latency optional).
- Below that: sponsor banner strip (cosmetic, can be a placeholder banner, e.g., 
  "Hotshare")
- Ball counter icon "⚽ × 2" showing balls remaining in the match, and a settings gear icon
- Bottom corners: two cosmetic sponsor/publisher logos (placeholders)
- Pitch fills the remaining space, octagon-shaped, with both goals, center circle, and 
  center line clearly drawn matching the screenshots' style.
- In 2 Player and Online modes, show a clear turn indicator banner ("Your Turn" / 
  "Opponent's Turn" / "Player 1's Turn" / "Player 2's Turn") at the top of the pitch at 
  the start of each turn.

═══════════════════════════════════════
8. MATCH ECONOMY / WAGER SYSTEM (CHAMPIONSHIP MODE ONLY)
═══════════════════════════════════════
- Every ranked/championship match has an entry fee (coin wager) deducted from balance to 
  start, and pays out a coin reward on victory (both fee and reward scale with league 
  difficulty exactly as defined in section 4 — up to 100,000 fee / 200,000 reward at the 
  top tier).
- Show a "Got X coins" floating reward popup with animated coin-pile burst effect during 
  matches when milestone rewards are earned mid-game (as seen in reference image with 
  "Got 1,000 coins").
- On victory, show the "WIN" banner with stars/confetti burst animation and award the 
  league's coin reward; on defeat, show a "LOSE" banner and forfeit the entry fee already 
  paid.
- Quick Match vs AI, 2 Player, and Online modes are always free to play (no entry fee, no 
  coin reward) — still show the "WIN"/"LOSE" banners with celebration animations for 
  satisfaction, just without any coin transaction.

═══════════════════════════════════════
9. TECHNICAL REQUIREMENTS
═══════════════════════════════════════
- Implement a custom lightweight 2D physics system in pure vanilla JavaScript (no external 
  physics libraries) handling: circle-circle collision detection and response, velocity/
  momentum, friction/deceleration per frame, elastic collisions between pieces and ball, 
  and boundary/wall collision with the octagon pitch edges and goalposts. Use 
  requestAnimationFrame for the game loop. This same physics simulation must run 
  deterministically/consistently for both local (AI, 2 Player) and online modes.
- Use the browser's native WebRTC APIs (RTCPeerConnection + RTCDataChannel) for the 
  Online 1v1 mode, with manual copy/paste offer-answer signaling (no external signaling 
  server) as described in section 2, Mode C.
- Use localStorage (available natively in-browser, no import needed) to persist coin 
  balance, owned teams, formations, and league progress across sessions — all within 
  the same single HTML file.
- Fully responsive touch AND mouse-drag support (must work on both mobile touch and 
  desktop mouse for testing), for all modes including online.
- Smooth animations for: goal celebration, win/lose banners, coin reward bursts, button 
  presses, screen transitions between menu/shop/T&F/championship/mode-select/match.
- Clean, well-organized code within the single file (clearly separated and commented 
  sections for: physics/game logic, UI screens/rendering, data config for teams/
  formations/leagues, save system, AI logic, and WebRTC networking logic).
- Include a difficulty-scaling AI opponent (Easy/Medium/Hard/Expert, and automatically 
  scaling per league in Championship mode) that aims and flicks its own pieces with 
  increasing accuracy/strategy at higher difficulty/league levels.

Deliver fully working, styled, and animated code — not placeholders or "TODO" comments 
for any of the systems above. Match the visual style (dark navy UI backgrounds, glowing 
blue/gold accents, bold bordered buttons, star/trophy iconography) shown in the reference 
screenshots as closely as possible.

Categories and tags

Version 1.3 · updated 2026-09-16

Report a problem