Skip to main content

Building Tic-Tac-Toe in p5.js

Welcome to the Tic-Tac-Toe tutorial! You're about to create the classic paper-and-pencil game that everyone knows and loves.

What is Tic-Tac-Toe?​

Tic-Tac-Toe (also called Noughts and Crosses) is a simple two-player game where:

  • Players take turns placing X's and O's on a 3×3 grid
  • First player to get 3 in a row (horizontal, vertical, or diagonal) wins
  • If all 9 spaces are filled with no winner, it's a tie

What You'll Build​

By the end of this tutorial, you'll have a fully functional Tic-Tac-Toe game with:

  • ✅ A clean 3×3 game board
  • ✅ Click-to-place X's and O's
  • ✅ Automatic turn switching
  • ✅ Win detection (all 8 possible ways to win)
  • ✅ Tie detection
  • ✅ Visual feedback and animations
  • ✅ Restart functionality

Prerequisites​

What You Need to Know​

Before starting, you should understand:

  • Basic p5.js structure - setup() and draw() functions
  • Variables - Storing and changing values
  • Arrays - Lists of data
  • Mouse input - Detecting clicks
  • Conditionals - Using if statements

If you're new to p5.js, check out the intro tutorial first!

What You'll Learn​

This tutorial will teach you:

  • Grid-based coordinate systems
  • 2D arrays for game boards
  • Click detection with grid snapping
  • Win condition checking algorithms
  • Game state management
  • Visual feedback techniques

Why Tic-Tac-Toe?​

Tic-Tac-Toe is perfect for learning because:

  • Simple rules - Everyone already knows how to play
  • Grid system - Learn about organizing game space
  • Turn-based - Easier than real-time games
  • Win detection - Practice logic and algorithms
  • Quick to build - See results fast!
  • Room to expand - Add AI, animations, themes

Tools You'll Use​

p5.js Web Editor​

We'll use the p5.js Web Editor at https://editor.p5js.org/

Why the Web Editor?

  • No installation required
  • Write and test code instantly
  • Share your game with friends
  • Works on any computer

Just p5.js​

This tutorial uses only p5.js - no extra libraries needed!

Game Breakdown​

Here's how we'll build it:

Getting Started​

  • Overview and introduction
  • Understand what we're building

Step 1: Basic Setup​

  • Create the canvas
  • Set up the 3×3 grid system
  • Initialize the board array

Step 2: Drawing the Board​

  • Draw grid lines
  • Display X's and O's
  • Style the game board

Step 3: Detecting Clicks​

  • Convert mouse position to grid position
  • Place symbols in clicked cells
  • Prevent overwriting occupied cells

Step 4: Turn System​

  • Switch between X and O players
  • Display current player
  • Track game state

Step 5: Win Detection​

  • Check rows for winners
  • Check columns for winners
  • Check diagonals for winners
  • Detect ties

Step 6: Complete Code​

  • Add game over screen
  • Restart functionality
  • Polish and animations
  • Full working code

Expected Time​

  • Total time: 25-35 minutes
  • Each step: 4-6 minutes
  • Take your time and experiment!

Tips Before You Start​

  1. Type the code - Don't just copy/paste. Typing helps you learn!
  2. Test often - Run your code after each section
  3. Experiment - Change colors, sizes, and see what happens
  4. Debug patiently - Errors are normal and help you learn
  5. Have fun - This is about learning through play!

Getting Help​

If you get stuck:

  • Read the error messages carefully
  • Check the Common Elements reference
  • Compare your code to the examples
  • Take a break and come back fresh

Ready to Start?​

Let's build Tic-Tac-Toe! Head to Step 1: Basic Setup to create your game board.

Remember: Every great game developer started with simple games like this. You're building a classic! ⭕❌

Next Step: Step 1 - Basic Setup: Creating the Board