Row Rumble - Tic-Tac-Toe Game

Live Site

Play Row Rumble

Brief Introduction

Row Rumble is a vibrant, fun, and challenging take on the classic Tic-Tac-Toe game. Developed during a group hackathon by Maryan, Harmeet, and Ashrafur, this project demonstrates teamwork and creativity in web development. The game offers engaging gameplay with both "Player vs Player" and "Player vs Computer" modes, featuring difficulty levels and a responsive, aesthetically pleasing interface.

Responsivity

Row Rumble is fully responsive, ensuring seamless gameplay across desktop, tablet, and mobile devices.

Example Image

Contents

• UX (User Experience)
  • User Stories
• Strategy
• Scope
• Structural Design
• Skeleton (Wireframes)
• Surface Design
  • Typography
  • Color Scheme and Imagery
• Website Features
  • Tablet/Mobile View
  • Future Features
• Technologies Used
  • Languages
  • Frameworks and Libraries
  • Programs
• Deployment
• Testing
  • Validation
  • Lighthouse Audit
  • Bugs
• Credits
  • Content References
  • Acknowledgements

UX (User Experience)

User Stories

1. As a user, I want to play Tic-Tac-Toe against a friend or the computer so I can have fun and challenge myself.
2. As a user, I want the option to select the difficulty level when playing against the computer to match my skill level.
3. As a user, I want a responsive design so I can play the game on any device.
4. As a user, I want a visually appealing interface to enhance my gaming experience.
5. As a user, I want quick access to instructions and a main menu to easily navigate the game.

Strategy

The goal of this project was to create a fun and interactive game using JavaScript. The focus was on user engagement, responsive design, and implementing advanced logic for the computer opponent.

Scope

Row Rumble includes:

• "Player vs Player" mode.
• "Player vs Computer" mode
• A responsive and interactive UI with clear visual feedback.

Structural

The game is structured into:

• A main menu for navigation.
• The game board for playing.
• A scoreboard for keeping record of wins and losses.

Skeleton (Wireframes)

Initial wireframes were designed for desktop, tablet, and mobile views to ensure a consistent experience. These included layouts for the main menu, game board, and modals.

Surface Design

Typography

• Header: Arial Bold for a modern and clean look.
• Body: Sans-serif for readability.

Color Scheme and Imagery

• Background: Gradient from teal to lavender for a calming effect.
• Buttons: Contrasting shades of blue for clear call-to-action.
• Imagery: Minimalistic icons and hover effects. We use the coolers.co to create this color palette.

Website Features

Tablet/Mobile View

The game is fully optimized for smaller screens. Buttons and cells are large enough for touch interactions, and the layout adjusts to ensure no content overlaps.

Future Features

• Leaderboard to track high scores.
• Timer for speed challenges.
• Sound effects for moves and victories.

Technologies Used

Languages

• HTML
• CSS
• JavaScript

Frameworks and Libraries

• Bootstrap 5

Programs

• Visual Studio Code
• Git and GitHub

Deployment

Row Rumble was deployed to GitHub Pages. https://harmeetkaur13.github.io/TicTacToe Row Rumble was deployed to GitHub Pages. Follow these steps to deploy:

1. Push your code to a GitHub repository.
2. Go to the repository settings.
3. Navigate to "Pages" and select the branch to deploy from.
4. Save changes, and the live link will be available.

Testing

Validation

• HTML:
• CSS:

Lighthouse Audit

Bugs

• Resolved: A bug where the computer opponent skipped turns.
• Ongoing: Rare edge case where win detection fails in rapid gameplay.

Credits

Content References

• Inspiration from the classic Tic-Tac-Toe game.

Acknowledgements

• Maryan Aden, Harmeet Kaur, Ashrafur Ahmed for developing Row Rumble.
• ChatGPT for guidance and code generation.
• Media References: Bootstrap icons and custom gradient backgrounds.

---

Thank you for playing Row Rumble! We hope you enjoy the game!