YoVDO

Manage Complex Tic Tac Toe Game State in React

Offered By: egghead.io

Tags

React Courses Web Development Courses Game Development Courses CSS Grid Courses

Course Description

Overview

Tic Tac Toe is a classic game that has a relatively simple win condition. Get three of your pieces to line up in a row on a 3x3 grid-style board and you win, and also prevent your opponent from doing so.
This makes the game a great challenge to represent as code.
In this course, you will start with a blank create-react-app application, learn how to build a 3x3 grid (with CSS Grid), and power that grid so that you can take turns with another person and play tic tac toe.
You'll model the game state as a multidimensional array where you will manage and update that state with useReducer.
This course shows you a solid pattern for managing complex state while you build a fun project. Emotion has been updated to work with v11.

Syllabus

  • Create a 2-Dimensional Grid for our Tic-Tac-Toe Game
  • Map Over a 2-Dimensional Array to Create a Game Grid in React with CSS Grid
  • Convert a 3x3 Tic-Tac-Toe Grid Interactive by Adding Buttons in React
  • Handle User Input by Adding State to the Tic-Tac-Toe Grid with React useReducer
  • Reset React State with a Button and Function in our Tic-Tac-Toe Game
  • Check for Winning Conditions in React useReducer for Tic-Tac-Toe
  • Prevent Impossible States and Check for Draw Conditions with Guard Statements in React

Taught by

Kyle Shevlin

Related Courses

Creative Programming for Digital Media & Mobile Apps
University of London International Programmes via Coursera
Online Games: Literature, New Media, and Narrative
Vanderbilt University via Coursera
Game Design Concepts
Canvas Network
General Game Playing
Stanford University via Coursera
Program Arcade Games - Learn Computer Science
Independent