Skip to content

Instantly share code, notes, and snippets.

@Shadowking1235

Shadowking1235/index.html

Created May 2, 2019 13:33
Show Gist options
  • Save Shadowking1235/1ab5f4de64e4eca55c1c875eeaa93af0 to your computer and use it in GitHub Desktop.
Save Shadowking1235/1ab5f4de64e4eca55c1c875eeaa93af0 to your computer and use it in GitHub Desktop.
Download ZIP
Tic Tac Game
Raw
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>
Raw
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);
Raw
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;
}
@Shadowking1235
Copy link
Author

Tic-Tac-Toe game written in HTML,CSS and JS.
hope its beneficial to you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment