Tic Tac Toe Game Using AMAZON Q CLI With Simple Prompts

🎮 I Built a Web-Based Tic Tac Toe Game from Scratch!
A full dev journey — from concept to publishing

💡 Why I Chose Tic Tac Toe
Tic Tac Toe is a simple yet classic game that almost everyone has played at some point. I wanted to challenge myself by building something complete — from scratch — and also make it beautiful and responsive for the web. Since it’s a logic-based game with a clean UI, I thought it would be the perfect project to sharpen my skills in HTML, CSS, and JavaScript.

🗂️ Folder Structure
Before I started coding, I decided how to organize my files. I wanted to keep everything clean and modular, so I created a folder called:

pgsql
Copy
Edit
TicTacToe_Game/
├── index.html
├── style.css
├── script.js
├── README.md
This helped me stay focused and maintain clarity throughout the development.

🧱 Phase 1 – Setting Up the HTML Structure
I started by creating a basic 3x3 grid in my index.html. Each cell is a div with a class name like cell and a unique data-index attribute to help me track positions in JavaScript. I also added a heading, a small turn indicator (to show who’s playing), and a Restart button.

*Here’s what I added:
*

1. A game title (Tic Tac Toe)
2. A 3x3 board with 9 clickable cells
3. A turn display
4. A restart button
5. Later, I styled all of these in CSS to give them life.

🎨 Phase 2 – Styling with CSS
The game needed to look clean and responsive, so I spent time writing good CSS. I centered the board, made it responsive for mobile and desktop, and added modern design features like:

• Rounded corners
• Subtle box shadows
• Hover effects for cells
• Color coding: green for X, blue for O, yellow highlight for winning cells
• I also added a Google Font to make it look cleaner and more elegant.

⚙️ Phase 3 – Game Logic with JavaScript
This was the most important and fun part. In script.js, I created all the logic to:

• Switch turns between X and O
• Track cell states using an array
• Detect a win using a predefined list of winning combinations
• Detect a draw when the board is full
• Highlight winning cells
• Restart the game without refreshing the page
• I used functions like:

handleClick() – to handle cell clicks

checkWinner() – to check for winning conditions

checkDraw() – to detect a draw

resetGame() – to restart the game

Each time a move is made, the board updates, the current turn switches, and the game checks if it’s over.

## GITHUB+SORUCE CODE
= [https://github.com/Ajitabh11/Tic_Tac_Toe_game]

🔄 Adding Replay Feature
After the game ends (win or draw), I wanted the player to restart without reloading the page. The “Restart Game” button resets everything:

1. Clears the board
2. Resets the turn to X
3. Hides the win/draw message
4. Makes all cells clickable again
5. This made the game loop feel complete.

📱 Responsive Design

I made sure the layout works well on both desktop and mobile devices by:

1. Using flexbox for centering
2. Adding a meta viewport tag
3. Setting width in percentages
4. Using media queries (optional)
5. Now the game looks good even on small screens!

📦 Preparing for Deployment
Once the game was ready, I added a simple README.md that explains:

• What the game does
• How the code is structured
• How to run it locally
• How to publish it online (using GitHub Pages / Netlify)
• Then I published the whole folder to GitHub and deployed it on GitHub Pages!

🚀** What I Learned**

• While building this project, I learned:
• How to plan and structure a project folder
• How to handle logic and UI updates in JavaScript
• How to style using clean and modern CSS
• How to make projects mobile-friendly
• How to deploy a project online

It was a great learning experience, and now I have a complete game I can proudly share with others!

🖼️** Screenshots of My Game**

(You can insert images here)

1. Game board UI
2. Highlighted win condition
3. Responsive layout on mobile
4. Restart flow

[Prompts i Used]
Create a complete, responsive, and visually appealing web-based Tic Tac Toe game using only HTML, CSS, and JavaScript, and place all code inside a single folder named TicTacToe_Game. The game should feature a 3x3 grid for two-player interaction (Player X and Player O), allow alternating turns, display the current player's move, and visually highlight the winning combination when a player wins. It must also detect draw conditions and show appropriate result messages such as 'X Wins', 'O Wins', or 'It’s a Draw!'. Include a clean and modern user interface with rounded clickable cells, subtle hover effects, light shadows, and color-coded markers (green for X, blue for O, yellow highlight for winning tiles). Add a styled 'Restart Game' button to reset the board and replay without reloading the page. The layout should be centered, responsive on both desktop and mobile devices using a meta viewport tag, and optionally use a Google Font for better aesthetics. Organize the project into three files: index.html, style.css, and script.js, with well-commented, modular JavaScript code and clean semantic HTML structure. Make sure the code is beginner-friendly, includes no external libraries or frameworks, and is fully ready to be published directly on GitHub Pages, Netlify, or Vercel. Also include a basic README.md file with game description, file structure, and instructions on how to run or deploy the game."

🔷 PHASE 1: Core Logic
Goal: Build the main engine of the game.

Create a main.py file.

Define a 3x3 board using a list or 2D array.

Alternate turns between two players – Player X and Player O.

Accept valid input positions (1–9 or row-column format).

Check after every move for win conditions (rows, columns, diagonals).

Check for a draw if all positions are filled without a winner.

Display result messages: "Player X wins!", "Player O wins!", or "It’s a draw!".

Ensure inputs are validated (no overwriting positions or invalid values).

🟩 PHASE 2: UI, Sound, and Replay System
Goal: Add polish to the game with basic visuals and replay ability.

Display the board after every move in a formatted 3x3 grid.

Use color coding for the board: green for X, blue for O (using ANSI colors).

Add ASCII-style borders or visual enhancements for the board.

Play sounds (placeholder: x_move.wav, o_move.wav, win.wav, draw.wav) from the assets/sounds/ folder.

At the end of the game, prompt: “Do you want to play again? (Y/N)”

Reset the board and loop the game if the user wants to replay.

Organize code into functions: print_board(), check_winner(), get_input(), play_game()

Add a simple README.md with usage instructions and file structure.

💬 Final Words
This project may look small, but it taught me a lot. If you're learning web development, I highly recommend trying something like this. Tic Tac Toe is simple, but building it yourself helps you learn DOM manipulation, game logic, event handling, and UI design — all in one project.

I'll soon be moving on to build another game — Hangman — and I’ll share that dev vlog too. Stay tuned!