--bg:#0b1220; --card:#101a2b; --text:#e8eefc; --muted:#9fb0d0; --accent:#4da3ff; --line: rgba(255,255,255,.14); --board:#d9b88c; --board2:#cfae80; --shadow: 0 10px 30px rgba(0,0,0,.35); } *{box-sizing:border-box} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: radial-gradient(1200px 800px at 20% 0%, #182a52 0%, var(--bg) 55%, #070b14 100%); color: var(--text); display:flex; justify-content:center; padding: 14px; } .wrap{width:min(980px, 100%); display:grid; gap:12px;} .top{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.10); border-radius:16px; padding: 12px 14px; box-shadow: var(--shadow); display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap; } .title{ display:flex; flex-direction:column; gap:2px; min-width: 260px; } .title h1{ margin:0; font-size:18px; letter-spacing:.2px; display:flex; align-items:center; gap:8px; } .badge{ font-size:12px; padding:2px 8px; border-radius:999px; background: rgba(77,163,255,.14); border:1px solid rgba(77,163,255,.35); color: #cfe6ff; } .subtitle{ margin:0; color: var(--muted); font-size:12px; } .controls{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; } .btn{ cursor:pointer; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: var(--text); padding: 8px 10px; border-radius:12px; font-size:14px; transition: transform .06s ease, background .2s ease, border-color .2s ease; user-select:none; } .btn:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); } .btn:active{ transform: translateY(1px); } .btn.primary{ background: rgba(77,163,255,.18); border-color: rgba(77,163,255,.45); } .btn.primary:hover{ background: rgba(77,163,255,.24); border-color: rgba(77,163,255,.60); } .select{ display:flex; align-items:center; gap:8px; padding: 7px 10px; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-size:14px; color: var(--text); } select{ background: transparent; border:none; color: var(--text); outline:none; font-size:14px; cursor:pointer; } /* === Layout: board + rules side-by-side on desktop === */ .main{ display:grid; grid-template-columns: 1fr 320px; /* rules on the right */ gap:12px; align-items:start; } @media (max-width: 860px){ .main{ grid-template-columns: 1fr; } } .card{ background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.10); border-radius:18px; padding: 12px; box-shadow: var(--shadow); } .boardCard{ display:grid; gap: 10px; justify-items:center; padding: 12px; } .status{ width: min(720px, 100%); display:flex; justify-content:space-between; gap:10px; color: var(--muted); font-size:13px; flex-wrap:wrap; } .status strong{ color: var(--text); font-weight:600; } .hint{ color: var(--muted); font-size:12px; } canvas{ width: min(720px, 100%); height: auto; border-radius: 16px; background: linear-gradient(135deg, var(--board), var(--board2)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 12px 28px rgba(0,0,0,.35); touch-action: manipulation; display:block; } .footerNote{ text-align:center; color: rgba(255,255,255,.55); font-size:12px; margin-top:2px; } .rulesCard h2{ margin: 2px 0 8px 0; font-size:16px; letter-spacing:.2px; display:flex; align-items:center; gap:8px; } .rulesCard p{ margin: 6px 0; color: var(--muted); font-size:13px; line-height:1.45; } .rulesCard ul{ margin: 8px 0 0 18px; padding:0; color: var(--muted); font-size:13px; line-height:1.55; } .rulesCard li{ margin: 6px 0; } .kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: 12px; padding: 2px 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: var(--text); white-space:nowrap; } .divider{ height:1px; background: rgba(255,255,255,.10); margin: 10px 0; } .miniNote{ font-size:12px; color: rgba(255,255,255,.55); margin-top: 10px; }
Gomoku
TopAIGames

Gomoku Human vs Computer

You play Black and go first. Click the board intersections to place a stone.

Difficulty
Status: Your turn (Black)
Tip: computer moves with a short delay so you can see it.
Win by getting 5 stones in a row (horizontal / vertical / diagonal).

📘 Rules

Goal: Be the first player to make five of your stones in a row.

  • Players: You are Black, computer is White.
  • Turns: Black moves first. Players alternate turns.
  • Move: Place a stone on an empty intersection (where lines cross).
  • Win: 5-in-a-row in any direction: horizontal, vertical, or diagonal.
  • Draw: If the board is full and nobody has 5-in-a-row.

🕹️ How to Play

  • Click near an intersection to place your stone.
  • Use Undo (2 moves) to take back your last move and the computer’s last move.
  • Use Restart to start over.
  • Change Difficulty for a simpler or stronger AI.
Note: This version uses “freestyle” Gomoku rules (no forbidden moves for Black).