Blockbuster Battle — Guess the Bigger Box Office Hit!
Click to view the LIVE site
(To open in a new tab/ window, press "ctrl" (or ⌘ for Mac) + click on the link)
Blockbuster Battle is a fun and interactive movie quiz that challenges users to guess which of two films made more at the box office. The purpose of the game is to entertain movie enthusiasts and casual users alike by testing their knowledge of movie gross earnings. The app aims to provide an engaging experience through visually appealing graphics and an easy-to-use interface, enhancing users' appreciation of cinema and pop culture trivia.
- Movie Enthusiasts who are interested in testing their knowledge of box office hits.
- Trivia Lovers: Quiz enthusiasts looking for a fun, movie-based challenge.
- Casual Gamers: Players who enjoy quick, engaging games.
- Competitive Groups: Friends and family who enjoy competing for the highest score.
Audience will find value in a simple, engaging, and visually appealing quiz that combines entertainment with an educational aspect of movie grosses.
- User Story 1: As a user, I want to start a game and be presented with two movies to compare.
Acceptance Criteria: Upon starting the game, two random movie posters appear. The clickable posters allows users to choose which movie earned more. - User Story 2: As a user, I want to see my score updated after each guess.
Acceptance Criteria: After each guess, users are shown, if they are correct, their real-time cumulative score.
- User Story 1: As a user, I want to create my username to view my name with my scores.
Acceptance Criteria: Users can type in a username and save their scores to compare with others or beat their last best score.
- User Story 1: As a user, I want a leaderboard to view my ranking against others.
Acceptance Criteria: A leaderboard tracks top scores and is updated when users reach top-5 high scores.
Color Scheme: A dark background with vibrant movie poster images for contrast, enhancing readability and visual appeal.
Fonts: SFMoviePoster-Bold, adding a bold, cinematic feel.
Other Accessibility Consideration: Alt text added to images.
- ChatGPT for some of the movie content.
- Freepik for AI-image generation
- Adobe Fresco & Canva for image editing
- Adobe Express for image resizing
- Feature 1: Two-movie comparison game interface, allowing users to pick the higher-grossing movie.
- Feature 2: Score tracking after each guess, users see if they were correct and get an instant score update.
- Feature 1: Users enter a username that displays with their score.
- Feature 1: A leaderboard displays the top 5 scores, allowing users to view their ranking and compare with others.
The project was deployed on GitHub Pages.