https://github.com/umarSiddique010/tic-tac-toe-js

A feature-rich Tic Tac Toe game built with HTML, CSS, and JavaScript. This project emphasizes responsive design, engaging UI/UX, SOLID principles, and accessibility, offering a seamless two-player experience with dynamic feedback and audio integration.
https://github.com/umarSiddique010/tic-tac-toe-js

accessibility audio-integration color-theory css dom-manipulation front-end-web-development game html javascript modular-code responsive-design solid-principles tic-tac-toe ux-ui

Last synced: 3 months ago
JSON representation

A feature-rich Tic Tac Toe game built with HTML, CSS, and JavaScript. This project emphasizes responsive design, engaging UI/UX, SOLID principles, and accessibility, offering a seamless two-player experience with dynamic feedback and audio integration.

• Host: GitHub
• URL: https://github.com/umarSiddique010/tic-tac-toe-js
• Owner: umarSiddique010
• Created: 2024-12-29T08:25:18.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-12-29T11:43:59.000Z (about 1 year ago)
• Last Synced: 2024-12-29T12:26:54.386Z (about 1 year ago)
• Topics: accessibility, audio-integration, color-theory, css, dom-manipulation, front-end-web-development, game, html, javascript, modular-code, responsive-design, solid-principles, tic-tac-toe, ux-ui
• Language: JavaScript
• Homepage: https://umarsiddique010.github.io/Tic-tac-toe/
• Size: 0 Bytes
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 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.