Hey fella's,
Here I am with a new post.
In this post, I am gonna create a tic tac toe game but with pure html, css and js. Yeah, it's a little waste of time to not use any help from libraries as such, but I love to code.
So, let's make everything on our own.
Umm, actually it's a very easy project. Nothing needs to be created or hyped like a great work. I just wanted to post something after many months, so I am creating this.
Challenges
- Build responsive design 😥
- Code JavaScript on my own 😣
- No awesome components/functions of React 🤨
I guess, I am acting too much.
Let's Begin
I coded for a few minutes and surprisingly, every logic I made worked.
It took me few minutes to make the basic work, changing the content inside the blocks and adding a few conditions.
But I want perfection.😅
Umm, actually I am not good at finalizing things at once...
So, after a few hours,
This is what I made
.png)
.png)
.png)
.png)
How is it? Let me know in the comments.
Now, let me show you the code.
Actually it's very messed up, I am feeling embarrassed to show it. But, in the next post, I'll try to fix up things a little.
Code
// html part
<!DOCTYPE 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>T3 - by Shivesh</title>
</head>
<body>
<div class="container">
<div class="main_game">
<div class="heading">
<h1>Tic Tac Toe</h1>
<h1>Game</h1>
</div>
<div id="playerTurn" class="player_turn">Tap on the grid</div>
<div class="game_container">
<div class="column1">
<div id="box1" class="grid grid-1"></div>
<div id="box2" class="grid grid-2"></div>
<div id="box3" class="grid grid-3"></div>
</div>
<div class="column2">
<div id="box4" class="grid grid-4"></div>
<div id="box5" class="grid grid-5"></div>
<div id="box6" class="grid grid-6"></div>
</div>
<div class="column3">
<div id="box7" class="grid grid-7"></div>
<div id="box8" class="grid grid-8"></div>
<div id="box9" class="grid grid-9"></div>
</div>
</div>
</div>
<div class="fullscreen_msg">
<div id="msg">Game</div>
</div>
</div>
</body>
</html>
<body>
<div class="container">
<div class="main_game">
<div class="heading">
<h1>Tic Tac Toe</h1>
<h1>Game</h1>
</div>
<div id="playerTurn" class="player_turn">Tap on the grid</div>
<div class="game_container">
<div class="column1">
<div id="box1" class="grid grid-1"></div>
<div id="box2" class="grid grid-2"></div>
<div id="box3" class="grid grid-3"></div>
</div>
<div class="column2">
<div id="box4" class="grid grid-4"></div>
<div id="box5" class="grid grid-5"></div>
<div id="box6" class="grid grid-6"></div>
</div>
<div class="column3">
<div id="box7" class="grid grid-7"></div>
<div id="box8" class="grid grid-8"></div>
<div id="box9" class="grid grid-9"></div>
</div>
</div>
</div>
<div class="fullscreen_msg">
<div id="msg">Game</div>
</div>
</div>
</body>
</html>// css part
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Catamaran&family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&display=swap');
:root {
--primary-color: white;
--text-primary: black;
--x-primary: rgb(120, 231, 120);
--o-primary: royalblue;
}
* {
margin: 0%;
padding: 0%;
}
body {
height: 100vh;
}
.container {
height: 100%;
width: 100%;
background: var(--primary-color);
font-family: 'Catamaran', sans-serif;
}
.main_game {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 2rem;
}
.heading {
text-align: center;
font-family: 'Ruslan Display', cursive;
font-size: 3rem;
}
.heading h1:nth-child(1) {
font-size: 2rem;
}
.game_container {
height: 20rem;
width: 20rem;
background: var(--text-primary);
display: flex;
flex-direction: column;
gap: .1rem;
}
.column1,
.column2,
.column3 {
/* background: green; */
gap: .1rem;
display: flex;
height: calc(100% - .2rem / 3);
/* grid-template-columns: auto auto auto; */
}
.grid {
cursor: pointer;
background: var(--primary-color);
width: calc(100% - .2rem / 3);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Handlee', cursive;
font-size: 3.5rem;
}
.fullscreen_msg {
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
font-size: 5rem;
/* display: flex; */
flex-direction: column;
text-align: center;
justify-content: center;
}
.player_turn {
font-size: 1.3rem;
}
@media (max-width: 400px) {
.heading {
font-size: 2rem;
}
.game_container {
width: 15rem;
height: 15rem;
}
}//JS part
playerTurn = 1
document.getElementById("box1").textContent = ""
document.getElementById("box2").textContent = ""
document.getElementById("box3").textContent = ""
document.getElementById("box4").textContent = ""
document.getElementById("box5").textContent = ""
document.getElementById("box6").textContent = ""
document.getElementById("box7").textContent = ""
document.getElementById("box8").textContent = ""
document.getElementById("box9").textContent = ""
const changeBoxElem = (elem) => {
document.getElementById(elem).addEventListener('click', () => {
if (document.getElementById(elem).textContent != players[0] && document.getElementById(elem).textContent != players[1]) {
if (playerTurn === 1) {
document.querySelector(".container").style.background = "var(--o-primary)"
document.getElementById(elem).textContent = players[1]
playerTurn = 2
document.getElementById("playerTurn").textContent = `${players[0]}'s turn`
} else if (playerTurn === 2) {
document.querySelector(".container").style.background = "var(--x-primary)"
document.getElementById(elem).textContent = players[0]
playerTurn = 1
document.getElementById("playerTurn").textContent = `${players[1]}'s turn`
}
}
})
}
list = ["box1", "box2", "box3", "box4", "box5", "box6", "box7", "box8", "box9"]
players = ["O", "X"]
winCombinations = [["box1", "box2", "box3"],
["box4", "box5", "box6"],
["box7", "box8", "box9"],
["box1", "box5", "box9"],
["box3", "box5", "box7"],
["box1", "box4", "box7"],
["box2", "box5", "box8"],
["box3", "box6", "box9"]
]
list.forEach(element => {
changeBoxElem(element)
});
let gameOver = false
function gameIsOver() {
console.log("game over")
document.querySelector(".main_game").style.filter = "blur(5px)"
document.querySelector(".fullscreen_msg").style.display = "flex"
document.querySelector(".container").style.background = "lightgreen"
document.getElementById("msg").textContent = `${wonPlayer} won`
}
function checkGameState() {
// console.log("hey")
for (let i = 0; i < winCombinations.length; i++) {
if (document.getElementById(winCombinations[i][0]).textContent === players[0]) {
if (document.getElementById(winCombinations[i][1]).textContent === players[0]) {
if (document.getElementById(winCombinations[i][2]).textContent === players[0]) {
// console.log("hey")
let gameOver = true
wonPlayer = players[0]
gameIsOver()
}
}
}
else if (document.getElementById(winCombinations[i][0]).textContent === players[1]) {
if (document.getElementById(winCombinations[i][1]).textContent === players[1]) {
if (document.getElementById(winCombinations[i][2]).textContent === players[1]) {
let gameOver = true
wonPlayer = players[1]
gameIsOver()
}
}
}
else {
gameOver = false
}
}
}
So, that's it for this post.
I will try to make this code better in the next one.
Till then bye bye, see ya
Posts
