Tic Tac Toe Game

A feature-rich Tic Tac Toe game built with HTML, CSS, and JavaScript. This project focuses on implementing solid gameplay mechanics, an engaging user experience, and adhering to clean code practices.

Features

• Two-Player Mode: Play with a friend in real-time.
• Dynamic UI Updates: Real-time feedback for each player's turn.
• Audio Effects: Custom sounds for clicks, game start, and results.
• Game Restart and Replay: Options to reset the game or play again.
• Win, Lose, or Draw: Handles all outcomes with appropriate messages.
• Accessible Design: Aria labels and clear visual feedback ensure accessibility.

Skills Utilized

HTML

• Semantic elements to structure the game.
• Form handling for player name input.
• ARIA attributes for accessibility.

CSS

• Responsive design to ensure the game works across devices.
• Custom styling for the game board and interactive elements.
• Color theory applied for clear visual differentiation between players.
• Smooth transitions and hover effects for an engaging user experience.

JavaScript

• Modular code structure adhering to the SOLID principles.
• Event handling for dynamic gameplay interactions.
• Audio integration for enhancing user feedback.
• DOM manipulation for real-time updates.
• Logical implementation of game rules and win conditions.

UI and UX Contributions

• User Interface (UI):

  • Designed an intuitive game board layout.
  • Clearly labeled buttons and inputs for a seamless experience.
  • Visual cues like highlighting active cells and displaying current turns.

• User Experience (UX):

  • Implemented responsive design to cater to different screen sizes.
  • Added meaningful audio cues to enhance engagement.
  • Ensured accessibility through keyboard and screen reader support.
  • Smooth animations and transitions for a polished feel.

Color Palette

The color palette was chosen for clarity and engagement:

• Primary Text: #EEEEEE (light gray for readability).
• Background: #030637 (dark blue for a focused and immersive environment).
• Game Board Background: #F0F8FF (light blue for contrast).
• Player X: #A64D7A1A (translucent pink for subtlety).
• Player O: #4D54A61A (translucent blue for subtlety).
• Hover Effect: #78A08324 (translucent green for interactivity).
• Buttons:
  • Reset: #B8001F (red for urgency).
  • Play Again: #384B70 (muted blue for neutrality).

Gameplay

1. Enter the names of both players.
2. Take turns clicking on cells to place your mark (X or O).
3. The game announces the winner, loser, or a draw.
4. Use the "Play Again" button to replay or "Reset" to start over with new names.

Audio Feedback

• Click Sounds: Different sounds for X and O.
• Game Start: Audio cue when the game begins.
• Game Over: Audio indicating the result.
• Play Again: Sound effect for replaying.

Credits

This project was built as part of a learning experience to master JavaScript, practice clean code principles, and enhance UI/UX design skills. Special thanks to all resources and inspirations along the way.