In today's topic, we will learn how to create Tic Tac Toe Application without coding. By following the tips we have given you, you can create a Tic Tac Toe app within 5 minutes.
We will provide 3 files, you just have to copy and paste them for making this app. Files are 'HTML File', 'CSS File', 'JS File'.
Step - 1 : HTML Code
Copy the below HTML code from our side and paste in the any notepad. Then save the pasted code in a folder as '' index.html ''.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tic Tac Toe</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap" rel="stylesheet">
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="container">
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
<button class="button-option"></button>
</div>
<button id="restart">Restart</button>
</div>
<div class="popup hide">
<p id="message">Sample Message</p>
<button id="new-game">New Game</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
Step - 2 : CSS Code
Next you need to copy the CSS code from our side and paste in notepad app. Then save the text in a folder as " style.css ".
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Raleway", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(135deg, #8052ec, #d161ff);
}
html {
font-size: 16px;
}
.wrapper {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.container {
width: 70vmin;
height: 70vmin;
display: flex;
flex-wrap: wrap;
gap: 2vmin;
}
.button-option {
background: #ffffff;
height: 22vmin;
width: 22vmin;
border: none;
border-radius: 8px;
font-size: 12vmin;
color: #d161ff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
#restart {
font-size: 1.3em;
padding: 1em;
border-radius: 8px;
background-color: #0a0027;
color: #ffffff;
border: none;
position: relative;
margin: 1.5em auto 0 auto;
display: block;
}
.popup {
background: linear-gradient(135deg, #8052ec, #d161ff);
height: 100%;
width: 100%;
position: absolute;
display: flex;
z-index: 2;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 1em;
font-size: 12vmin;
}
#new-game {
font-size: 0.6em;
padding: 0.5em 1em;
background-color: #0a0027;
color: #ffffff;
border-radius: 0.2em;
border: none;
}
#message {
color: #ffffff;
text-align: center;
font-size: 1em;
}
.popup.hide {
display: none;
}
Step - 3 : Java Script Code
Next third step is Java script. You need copy also below Javascript code from our side and paste in note pad app. Then save it in a folder as " script.js ".
let btnRef = document.querySelectorAll(".button-option");
let popupRef = document.querySelector(".popup");
let newgameBtn = document.getElementById("new-game");
let restartBtn = document.getElementById("restart");
let msgRef = document.getElementById("message");
//Winning Pattern Array
let winningPattern = [
[0, 1, 2],
[0, 3, 6],
[2, 5, 8],
[6, 7, 8],
[3, 4, 5],
[1, 4, 7],
[0, 4, 8],
[2, 4, 6],
];
//Player 'X' plays first
let xTurn = true;
let count = 0;
//Disable All Buttons
const disableButtons = () => {
btnRef.forEach((element) => (element.disabled = true));
//enable popup
popupRef.classList.remove("hide");
};
//Enable all buttons (For New Game and Restart)
const enableButtons = () => {
btnRef.forEach((element) => {
element.innerText = "";
element.disabled = false;
});
//disable popup
popupRef.classList.add("hide");
};
//This function is executed when a player wins
const winFunction = (letter) => {
disableButtons();
if (letter == "X") {
msgRef.innerHTML = "🎉 <br> 'X' Wins";
} else {
msgRef.innerHTML = "🎉 <br> 'O' Wins";
}
};
//Function for draw
const drawFunction = () => {
disableButtons();
msgRef.innerHTML = "😎 <br> It's a Draw";
};
//New Game
newgameBtn.addEventListener("click", () => {
count = 0;
enableButtons();
});
restartBtn.addEventListener("click", () => {
count = 0;
enableButtons();
});
//Win Logic
const winChecker = () => {
//Loop through all win patterns
for (let i of winningPattern) {
let [element1, element2, element3] = [
btnRef[i[0]].innerText,
btnRef[i[1]].innerText,
btnRef[i[2]].innerText,
];
//Check if elements are filled
//If 3 empty elements are same and would give win as would
if (element1 != "" && (element2 != "") & (element3 != "")) {
if (element1 == element2 && element2 == element3) {
//If all 3 buttons have same values then pass the value to winFunction
winFunction(element1);
}
}
}
};
//Display X/O on click
btnRef.forEach((element) => {
element.addEventListener("click", () => {
if (xTurn) {
xTurn = false;
//Display X
element.innerText = "X";
element.disabled = true;
} else {
xTurn = true;
//Display Y
element.innerText = "O";
element.disabled = true;
}
//Increment count on each click
count += 1;
if (count == 9) {
drawFunction();
}
//Check for win on every click
winChecker();
});
});
//Enable Buttons and disable popup on page load
window.onload = enableButtons;
After make file of all HTML code, CSS code and Java code, you need to visit https://tiiny.host/ website for combine all code for a making game url. It is totally free of cost.
After visit this website👆, you need to upload a zip file of saved HTML file, CSS file and Java script file. So select three of HTML, CSS and Java script file and convert to zip file.
Then click on 'Upload file' button and upload the created zip file. In few minute this website will be make a game url for your application. Next you can use Niotron or Android builder or kodular for making app without coding.
If you don't know about app inventor platform then you can visit https://www.webintoapp.com/ website for make web app to convert android app.
We are also make a tutorial video about this topic in our youtube channel. You can watch for more information. Click below link.
Web app to android app convert website :
Check HTML, CSS and Java script code are correct or not :
If you are unable to copy above code, then You can also download html, css and java script code from our site.
