So, you’ve decided to build a Tic-Tac-Toe game using Lightning Web Components (LWC)? Excellent choice! It’s simple enough to grasp, yet rich enough to help you flex some serious LWC muscles. In this article, we’re going to dive into how to properly set up your project for success - no heavy theory, just real-world, actionable steps. Whether you're a Salesforce developer just getting cozy with LWC or a seasoned pro looking for a fun side project, you’ll find something useful here.
Application Roadmap
Before touching a single line of code, it's crucial to map out what we're building. Imagine heading out on a road trip without a map - not exactly smart, right? Similarly, clear planning prevents you from getting lost halfway through your coding journey.
Our Tic-Tac-Toe app will have three major phases for the user:
- Start Screen – The user picks a side (X or O) and starts the game.
- Game Board – The player and the CPU (computer) take turns.
- Game Logic – Handling moves, checking winners, and managing draws.
Now let’s break down the essential components we’ll create:
- ticTacToe
- Main app container. Manages switching between screens
- startScreenComponent
- UI for player to pick a side and start the game
- gameContainer
- Hosts the board and controls game flow
- boardComponent
- Displays a 3x3 grid where moves happen
- cellComponent
- Represents a single cell in the board
- gameLogic.js
- Pure functions to calculate winners and detect draws
- aiService.js
- Basic AI that picks the best move for CPU
Cool? Cool. Now let’s actually set this up properly!
Step 1: Scaffold the Components
It’s way easier to think clearly when the structure is there, even if files are empty at first. Go ahead and scaffold the basic components:
sfdx force:lightning:component:create --type lwc --componentname ticTacToe
sfdx force:lightning:component:create --type lwc --componentname startScreenComponent
sfdx force:lightning:component:create --type lwc --componentname gameContainer
sfdx force:lightning:component:create --type lwc --componentname boardComponent
sfdx force:lightning:component:create --type lwc --componentname cellComponentAnd for our helper JavaScript files:
mkdir force-app/main/default/lwc/gameLogic
touch force-app/main/default/lwc/gameLogic/gameLogic.js
mkdir force-app/main/default/lwc/aiService
touch force-app/main/default/lwc/aiService/aiService.jsOrganization is half the battle. Trust me, Future You will thank you.
Step 2: Build the Entry Point – ticTacToe Component
This is where everything starts. It's basically the traffic cop of the app. It will:
- Display the start screen when the game hasn’t started
- Swap to the game board once the player chooses a side.
- Handle resetting the game when needed
It’s the director of the play, while other components are the actors.
Step 3: Create the Start Screen UI – startScreenComponent
We need a friendly and simple start screen. It will:
- Let users pick "X" or "O" with a click
- Trigger the game start when ready
Think of this screen like the front door to your game. Make it welcoming, but don't overcomplicate it.
Step 4: Create the Game Container
The gameContainer will live between the main app and the game board. Responsibilities:
- Keep the game state (cells, whose turn it is)
- Detect if someone won or if the match is a draw
- Trigger CPU moves when needed
In other words, it’s the game manager. It keeps all the rules and order in place, just like a referee.
Step 5: Build the Board – boardComponent
Here’s where the action happens! The boardComponent:
- Displays a 3x3 grid of clickable cells
- Handles layout logic and styles
- Marks the winning line when someone wins
It doesn’t decide who wins though - that’s for gameLogic.js. The board just shows what’s happening.
Step 6: Create the Cell – cellComponent
Each tiny square on the board is a cellComponent. Each cell:
- Can be empty, an "X", or an "O"
- Highlights if it’s part of the winning combination
- Only accepts clicks if it's currently empty
Fun fact: keeping each cell isolated like this means your game will be way more performant because only cells that change need to re-render.
Step 7: Write Pure Helper Functions
Why pure functions? Because predictable code is bug-free code (well, almost). In gameLogic.js, you’ll have:
calculateWinner(cells)- checks if anyone wonisDraw(cells)- sees if it’s a drawgenerateInitialBoard()- gives you a fresh clean board
No side effects, no weird mutations. Easy to test. Easy to trust.
Step 8: Build a Simple AI
Don’t overthink this - the CPU just needs to feel smart enough. In aiService.js, we’ll:
- Try to win if possible
- Block the opponent if they’re about to win
- Otherwise, pick the first empty spot
It’s like a simple "if this, then that" brain - no need for fancy AI models. Sometimes simple is brilliant.
Step 9: Connect It All Together
Now that you have all parts in place, it’s time to wire everything up:
- From the Start Screen, move into the Game Board.
- Player clicks a cell → Board updates → CPU plays next.
- Winner or Draw detected → Game ends → Option to restart.
Feels like assembling a LEGO set, right? Click pieces into place until you have something magical.
Conclusion
And there you have it - the solid foundation for building a Tic-Tac-Toe game using Lightning Web Components! We planned our structure, created modular components, kept the logic pure, and even added a basic AI to make the CPU feel somewhat smart.
Building games is a fantastic way to learn LWC - it's like hitting the gym but way more fun. Stay tuned, because in the next articles, we’ll dive into coding each component step-by-step, adding state management, and making the game feel smooth and satisfying for players.