A Coding Boy

demo post

only for demo nasa prospect

only for demo the gonnies

most popular

how to create parallax website

how to create a beautiful card

how to create a netflix login page

how to create flipping ui card

how to create image generator website

Tic Tac Toe Game using HTML CSS & JavaScript

Tic tac toe is a multiplayer game and the players of this game have to position their marks(sign) so that they can construct a continuous line of three cells or boxes vertically, horizontally, or diagonally. An opponent can stop a win by blocking the end of the opponent’s line.

In our program or design [Tic Tac Toe Game], at first, on the webpage, there is a selection box with the game title and two buttons which are labeled as “Player(X)” and “Player(O)”. Users must select one option or button to continue the game. If the user selects the X then the bot will be O and if the user selects the O then the bot will be X.

Tic Tac Toe Game in JavaScript [Source Codes]

To create this program [Tic Tac Toe Game]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of this game from the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>

<head>

<title>Tic Tac Toe Game | CodingNepal</title>

</head>

<body>

<div class="title">Select which you want to be?</div>

<button class="playerX">Player (X)</button>

<button class="playerO">Player (O)</button>

</div>

<div class="credit">Created By <a href="https://www.youtube.com/codingnepal" target="_blank">CodingNepal</a></div>

</div>

</div>

</section>

</section>

</section>

</div>

<div class="btn"><button>Replay</button></div>

</div>

</body>

</html>

<!DOCTYPE html>  <html lang="en"> <head> <meta charset="UTF-8"> <title>Tic Tac Toe Game | CodingNepal</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> </head> <body>  <div class="select-box"> <header>Tic Tac Toe</header> <div class="content"> <div class="title">Select which you want to be?</div> <div class="options"> <button class="playerX">Player (X)</button> <button class="playerO">Player (O)</button> </div> <div class="credit">Created By <a href="https://www.youtube.com/codingnepal" target="_blank">CodingNepal</a></div> </div> </div>  <div class="play-board"> <div class="details"> <div class="players"> <span class="Xturn">X's Turn</span> <span class="Oturn">O's Turn</span> <div class="slider"></div> </div> </div> <div class="play-area"> <section> <span class="box1"></span> <span class="box2"></span> <span class="box3"></span> </section> <section> <span class="box4"></span> <span class="box5"></span> <span class="box6"></span> </section> <section> <span class="box7"></span> <span class="box8"></span> <span class="box9"></span> </section> </div> </div>  <div class="result-box"> <div class="won-text"></div> <div class="btn"><button>Replay</button></div> </div> <script src="script.js"></script> </body> </html>

Second, paste the following codes into your style.css file

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Poppins', sans-serif;

}

::selection{

color: #fff;

background:#56baed;

}

body{

background:#56baed;

}

.select-box, .play-board, .result-box{

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

transition: all 0.3s ease;

}

.select-box{

background: #fff;

padding: 20px 25px 25px;

border-radius: 5px;

max-width: 400px;

width: 100%;

}

.select-box.hide{

opacity: 0;

pointer-events: none;

}

.select-box header{

font-size: 30px;

font-weight: 600;

padding-bottom: 10px;

border-bottom: 1px solid lightgrey;

}

.select-box .title{

font-size: 22px;

font-weight: 500;

margin: 20px 0;

}

.select-box .options{

display: flex;

width: 100%;

}

.options button{

width: 100%;

font-size: 20px;

font-weight: 500;

padding: 10px 0;

border: none;

background: #56baed;

border-radius: 5px;

color: #fff;

outline: none;

cursor: pointer;

transition: all 0.3s ease;

}

.options button:hover,

.btn button:hover{

transform: scale(0.96);

}

.options button.playerX{

margin-right: 5px;

}

.options button.playerO{

margin-left: 5px;

}

.select-box .credit{

text-align: center;

margin-top: 20px;

font-size: 18px;

font-weight: 500;

}

.select-box .credit a{

color: #56baed;

text-decoration: none;

}

.select-box .credit a:hover{

text-decoration: underline;

}

.play-board{

opacity: 0;

pointer-events: none;

transform: translate(-50%, -50%) scale(0.9);

}

.play-board.show{

opacity: 1;

pointer-events: auto;

transform: translate(-50%, -50%) scale(1);

}

.play-board .details{

padding: 7px;

border-radius: 5px;

background: #fff;

}

.play-board .players{

width: 100%;

display: flex;

position: relative;

justify-content: space-between;

}

.players span{

position: relative;

z-index: 2;

color: #56baed;

font-size: 20px;

font-weight: 500;

padding: 10px 0;

width: 100%;

text-align: center;

cursor: default;

user-select: none;

transition: all 0.3 ease;

}

.players.active span:first-child{

color: #fff;

}

.players.active span:last-child{

color: #56baed;

}

.players span:first-child{

color: #fff;

}

.players .slider{

position: absolute;

top: 0;

left: 0;

width: 50%;

height: 100%;

background: #56baed;

border-radius: 5px;

transition: all 0.3s ease;

}

.players.active .slider{

left: 50%;

}

.players.active span:first-child{

color: #56baed;

}

.players.active span:nth-child(2){

color: #fff;

}

.players.active .slider{

left: 50%;

}

.play-area{

margin-top: 20px;

}

.play-area section{

display: flex;

margin-bottom: 1px;

}

.play-area section span{

display: block;

height: 90px;

width: 90px;

margin: 2px;

color: #56baed;

font-size: 40px;

line-height: 80px;

text-align: center;

border-radius: 5px;

background: #fff;

}

.result-box{

padding: 25px 20px;

border-radius: 5px;

max-width: 400px;

width: 100%;

opacity: 0;

text-align: center;

background: #fff;

pointer-events: none;

transform: translate(-50%, -50%) scale(0.9);

}

.result-box.show{

opacity: 1;

pointer-events: auto;

transform: translate(-50%, -50%) scale(1);

}

.result-box .won-text{

font-size: 30px;

font-weight: 500;

display: flex;

justify-content: center;

}

.result-box .won-text p{

font-weight: 600;

margin: 0 5px;

}

.result-box .btn{

width: 100%;

margin-top: 25px;

display: flex;

justify-content: center;

}

.btn button{

font-size: 18px;

font-weight: 500;

padding: 8px 20px;

border: none;

background: #56baed;

border-radius: 5px;

color: #fff;

outline: none;

cursor: pointer;

transition: all 0.3s ease;

}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } ::selection{ color: #fff; background:#56baed; } body{ background:#56baed; } .select-box, .play-board, .result-box{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.3s ease; } .select-box{ background: #fff; padding: 20px 25px 25px; border-radius: 5px; max-width: 400px; width: 100%; } .select-box.hide{ opacity: 0; pointer-events: none; } .select-box header{ font-size: 30px; font-weight: 600; padding-bottom: 10px; border-bottom: 1px solid lightgrey; } .select-box .title{ font-size: 22px; font-weight: 500; margin: 20px 0; } .select-box .options{ display: flex; width: 100%; } .options button{ width: 100%; font-size: 20px; font-weight: 500; padding: 10px 0; border: none; background: #56baed; border-radius: 5px; color: #fff; outline: none; cursor: pointer; transition: all 0.3s ease; } .options button:hover, .btn button:hover{ transform: scale(0.96); } .options button.playerX{ margin-right: 5px; } .options button.playerO{ margin-left: 5px; } .select-box .credit{ text-align: center; margin-top: 20px; font-size: 18px; font-weight: 500; } .select-box .credit a{ color: #56baed; text-decoration: none; } .select-box .credit a:hover{ text-decoration: underline; } .play-board{ opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.9); } .play-board.show{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .play-board .details{ padding: 7px; border-radius: 5px; background: #fff; } .play-board .players{ width: 100%; display: flex; position: relative; justify-content: space-between; } .players span{ position: relative; z-index: 2; color: #56baed; font-size: 20px; font-weight: 500; padding: 10px 0; width: 100%; text-align: center; cursor: default; user-select: none; transition: all 0.3 ease; } .players.active span:first-child{ color: #fff; } .players.active span:last-child{ color: #56baed; } .players span:first-child{ color: #fff; } .players .slider{ position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: #56baed; border-radius: 5px; transition: all 0.3s ease; } .players.active .slider{ left: 50%; } .players.active span:first-child{ color: #56baed; } .players.active span:nth-child(2){ color: #fff; } .players.active .slider{ left: 50%; } .play-area{ margin-top: 20px; } .play-area section{ display: flex; margin-bottom: 1px; } .play-area section span{ display: block; height: 90px; width: 90px; margin: 2px; color: #56baed; font-size: 40px; line-height: 80px; text-align: center; border-radius: 5px; background: #fff; } .result-box{ padding: 25px 20px; border-radius: 5px; max-width: 400px; width: 100%; opacity: 0; text-align: center; background: #fff; pointer-events: none; transform: translate(-50%, -50%) scale(0.9); } .result-box.show{ opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .result-box .won-text{ font-size: 30px; font-weight: 500; display: flex; justify-content: center; } .result-box .won-text p{ font-weight: 600; margin: 0 5px; } .result-box .btn{ width: 100%; margin-top: 25px; display: flex; justify-content: center; } .btn button{ font-size: 18px; font-weight: 500; padding: 8px 20px; border: none; background: #56baed; border-radius: 5px; color: #fff; outline: none; cursor: pointer; transition: all 0.3s ease; }

Last, paste the following codes into your script.js file.

const selectBox = document.querySelector(".select-box"),

selectBtnX = selectBox.querySelector(".options .playerX"),

selectBtnO = selectBox.querySelector(".options .playerO"),

playBoard = document.querySelector(".play-board"),

players = document.querySelector(".players"),

allBox = document.querySelectorAll("section span"),

resultBox = document.querySelector(".result-box"),

wonText = resultBox.querySelector(".won-text"),

replayBtn = resultBox.querySelector("button");

window.onload = ()=>{

for (let i = 0; i < allBox.length; i++) {

allBox[i].setAttribute("onclick", "clickedBox(this)");

}

selectBtnX.onclick = ()=>{

selectBox.classList.add("hide");

playBoard.classList.add("show");

}

selectBtnO.onclick = ()=>{

selectBox.classList.add("hide");

playBoard.classList.add("show");

players.setAttribute("class", "players active player");

}

let playerXIcon = "fas fa-times",

playerOIcon = "far fa-circle",

playerSign = "X",

runBot = true;

function clickedBox(element){

if(players.classList.contains("player")){

playerSign = "O";

element.innerHTML = `<i class="${playerOIcon}"></i>`;

players.classList.remove("active");

element.setAttribute("id", playerSign);

}else{

element.innerHTML = `<i class="${playerXIcon}"></i>`;

element.setAttribute("id", playerSign);

players.classList.add("active");

}

selectWinner();

element.style.pointerEvents = "none";

playBoard.style.pointerEvents = "none";

let randomTimeDelay = ((Math.random() * 1000) + 200).toFixed();

setTimeout(()=>{

bot(runBot);

}, randomTimeDelay);

}

function bot(){

let array = [];

if(runBot){

playerSign = "O";

for (let i = 0; i < allBox.length; i++) {

if(allBox[i].childElementCount == 0){

array.push(i);

}

let randomBox = array[Math.floor(Math.random() * array.length)];

if(array.length > 0){

if(players.classList.contains("player")){

playerSign = "X";

allBox[randomBox].innerHTML = `<i class="${playerXIcon}"></i>`;

allBox[randomBox].setAttribute("id", playerSign);

players.classList.add("active");

}else{

allBox[randomBox].innerHTML = `<i class="${playerOIcon}"></i>`;

players.classList.remove("active");

allBox[randomBox].setAttribute("id", playerSign);

}

selectWinner();

}

allBox[randomBox].style.pointerEvents = "none";

playBoard.style.pointerEvents = "auto";

playerSign = "X";

}

function getIdVal(classname){

return document.querySelector(".box" + classname).id;

}

function checkIdSign(val1, val2, val3, sign){

if(getIdVal(val1) == sign && getIdVal(val2) == sign && getIdVal(val3) == sign){

return true;

}

function selectWinner(){

if(checkIdSign(1,2,3,playerSign) || checkIdSign(4,5,6, playerSign) || checkIdSign(7,8,9, playerSign) || checkIdSign(1,4,7, playerSign) || checkIdSign(2,5,8, playerSign) || checkIdSign(3,6,9, playerSign) || checkIdSign(1,5,9, playerSign) || checkIdSign(3,5,7, playerSign)){

runBot = false;

bot(runBot);

setTimeout(()=>{

resultBox.classList.add("show");

playBoard.classList.remove("show");

}, 700);

wonText.innerHTML = `Player <p>${playerSign}</p> won the game!`;

}else{

if(getIdVal(1) != "" && getIdVal(2) != "" && getIdVal(3) != "" && getIdVal(4) != "" && getIdVal(5) != "" && getIdVal(6) != "" && getIdVal(7) != "" && getIdVal(8) != "" && getIdVal(9) != ""){

runBot = false;

bot(runBot);

setTimeout(()=>{

resultBox.classList.add("show");

playBoard.classList.remove("show");

}, 700);

wonText.textContent = "Match has been drawn!";

}

replayBtn.onclick = ()=>{

window.location.reload();

}

That’s all, now you’ve successfully created a Tic Tac Toe Game using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

live demo

Download files

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}