Play the Game

🔴 Red's turn

🔴 Red: 12⚫ Black: 12

Move Jump (capture)

How to Play

1 / 6

1 — Moving a Piece

SelectedMove here

Click a red piece to select it (it turns yellow). Two squares light up yellow — those are valid moves. Click a yellow square to move there. Red pieces move diagonally forward (toward the top).

Your Assignment

♟️ Mission: Build "Checkers Duel" (2 players, turn-based)

Your job: build a turn-based checkers game two people can play on the same screen — then add the bonus.

The plan: build the whole normal game in one go, deploy it, then TEST IT on the live site and FIX what's broken.

💡 Reminder: any time you don't understand something, ask Claude right inside Claude Code to explain it in easy language or to give you step-by-step instructions. You don't have to copy these examples word for word — say it in your own words.

Tools, in order: GitHub → Claude (to plan) → Claude Code (to build) → Vercel (to put it online).

🎮 What you're building

Normal Checkers (build it, then make it pass every mark):

8×8 board, dark squares only, 12 pieces each side, two colors.
Click your piece, then click a square to move it (diagonal, one step).
Jump over an opponent's piece to capture it.
Reach the far row → your piece becomes a King (can move both directions).
Turns switch, the game shows whose turn it is, and shows the winner.
A Play Again button resets everything.

🏆 BONUS STEP — Reverse Mode ("Lose to Win"):

A button that flips the goal: the first player to lose ALL their pieces wins.
⚠️ In this mode capturing must be forced (you must jump if you can), or it breaks.

Step 1 — Make a GitHub repo

github.com → New repository → name it checkers-duel → empty → Create repository.

🔔 Before you plan: the Reverse Mode bonus is for LATER. Plan and build the normal game first and keep the bonus separate. You only add it after normal mode works.

Step 2 — Plan it with Claude (Opus)

claude.ai → new chat → choose Opus → ask it to make you a master plan you can hand to Claude Code.
Tell it the rules so the plan comes out right: 2-player turn-based checkers, only HTML/CSS/JavaScript, no database or login, build the whole normal game in one go (not in phases), and put Reverse Mode as a separate bonus section at the end that you'll add later.
👉 Example: "Make me one master plan in a markdown file to give to Claude Code, for a 2-player turn-based checkers game. Use only HTML, CSS, and JavaScript — no database, no login. Plan the whole normal game in one go, and put a separate 'Bonus: Reverse Mode' section at the end that I'll add later. Explain it in easy language. Don't write the code yet, just the plan."
Save what it gives you as PLAN.md.

Step 3 — Open Claude Code & pick the repo

Open Claude Code in the browser.
🚨 FIRST pick the repo: checkers-duel. Do this before anything else.

Step 4 — Attach the plan

Press ➕ and add PLAN.md.

Step 5 — Build the whole normal game (one shot)

Tell Claude Code to read the plan and build the whole normal game at once (skip the bonus for now).
👉 Example: "Read the plan I attached and build the whole normal checkers game in one go. Skip the bonus part. Explain what you did in easy language, then commit and push it to GitHub."

Step 6 — Deploy to Vercel right away

🚨 You MUST ask Claude for the right project settings first — before you click anything in Vercel.
👉 Example: "I'm deploying a plain HTML/CSS/JavaScript checkers game to Vercel. There's no build step. What project settings should I pick? Explain it step by step in easy language."
Then: vercel.com → Add New → Project → Import checkers-duel → use the settings Claude gave you → Deploy.

Step 7 — Test on the LIVE site & fix

Open your live Vercel URL and play it. Check it against your Marks Checklist.
Something broken? Tell Claude Code what you expected, what actually happened, and paste any red error from the Console. Ask it to explain in easy language.
👉 Example: "On the live site, when I click a piece nothing lights up. I expected the squares I can move to to highlight. Here's the red error: [paste it]. What's wrong and how do I fix it? Explain in easy language."
After a fix, push it — Vercel updates the live site automatically, so refresh and test again.
Repeat until it passes every mark. Then play a full game with Dad. 🎉

Step 8 — 🏆 BONUS: add Reverse Mode

🧠 Turn on Plan Mode in Claude Code FIRST (usually Shift+Tab), so Claude plans the change before it edits anything. Read its plan, then let it build.
👉 Example: "Use Plan Mode first. I want to add a Reverse Mode: a button that switches modes, where the first player to lose all their pieces wins, and capturing is forced. Don't break normal mode. Show me the plan in easy language before you build it."
Build it, test it on the live site the same way, and push when it works.

📎 Your other sheet

Marks Checklist — what counts as "done."