• 

The Art of Competition: Building LeBron vs MJ Tic-Tac-Toe

Inspiration: Where Legends Collide

We all heard it before. From barbershops to locker rooms to car rides, we hear the same question: "Who the GOAT? Lebron or MJ?". Passion erupts from this simple dilemma and I plan on channeling that into one of the most classic games.

LeBron James and Michael Jordan represent more than just dominating excellence.

They embody different philosophies of greatness, different approaches to competition, and different generations.

The idea of pitting them against each other in tic-tac-toe a game so fundamental it's practically encoded in our collective DNA.

There's something beautifully ironic about reducing these complex, larger-than-life athletes to X's and O's on a 3×3 grid. It's a mathematical equalizer where the probability of winning follows the binomial distribution:

$$P(X = k) = \binom{n}{k} p^k (1-p)^{n-k}$$

where $n$ represents the total number of moves, $k$ the number of winning moves, and $p$ the strategic skill level of each player.

The Build: From Concept to Code

Architectural Foundation

The project began with a clear architectural vision: a modern, responsive web application that would feel both nostalgic and contemporary. The tech stack was deliberately streamlined yet powerful:

• HTML5: For semantic structure and accessibility
• CSS3: With modern features like Grid Layout, Flexbox, and CSS custom properties
• Vanilla JavaScript: For game logic and interactivity
• CSS Grid: The perfect mathematical solution for our 3×3 game board where each cell follows the equation:

$$\text{cell}_{i,j} = \begin{cases} \text{LeBron} & \text{if } (i,j) \in L \ \text{MJ} & \text{if } (i,j) \in M \ \emptyset & \text{otherwise} \end{cases}$$

Design Philosophy

The visual design needed to capture the essence of both players:

• LeBron's aesthetic: Golden gradients representing royalty, modern dominance, and the "King" moniker
• MJ's aesthetic: Crimson tones echoing the Chicago Bulls, competitive fire, and legendary intensity

Game Theory Foundations

The tic-tac-toe game board can be represented as a 3×3 matrix where each cell $c_{i,j}$ belongs to the set ${L, M, \emptyset}$:

$$\mathbf{B} = \begin{pmatrix} c_{1,1} & c_{1,2} & c_{1,3} \ c_{2,1} & c_{2,2} & c_{2,3} \ c_{3,1} & c_{3,2} & c_{3,3} \end{pmatrix}$$

The win condition detection algorithm evaluates all possible winning combinations $\mathcal{W}$:

$$\mathcal{W} = {(1,2,3), (4,5,6), (7,8,9), (1,4,7), (2,5,8), (3,6,9), (1,5,9), (3,5,7)}$$

For any winning combination $w \in \mathcal{W}$, the victory condition is:

$$V(w) = \bigwedge_{i=1}^{3} \left( c_{w_i} = P \right)$$

where $P \in {L, M}$ represents the player.

Minimax Algorithm Implementation

The game logic employs a minimax algorithm with alpha-beta pruning to evaluate optimal moves. The utility function $U(s)$ for game state $s$ is defined as:

$$U(s) = \begin{cases} +\infty & \text{if LeBron wins} \ -\infty & \text{if MJ wins} \ 0 & \text{if tie} \end{cases}$$

The minimax decision rule follows:

$$\text{minimax}(s) = \begin{cases} \max_{a \in A(s)} \text{minimax}(\text{result}(s,a)) & \text{if Player}(s) = \text{LeBron} \ \min_{a \in A(s)} \text{minimax}(\text{result}(s,a)) & \text{if Player}(s) = \text{MJ} \end{cases}$$

With alpha-beta pruning optimization:

$$\alpha = \max(\alpha, \text{minimax}(\text{child}, \alpha, \beta))$$ $$\beta = \min(\beta, \text{minimax}(\text{child}, \alpha, \beta))$$

Design Mathematics

The visual design follows the golden ratio $\phi = \frac{1+\sqrt{5}}{2} \approx 1.618$ for aesthetic harmony:

• Cell dimensions: $120px \times 120px$ where $120 = \frac{200}{\phi}$
• Grid gap: $8px$ following the Fibonacci sequence
• Border radius: $15px$ where $15 = \frac{24}{\phi}$

The total game board area calculation:

$$A_{\text{total}} = 3 \times 120 \times 120 + 2 \times 8 \times 120 + 8 \times 8 = 43,264 \text{ px}^2$$

What I Learned: Beyond the Code

Technical Mastery

This project reinforced several fundamental web development concepts:

1. CSS Grid Layout: The power of grid-template-columns: repeat(3, 1fr) for creating perfect symmetrical layouts
2. Flexbox Alignment: Understanding the nuances of justify-content vs align-items and their impact on visual hierarchy
3. Responsive Design: How mathematical precision in spacing and sizing creates consistent experiences across devices
4. State Management: The importance of clean, predictable state transitions in game logic

Mathematical Beauty in Design

I discovered that great web design has mathematical underpinnings. The spacing between elements, the golden ratio in visual composition, and the symmetry of the grid all follow mathematical principles that our brains find inherently pleasing.

The probability calculations for game outcomes became fascinating: $$P(\text{LeBron wins}) + P(\text{MJ wins}) + P(\text{Tie}) = 1$$

Where each probability depends on the skill level and strategic thinking of the players—a beautiful metaphor for real-life competition.

The Psychology of Competition

Perhaps the most profound insight was understanding how this simple game mirrors real competition. The tension between LeBron and MJ fans, the strategic thinking required, and the emotional investment in such a simple format revealed something deep about human nature.

Challenges Faced: The Struggle for Perfection

Technical Hurdles

1. Grid Layout Issues: The most persistent challenge was getting the 3×3 grid to display correctly. Initially, the cells rendered as a 1×9 row due to improper HTML nesting. This required understanding that CSS Grid only applies to direct children, leading to the structural fix:

   <!-- Before (broken) -->
   <div class="game-board">
     <div> <!-- Extra wrapper broke grid -->
       <div class="cell"></div>
       <!-- ... -->
     </div>
   </div>

   <!-- After (fixed) -->
   <div class="game-board">
     <div class="cell"></div>
     <!-- ... -->
   </div>

Built With

• css
• html
• javascript
• passion