Group Tic Tac Toe

group-tic-tac-toe.markdown

Group Tic Tac Toe

A Pen by Greg Nicotera on CodePen.

License.

index.html

		<h2 id="playerOne" class="activePlayer">Player 1</h2>
		<h2 id="playerTwo">Player 2</h2>
		<div class="board" id="bored">

		<div id="row1">
			<div class="boxes" id=0>0</div>
			<div class="boxes" id=1>1</div>
			<div class="boxes" id=2>2</div>
		</div>
		<div id="row2">
			<div class="boxes" id=3>3</div>
			<div class="boxes" id=4>4</div>
			<div class="boxes" id=5>5</div>
		</div>
		<div id="row3">
			<div class="boxes" id=6>6</div>
			<div class="boxes" id=7>7</div>
			<div class="boxes" id=8>8</div>
		</div>
		<div>

script.js

let board = document.getElementById('bored')
let playerOne = document.getElementById('playerOne')
let playerTwo = document.getElementById('playerTwo')

// let game = ['blank', 'blank', 'blank', 'blank', 'blank', 'blank','blank', 'blank', 'blank']
let game = ["", "", "", "", "", "", "", "", ""];
let turnCounter = 0;
const winningConditions = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

function checkWin() {
  let roundWon = false;
  for(let i = 0; i <= 7; i++){
    const winCondition = winningConditions[i];
    let a = game[winCondition[0]];
    let b = game[winCondition[1]];
    let c = game[winCondition[2]];
    if (a === '' || b === '' || c === '') {
            continue;
    }
     if (a === b && b === c) {
            roundWon = true;
            console.log(`Player ${a} wins!`)
            break
    }
    
    if(turnCounter == 9){
      console.log('Game Tied!')
    }
  }
  
    // if(game[0] === 'X' && game[1] === 'X' && game[2] === 'X' ||
    //    game[3] === 'X' && game[4] === 'X' && game[5] === 'X' ||
    //    game[6] === 'X' && game[7] === 'X' && game[8] === 'X' ||
    //    game[0] === 'X' && game[3] === 'X' && game[6] === 'X' ||
    //    game[1] === 'X' && game[4] === 'X' && game[7] === 'X' ||
    //    game[2] === 'X' && game[5] === 'X' && game[8] === 'X' ||
    //    game[0] === 'X' && game[4] === 'X' && game[8] === 'X' ||
    //    game[2] === 'X' && game[4] === 'X' && game[6] === 'X' 
    // ) {
    //     console.log('Player One wins')
    // }
}


board.addEventListener('click', e => {
     turnCounter++;
    let addClass = document.getElementById(`${e.target.id}`)
console.log(Number(e.target.id))


    if(playerOne.classList.contains('activePlayer')){
        if(addClass.classList.contains('used')){
            console.log('Block has already been chosen, please choose another')
        } else {
            addClass.classList.add('clickX')
            addClass.classList.add('used')
            playerOne.classList.remove('activePlayer')
            playerTwo.classList.add('activePlayer')
            game[e.target.id] = 'X'
            checkWin()
        }
    } else if(playerTwo.classList.contains('activePlayer')){
        if(addClass.classList.contains('used')){
            console.log('Block has already been chosen, please choose another')
        } else {
            addClass.classList.add('clickO')
            addClass.classList.add('used')
            playerTwo.classList.remove('activePlayer')
            playerOne.classList.add('activePlayer')
            game[e.target.id] = 'O'
            checkWin()
        }
    }

    console.log(game)
})

style.css

.board {
     border: solid 1px black;
     height: 800px;
     width: 800px;
     margin: 10px auto;
}

#row1, #row2, #row3 {
     display: flex;
     width: 100%;
     height: 33%;
     gap: 3px;
     margin-top: 2px;
     margin-left: 1px;
}

.boxes {
     border: solid 1px black;
     width: 33%;
     height: 100%;
     color: gold;
     font-size: 34px;
     text-align: center;
     
}

.clickX {
     background-color: blue;
}

.clickO {
     background-color: red;
}
.used {

}

.activePlayer {
     border: solid red 2px;
}