HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SkyCodingLab</title>
<link rel="stylesheet" href="style.css">
<script src="./index.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
</head>
<body>
<main class="back_ground">
<section class="title">
<h1>Tic Tac Game</h1>
</section>
<section class="display">
[ Player <span class="display-player playerX"></span>'s Mode]
</section>
<section class="Containt">
<div class="title1"></div>
<div class="title1"></div>
<div class="title1"></div>
<div class="title1"></div>
<div class="title1"></div>
<div class="title1"></div>
<div class="title1"></div>
<div class="title1"></div>
<div class="title1"></div>
</section>
<section class="display announcer hide"></section>
<section class="contorler">
<button id="reset"> Reset Game</button>
</section>
</main>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: 'Itim', cursive;
}
.back_ground{
background-image: linear-gradient(to left, #002661, #65ffa5, #002661);
height: 100vh;
padding-top: 1px;
}
.title{
color: white;
text-align: center;
font-size: 40px;
margin-top: 5%;
}
.display{
color: white;
font-size: 25px;
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
.hide{
display: none;
}
.Containt{
margin: 0 auto;
display: grid;
grid-template-columns: 33% 33% 33%;
grid-template-rows:33% 33% 33% ;
max-width: 300px;
}
.title1{
border: 1px solid white;
min-width: 100px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
cursor: pointer;
}
.playerX{
color: #002661;
}
.playerO{
color: deeppink;
}
.contorler{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 1em;
}
.contorler button{
color: white;
padding: 8px;
border-radius:8px ;
border: none;
font-size: 20px;
margin-left: 1em;
cursor: pointer;
}
.restart{
background-color: #498AFB;
}
#reset{
background-color: #ff3860;
}
JAVASCRIPT
window.addEventListener('DOMContentLoaded', () => {
const tiles = Array.from(document.querySelectorAll('.title1'));
const playerDisplay = document.querySelector('.display-player');
const resetButton = document.querySelector('#reset');
const announcer = document.querySelector('.announcer');
let board = ['', '', '' , '', '', '', '', '', ''];
let currentPlayer = 'X';
let isGameActive = true;
const PLAYERX_WON = 'PLAYERX_WON';
const PLAYERO_WON = 'PLAYERO_WON';
const TIE = 'TIE';
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 handleResultValidation(){
let roundWon = false;
for (let i = 0; i <= 7; i++) {
const winConditions = winningConditions[i];
const a = board[winConditions[0]];
const b = board[winConditions[1]];
const c = board[winConditions[2]];
if (a === '' || b === '' || c === ''){
continue;
}
if (a === b && b === c){
roundWon = true;
break;
}
}
if(roundWon){
announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON);
isGameActive = false;
return;
}
if (!board.includes(''))
announce(TIE);
}
const announce = (type) => {
switch(type){
case PLAYERO_WON:
announcer.innerHTML = '[ Player <span class="playerO">O</span> Winner]';
break;
case PLAYERX_WON:
announcer.innerHTML = '[ Player <span class="playerX">X</span> Winner]';
break;
case TIE:
announcer.innerHTML = 'Tie';
}
announcer.classList.remove('hide');
};
const isValidAction = (title1) => {
if (title1.innerHTML === 'X' || title1.innerHTML === 'O'){
return false;
}
return true;
};
//update board//
const updateBoard = (index) =>{
board[index] = currentPlayer;
}
// change Player
const changePlayer = () => {
playerDisplay.classList.remove('player${currentPlayer}');
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
playerDisplay.innerText = currentPlayer;
playerDisplay.classList.add('player${currentPlayer}');
}
const userAction = (title1, index) =>{
if(isValidAction(title1) && isGameActive){
title1.innerText = currentPlayer;
title1.classList.add('player${currentPlayer}');
updateBoard(index);
handleResultValidation();
changePlayer();
}
}
const resetBoard = () => {
board = ['', '', '', '', '', '', '', '', ''];
isGameActive = true;
announcer.classList.add('hide');
if (currentPlayer === 'O'){
changePlayer();
}
tiles.forEach(title1 => {
title1.innerText = '';
title1.classList.remove('playerX');
title1.classList.remove('playerO');
});
}
tiles.forEach( (title1, index) => {
title1.addEventListener('click', () => userAction(title1, index));
});
resetButton.addEventListener('click', resetBoard);
});
Comments
Post a Comment