Shadowking1235/index.html

## index.html
<!doctype html>
<html lang="en">
  <head>
    <title>Tic-Tac-Toe Game</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- CSS file -->
    <link rel="stylesheet" href="app.css">
   </head>
  <body>
    <h1>
      <span id="colorDisplay">tic-tac-toe</span>
      <br>
      Game
    </h1>
    <div id="stripe">
      <button id="reset">New Game</button>
    </div>
    <div id="container">
        <div id=0 class="square">1</div>
        <div id=1 class="square">2</div>
        <div id=2 class="square">3</div>
        <div id=3 class="square">4</div>
        <div id=4 class="square">5</div>
        <div id=5 class="square">6</div>
        <div id=6 class="square">7</div>
        <div id=7 class="square">8</div>
        <div id=8 class="square">9</div>
    </div>
    <!-- JavaScript File -->
    <script src="app.js"></script>
  </body>
</html>

## script.js
//global
const boardContainer = document.getElementById("container");
const cells = boardContainer.querySelectorAll(".square");
const resetButton = document.getElementById("reset");
const winPattern =
 [
    // rows
    [0,1,2],
    [3,4,5],
    [6,7,8],
    // cols
    [0,3,6],
    [1,4,7],
    [2,5,8],
    // diag
    [0,4,8],
    [2,4,6]
];
//0 means playerOne and 1 means playerTwo
let activePlayer = 0;
//2 means not played
//place on the tic-tac-toe board
let gameState = [2,2,2,2,2,2,2,2,2];
//will change to false if player has won
let gameIsActive = true;


//Function exp to reset the game
const resetAll = () => {
    //reset the tic-tac-toe board place as 2
    gameState = [2,2,2,2,2,2,2,2,2];
    //set the default start player as 0
    activePlayer = 0;
    //set game is active true
    gameIsActive = true;
    //reset all the cells of the tic-tac-toe board as default
    for(const prop of cells) {
        prop.style.pointerEvents = "auto";
        prop.style.color = "rgba(255, 255, 255, 0)";
        prop.classList.remove("playerOne")
        prop.classList.remove("playerTwo");
    }
}

//Function exp to display the dialog window to show the game end stats
const displayWinner = (n)=> {
    //set delay for animation to complete
    setTimeout(()=> {
        //check n value 0 for X, 1 for O, or cats game
        if(n === 0) {
            alert("X has won!");
        } else if(n === 1) {
            alert("O has won!");
        } else{
            alert("Cats game!");
        }
        //once game ends reset the progress
        resetAll();
    }, 400);
}

//Function exp to switch between X and O player, X start as first by default
const playerSet = (p)=>
{
    //checks position on the board not played and game is active
    if(gameState[p] === 2 && gameIsActive){
        //0 for X
        if(activePlayer === 0){
            //set the position played on the board as 0, 'X'
            gameState[p] = 0;
            //change the active player to 1, '0'
            activePlayer = 1;
        } else {
            //set the position played on the board as 1, 'O'
            gameState[p] = 1;
            //change the active player to 0, 'X'
            activePlayer = 0;
        }
        //check the win condition to get end game result
        checkWinner();
    }
}

//Function exp to get the winner, end game result
const checkWinner = () => {
    //check for game is active or not
    if(gameIsActive){
        //loop to check the winning pattern
        for(let i = 0; i < winPattern.length; i++){
            //check tic-tac-toe played position and compare it with winning patterns
            if(gameState[winPattern[i][0]] === 0
                && gameState[winPattern[i][1]] === 0
                && gameState[winPattern[i][2]] === 0
                && gameState[winPattern[i][0]] !== 2){
                    //if winner found change the game is active to false
                    gameIsActive = false;
                    //show the result
                    displayWinner(0);
                    return;
                }
          else if(gameState[winPattern[i][0]] === 1
                    && gameState[winPattern[i][1]] === 1
                    && gameState[winPattern[i][2]] === 1
                    && gameState[winPattern[i][0]] !== 2){
                        gameIsActive = false;
                        displayWinner(1);
                        return;
                }
            }
    //check for draw or cats game
    if(gameIsActive){
        //assume game over true
        let gameIsOver = true;
        //loop to check the positions on board played
        for(const prop of gameState) {
            //check for not played positions
            if(prop === 2) {
                //set game over false, position still left to play
                gameIsOver = false;
                }
            }
            //check game over true
            if(gameIsOver) {
                //set game active false
                gameIsActive = false;
                //display result, cats game
                displayWinner();
                }
        }
    }
}

//Function exp to setup the cells
const play = (e) => {
    const place = e.target;
    const plays = place.id;
    if(gameIsActive === false){
        return;
    }else {
        if(activePlayer == 0) {
            playerSet(plays);
            place.innerText = "X";
            place.style.color = "rgba(255, 255, 255, 1)";
            place.style.pointerEvents = "none";
            place.classList.add("playerOne");

        }
      else
        {
            playerSet(plays);
            place.innerText = "O";
            place.style.color = "rgba(255, 255, 255, 1)";
            place.style.pointerEvents = "none";
            place.classList.add("playerTwo");
        }
    }
}
//add event event listeners to all the cells
for(const prop of cells) {
        prop.addEventListener("click", play);
}
//add event listener to New Game button to rest the game
resetButton.addEventListener("click", resetAll);


## style.css
body {
    background-color:#FFFAFA;
    margin: 0;
    font-family:"cormorant Garamond", "Times newroman";
}

.square {
    width : 30%;
    background:Royalblue ;
    padding-top: 12%;
    padding-bottom: 12%;
    float: left;
    color: rgba(255, 255, 255, 0);
    margin: 1.66%;
    border-radius: 15%;
    font-size: 32px;
    text-align: center;
    transition: background 0.6s;
    -webkit-transition: background 0.6s;
    -moz-transition: background 0.6s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
     user-select: none;
}

#container {
    max-width: 500px;
    margin: 7px auto;
}

h1 {
    color: deep gray;
    text-align: center;
    background-color: CYAN;
    margin: 0.1;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1;
    padding: 25px 0;
}

#stripe {
    background-color: white;
    height: 30px;
    text-align: center;
}

.selected {
    color: cyan;
    background: green;
}

#colorDisplay {
    font-size: 120%;
}

button{
    border: 50px;
    background: 4;
    text-transform: uppercase;
    height: 100%;
    font-weight: 600;
    color: steelblue;
    font-size: inherit;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition :all 0.3s;
    outline: none;
}

button:hover {
    color: Black;
    background: steelblue;
}

.playerOne {
    background: Magenta;
}

.playerTwo {
    background: Teal;
}

## tic-tac-game.markdown

      
    Raw
  

              tic-tac-game.markdown
            
          
    Tic Tac Game

A Pen by Shadowking1235 on CodePen.
License.
	<!doctype html>
	<html lang="en">
	<head>
	<title>Tic-Tac-Toe Game</title>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- CSS file -->
	<link rel="stylesheet" href="app.css">
	</head>
	<body>
	<h1>
	<span id="colorDisplay">tic-tac-toe</span>
	<br>
	Game
	</h1>
	<div id="stripe">
	<button id="reset">New Game</button>
	</div>
	<div id="container">
	<div id=0 class="square">1</div>
	<div id=1 class="square">2</div>
	<div id=2 class="square">3</div>
	<div id=3 class="square">4</div>
	<div id=4 class="square">5</div>
	<div id=5 class="square">6</div>
	<div id=6 class="square">7</div>
	<div id=7 class="square">8</div>
	<div id=8 class="square">9</div>
	</div>
	<!-- JavaScript File -->
	<script src="app.js"></script>
	</body>
	</html>
	//global
	const boardContainer = document.getElementById("container");
	const cells = boardContainer.querySelectorAll(".square");
	const resetButton = document.getElementById("reset");
	const winPattern =
	[
	// rows
	[0,1,2],
	[3,4,5],
	[6,7,8],
	// cols
	[0,3,6],
	[1,4,7],
	[2,5,8],
	// diag
	[0,4,8],
	[2,4,6]
	];
	//0 means playerOne and 1 means playerTwo
	let activePlayer = 0;
	//2 means not played
	//place on the tic-tac-toe board
	let gameState = [2,2,2,2,2,2,2,2,2];
	//will change to false if player has won
	let gameIsActive = true;


	//Function exp to reset the game
	const resetAll = () => {
	//reset the tic-tac-toe board place as 2
	gameState = [2,2,2,2,2,2,2,2,2];
	//set the default start player as 0
	activePlayer = 0;
	//set game is active true
	gameIsActive = true;
	//reset all the cells of the tic-tac-toe board as default
	for(const prop of cells) {
	prop.style.pointerEvents = "auto";
	prop.style.color = "rgba(255, 255, 255, 0)";
	prop.classList.remove("playerOne")
	prop.classList.remove("playerTwo");
	}
	}

	//Function exp to display the dialog window to show the game end stats
	const displayWinner = (n)=> {
	//set delay for animation to complete
	setTimeout(()=> {
	//check n value 0 for X, 1 for O, or cats game
	if(n === 0) {
	alert("X has won!");
	} else if(n === 1) {
	alert("O has won!");
	} else{
	alert("Cats game!");
	}
	//once game ends reset the progress
	resetAll();
	}, 400);
	}

	//Function exp to switch between X and O player, X start as first by default
	const playerSet = (p)=>
	{
	//checks position on the board not played and game is active
	if(gameState[p] === 2 && gameIsActive){
	//0 for X
	if(activePlayer === 0){
	//set the position played on the board as 0, 'X'
	gameState[p] = 0;
	//change the active player to 1, '0'
	activePlayer = 1;
	} else {
	//set the position played on the board as 1, 'O'
	gameState[p] = 1;
	//change the active player to 0, 'X'
	activePlayer = 0;
	}
	//check the win condition to get end game result
	checkWinner();
	}
	}

	//Function exp to get the winner, end game result
	const checkWinner = () => {
	//check for game is active or not
	if(gameIsActive){
	//loop to check the winning pattern
	for(let i = 0; i < winPattern.length; i++){
	//check tic-tac-toe played position and compare it with winning patterns
	if(gameState[winPattern[i][0]] === 0
	&& gameState[winPattern[i][1]] === 0
	&& gameState[winPattern[i][2]] === 0
	&& gameState[winPattern[i][0]] !== 2){
	//if winner found change the game is active to false
	gameIsActive = false;
	//show the result
	displayWinner(0);
	return;
	}
	else if(gameState[winPattern[i][0]] === 1
	&& gameState[winPattern[i][1]] === 1
	&& gameState[winPattern[i][2]] === 1
	&& gameState[winPattern[i][0]] !== 2){
	gameIsActive = false;
	displayWinner(1);
	return;
	}
	}
	//check for draw or cats game
	if(gameIsActive){
	//assume game over true
	let gameIsOver = true;
	//loop to check the positions on board played
	for(const prop of gameState) {
	//check for not played positions
	if(prop === 2) {
	//set game over false, position still left to play
	gameIsOver = false;
	}
	}
	//check game over true
	if(gameIsOver) {
	//set game active false
	gameIsActive = false;
	//display result, cats game
	displayWinner();
	}
	}
	}
	}

	//Function exp to setup the cells
	const play = (e) => {
	const place = e.target;
	const plays = place.id;
	if(gameIsActive === false){
	return;
	}else {
	if(activePlayer == 0) {
	playerSet(plays);
	place.innerText = "X";
	place.style.color = "rgba(255, 255, 255, 1)";
	place.style.pointerEvents = "none";
	place.classList.add("playerOne");

	}
	else
	{
	playerSet(plays);
	place.innerText = "O";
	place.style.color = "rgba(255, 255, 255, 1)";
	place.style.pointerEvents = "none";
	place.classList.add("playerTwo");
	}
	}
	}
	//add event event listeners to all the cells
	for(const prop of cells) {
	prop.addEventListener("click", play);
	}
	//add event listener to New Game button to rest the game
	resetButton.addEventListener("click", resetAll);
	body {
	background-color:#FFFAFA;
	margin: 0;
	font-family:"cormorant Garamond", "Times newroman";
	}

	.square {
	width : 30%;
	background:Royalblue ;
	padding-top: 12%;
	padding-bottom: 12%;
	float: left;
	color: rgba(255, 255, 255, 0);
	margin: 1.66%;
	border-radius: 15%;
	font-size: 32px;
	text-align: center;
	transition: background 0.6s;
	-webkit-transition: background 0.6s;
	-moz-transition: background 0.6s;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}

	#container {
	max-width: 500px;
	margin: 7px auto;
	}

	h1 {
	color: deep gray;
	text-align: center;
	background-color: CYAN;
	margin: 0.1;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 1;
	padding: 25px 0;
	}

	#stripe {
	background-color: white;
	height: 30px;
	text-align: center;
	}

	.selected {
	color: cyan;
	background: green;
	}

	#colorDisplay {
	font-size: 120%;
	}

	button{
	border: 50px;
	background: 4;
	text-transform: uppercase;
	height: 100%;
	font-weight: 600;
	color: steelblue;
	font-size: inherit;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition :all 0.3s;
	outline: none;
	}

	button:hover {
	color: Black;
	background: steelblue;
	}

	.playerOne {
	background: Magenta;
	}

	.playerTwo {
	background: Teal;
	}