Tic Tac Toe Game
Introduction:
Welcome to a captivating coding journey where actions speak louder than words! 🎮 In this exciting video, we dive deep into the world of web development as we craft a dynamic Tic Tac Toe game using HTML, CSS, and JavaScript. And the best part? There's not a single word spoken – just pure coding brilliance! 🔥 🌐 Project Overview Get ready to witness the power of coding as we build a fully functional Tic Tac Toe game from scratch. With HTML providing the structure, CSS adding the style, and JavaScript delivering the interactivity, you'll gain valuable insights into the trifecta of web technologies that make the internet come alive.
🎯 What's Covered ▶️ Setting up the game board using HTML's structure elements. ▶️ Styling the game board with CSS to create an engaging visual experience. ▶️ Implementing JavaScript logic for player interactions and win conditions. ▶️ Applying event listeners to enable seamless gameplay without any hitches. ▶️ Ensuring a responsive design for optimal gameplay on various devices. ▶️ Implementing endgame scenarios and reset functionality. 🤖 Coding Expertise Whether you're a coding novice or a seasoned developer, this video is your opportunity to enhance your coding skills. Follow along as we break down complex concepts into simple, actionable steps, making this coding challenge accessible to everyone.
⏱️ Silent Coding Experience No commentary needed – just watch, learn, and code along! With a focus on concise, efficient coding techniques, this silent coding experience allows you to concentrate on every line of code without distractions. 👍 Like, Comment, and Share If you found this silent coding challenge intriguing and educational, don't forget to hit the thumbs up button, leave a comment sharing your thoughts, and share this video with fellow coding enthusiasts. 🔔 Subscribe for More Don't miss out on future coding adventures and silent coding challenges! Hit the subscribe button, turn on notifications, and join us as we explore the exciting world of coding together. 📢 Connect with Us Got questions, feedback, or ideas for future videos? Connect with us in the comments or through our social media channels. Your input drives our content! Thank you for watching and coding along! 🙌
Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=
Quicksand:wght@500&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=
Fredoka+One&display=swap" rel="stylesheet">
</head>
<body>
<section>
<h1>Tic Tac Toe
</h1>
<div class="game-container">
<div data-cell-index='0' class='cell'></div>
<div data-cell-index='1' class='cell'></div>
<div data-cell-index='2' class='cell'></div>
<div data-cell-index='3' class='cell'></div>
<div data-cell-index='4' class='cell'></div>
<div data-cell-index='5' class='cell'></div>
<div data-cell-index='6' class='cell'></div>
<div data-cell-index='7' class='cell'></div>
<div data-cell-index='8' class='cell'></div>
</div>
<h2 class="game-status"></h2>
<button id="game-restart"><b>Restart Game</b>
</button>
</section>
</body>
<script src="script.js"></script>
</html>
Css Code:
body {
background-image: url("https://i.ibb.co/ChW8Q3N/image.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-family: 'Quicksand', sans-serif;
}
h1 {
font-size: 64px;
margin: 0;
color: white;
text-shadow: 0 0 4px rgb(251, 173, 213);
}
section {
text-align: center
}
.game-container {
font-family: 'Fredoka One', cursive;
text-shadow: 0 0 7px #FFFFFF;
color: #fff;
display: grid;
grid-template-columns: repeat(3, auto);
width: 300px;
grid-column-gap: 5px;
grid-row-gap: 5px;
margin: 30px auto;
}
.cell {
width: 100px;
height: 100px;
box-shadow: 0 0 0 1px #333333;
border: 1px solid #333333;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.33, 1, 0.68, 1);
line-height: 100px;
font-size: 60px;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(251, 173, 213, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
}
button {
background: rgba(255, 255, 255, 0.25);
cursor: pointer;
box-shadow: 0 8px 32px 0 rgba(251, 173, 213, 0.37);
backdrop-filter: blur(4px);
border-radius: 5px;
font-family: 'Quicksand', sans-serif;
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 13px 25px;
text-align: center;
display: inline-block;
font-size: 16px;
color: white;
text-shadow: 0 0 4px rgb(251, 173, 213);
}
.game-status {
color: white;
text-shadow: 0 0 4px rgb(251, 173, 213);
}
.cellwon {
text-shadow: 0 0 6px #8BF4F7;
color: #8BF4F7;
}
Javascript Code:
const statusDisplay = document.querySelector
('.game-status');
let gameActive = true;
let currentPlayer = "X";
let gameState = ['', '', '', '', '', '', '', '', ''];
const winMsg = () => `Player ${currentPlayer}
has won!`;
const drawMsg = () => `It's a Draw!`;
const CurrentPlayerTurn = () =>
`It's ${currentPlayer}'s turn`;
statusDisplay.innerHTML = CurrentPlayerTurn();
function handleCellPlayed() {
}
function handlePlayerChange() {
}
function handleResultValidation() {
}
function handleCellClick() {
}
function handleRestartGame() {
}
document.querySelectorAll('.cell').forEach(cell =>
cell.addEventListener('click', handleCellClick));
document.querySelector('#game-restart').addEventListener
('click', handleRestartGame);
function handleCellClick(clickedCellEvent) {
const clickedCell = clickedCellEvent.target;
const clickedCellIndex = parseInt
(clickedCell.getAttribute('data-cell-index'));
if (gameState[clickedCellIndex] !== "" || !gameActive) {
return;
}
handleCellPlayed(clickedCell, clickedCellIndex);
handleResultValidation();
}
function handleCellPlayed(clickedCell, clickedCellIndex) {
gameState[clickedCellIndex] = currentPlayer;
clickedCell.innerHTML = currentPlayer;
}
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 (i = 0; i <= 7; i++) {
const winCondition = winningConditions[i];
let a = gameState[winCondition[0]];
let b = gameState[winCondition[1]];
let c = gameState[winCondition[2]];
if (a === '' || b === '' || c === '') {
continue;
};
if (a === b && b === c) {
roundWon = true;
console.log(winCondition);
for (j = 0; j <= 2; j++) {
n = parseInt(winCondition[j]);
wonCell = document.getElementsByClassName
('cell')[n].classList.add("cellwon");
}
break;
};
}
if (roundWon) {
statusDisplay.innerHTML = winMsg();
gameActive = false;
return;
}
let roundDraw = !gameState.includes("");
if (roundDraw) {
statusDisplay.innerHTML = drawMsg();
gameActive = false;
return;
}
handlePlayerChange();
}
function handlePlayerChange() {
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusDisplay.innerHTML = CurrentPlayerTurn();
}
function handleRestartGame() {
gameActive = true;
currentPlayer = "X";
gameState = ['', '', '', '', '', '', '', '', ''];
statusDisplay.innerHTML = CurrentPlayerTurn();
document.querySelectorAll('.cell').forEach(cell =>
cell.innerHTML = "");
document.querySelectorAll('.cell').forEach(cell =>
cell.classList.remove("cellwon"));
}
