How to Create a Tic Tac Toe Mobile App Using ChatGPT
Introduction
In this guide, I’ll show you how to create a fully functional Tic Tac Toe mobile app using ChatGPT, host it online, and convert it into a mobile application — all without writing a single line of code yourself!
Note : This guide is for Beginner Level students
Prerequisites
❤️ 𝗦𝘁𝗮𝗿𝘁 𝗵𝗲𝗿𝗲 ➜ https://chat.openai.com/
🔥 𝗖𝗼𝗱𝗲𝗣𝗲𝗻 ➜ https://codepen.io/ or Now chatGPT showing the preview
🖥️ 𝗧𝗶𝗶𝗻𝘆.𝗵𝗼𝘀𝘁 ➜ https://wl.tools/tiiny_host
📱𝗪𝗲𝗯 𝘁𝗼 𝗔𝗽𝗽 ➜ https://www.webintoapp.com/app-maker
🏮𝗙𝗹𝗮𝘁𝗶𝗰𝗼𝗻 ➜ https://www.flaticon.com/
Step 1 : Define your Idea
Prompt : I want to create a Tic Tac Toe game, so generate the mobile responsive code for HTML, CSS, and Javascript
Code
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">
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="board" id="board"></div>
<div id="statusScreen">
<h2 id="finalStatus"></h2>
<button id="reset">Play Again</button>
</div>
<script src="script.js"></script>
</body>
</html>CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: #f0f0f0;
}
h1 {
margin-bottom: 20px;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.cell {
background-color: white;
border: 2px solid #444;
display: flex;
align-items: center;
justify-content: center;
font-size: 2em;
cursor: pointer;
user-select: none;
}
.cell:active {
background-color: #e0e0e0;
}
#status {
margin-top: 20px;
font-size: 1.2em;
}
#reset {
margin-top: 10px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
}
@media (max-width: 400px) {
.board {
grid-template-columns: repeat(3, 80px);
grid-template-rows: repeat(3, 80px);
}
.cell {
font-size: 1.5em;
}
}Javascript
const board = document.getElementById("board");
const status = document.getElementById("status");
const resetButton = document.getElementById("reset");
let currentPlayer = "X";
let gameActive = true;
let gameState = Array(9).fill("");
const winConditions = [
[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 handleCellClick(index) {
if (gameState[index] !== "" || !gameActive) return;
gameState[index] = currentPlayer;
renderBoard();
checkResult();
}
function renderBoard() {
board.innerHTML = "";
gameState.forEach((value, index) => {
const cell = document.createElement("div");
cell.classList.add("cell");
cell.textContent = value;
cell.addEventListener("click", () => handleCellClick(index));
board.appendChild(cell);
});
}
function checkResult() {
let roundWon = false;
for (let condition of winConditions) {
const [a, b, c] = condition;
if (gameState[a] && gameState[a] === gameState[b] && gameState[a] === gameState[c]) {
roundWon = true;
break;
}
}
if (roundWon) {
status.textContent = `Player ${currentPlayer} wins!`;
gameActive = false;
return;
}
if (!gameState.includes("")) {
status.textContent = "Draw!";
gameActive = false;
return;
}
currentPlayer = currentPlayer === "X" ? "O" : "X";
status.textContent = `Player ${currentPlayer}'s turn`;
}
resetButton.addEventListener("click", () => {
gameActive = true;
currentPlayer = "X";
gameState = Array(9).fill("");
status.textContent = `Player ${currentPlayer}'s turn`;
renderBoard();
});
renderBoard();
status.textContent = `Player ${currentPlayer}'s turn`;Now the Game Works fine….. But this is the time to improve the design
- Change the background color
- Pop up to reveal the winner
- Beautiful restart Button
Prompt : Add a linear gradient color in the background, and rounded box, no need box border and no need big box, show the player win,draw and loss in the new screen, also add the beautiful button
Step 2 : Save our Code to the computer
- Create three separate files on your computer:
index.html(paste the HTML code)style.css(paste the CSS code)script.js(paste the JavaScript code)
- Compress these files into a ZIP folder
Step 3 : Host the Application in online
- visit : https://wl.tools/tiiny_host
- upload the zip file
My App Link : https://amber-dania-80.tiiny.site/
Step 4 : Convert the web app into mobile Application
- Register the Website
- After download it will stored as zip folder
- extract > android folder > app-release.apk
- upload the apk to you mobile phone and install it
That’s it! You’ve successfully created, hosted, and converted a Tic Tac Toe app without any coding knowledge. The entire process takes less than 30 minutes from start to finish.
