A classic two-player game focusing on aligning three symbols in a row on a 3x3 grid.
Embark on a journey into the world of classic gaming with Tic Tac Toe. This project allows you to build a web-based version of the timeless strategy game. Immerse yourself in creating an interactive platform where players can play against CPU, engage in the game, and celebrate victories or draw conclusions. Tailored for desktop, tablet, and mobile experiences, this project is perfect for those who enjoy combining classic gaming with modern web development.
- Create a centered layout featuring X and O icons above the "Tic Tac Toe" title. Include a brief description as per the design and a "New game" button that leads users to the "Pick player 1st mark" screen.
- Implement a centered layout with the title "Pick player 1st mark". Include a choice between X and O marks using radio buttons. Below, add a reminder that X always starts first and a "Start game" button that navigates to the game board UI.
- Craft a centered board layout. On the left, display X and O icons, and on the right, indicate whose turn it is (X or O). Create a 3x3 grid with dividers for gameplay under the above. Below, show blue and orange pills indicating X (CPU) and O (Player) placements or vice versa, along with their counts. Include a "Reset game" button for exiting the game and moving back to "Pick player 1st mark".
- Enable player to place X or O marks on the board. Implement CPU logic for automated responses. Incorporate a hover effect with blue or orange rectangles at the cursor position for player interaction. Optionally, can do hover effects for the CPU to show "thinking" while on its turn.
- Program the game to end in a tie or when a player (or CPU) successfully places three Xs or Os in a row. Ensure the game recognizes and responds to these conditions appropriately and shows a strike-through line.
- Display a modal with a gray background at the end of each game. The modal should show different titles and content for winning, losing, or tying, along with appropriate X/O icons. Include 'Quit' and 'New Game' buttons, with 'Quit' returning to the initial screen and 'New Game' starting a new player selection process.
- Adjust the design for tablet use, focusing on reduced horizontal spacing and smaller font sizes. Ensure the layout remains user-friendly and aesthetically pleasing on tablet screens.
- Modify the game for mobile users, prioritizing less spacing and smaller fonts. Adapt the design to maintain functionality and visual appeal on smaller screens.