TicTacToe - 20200419 (Derek Romero)

readme.md

TicTacToe - 20200419 (Derek Romero)

Made with ♥ by Polyglot.

Project Specification

• Turing Frontend: Tic Tac Toe Specification

• FE Mod 1 - Final project demo

• Turing JavaScript Style Guide

Project Links

• dereklromero13/Tic-Tac-Toe-Solo-project
• index.html
• index.html raw
• index.html preview

Game Board

Winning Combinations Sketch

Winning Combinations Array

const winningCombinations = [
  [0,1,2],
  [3,4,5],
  [6,7,8],
  [0,4,8],
  [2,4,6],
  [0,3,6],
  [1,4,7],
  [2,5,8]
]

Example Moves

Player0 wins on the 6th overall play.

moves array

const Player0 = { id: 0 }
const Player1 = { id: 1 }
const moves = [
    { player: Player0, space: 4 },
    { player: Player1, space: 8 },
    { player: Player0, space: 0 },
    { player: Player1, space: 6 },
    { player: Player0, space: 7 },
    { player: Player1, space: 2 },
    { player: Player0, space: 1 },
]

Find Winning Combination Given Array of Plays

const findWinningCombination = (plays) => {
  return winningCombinations.find((combination) => combination.every((combo) => plays.includes(combo)))
}

Get list of plays for Player0 from moves array

moves.filter((move) => move.player.id === 0).map((move) => move.space)
// [ 4, 0, 7, 1 ]

Check for Winning Combination

const winningCombinations = [
  [0,1,2],
  [3,4,5],
  [6,7,8],
  [0,4,8],
  [2,4,6],
  [0,3,6],
  [1,4,7],
  [2,5,8]
]

const plays = [ 4, 0, 7, 1 ]

findWinningCombination(plays)
// [ 1, 4, 7 ]
// These are the cells that should be highlighted in the game as the winning combination.

Turn State

Keeping track of whose turn it is in a two player games is pretty simple

const nextTurn = (currentTurn) => Number(!currentTurn)

nextTurn(0)
// 1

API Reference

Global Objects

• Number

Logical Operators

• Logical NOT (!)

Array Methods

• Array.prototype.includes()
• Array.prototype.find()
• Array.prototype.every()