-
-
The opening screen, featuring a infinite css background animation of floating hearts to set the Valentine's mood.
-
Upon clicking the info button, a text box displays information about the game and a breakdown of the 8 question categories.
-
After clicking the play button, the title, info button, and text box disappear, and a roulette wheel and spin button are displayed.
-
When the user clicks the spin button, the wheel spins for 5 seconds, displaying a blurred css animation, and stops on a random category.
-
The game currently features 80 different questions, ensuring that each spin allows you to learn something new about the other player.
-
Questions are randomized and correspond to their category, ensuring that landing on a category multiple times displays different questions.
-
Inspiration
This project was inspired by the New York Times' article entitled "The 36 Questions That Lead to Love". I wanted to create a fun game that allowed players to get to know each other on a deeper level, with open-ended questions that promoted conversation and story telling.
What it does
Valentine's Roulette is a randomized question game featuring 8 different question categories - Personal, Career, Memories, Dreams, Family, Interests, Random, and Values - displayed as icons on a roulette wheel. When the user clicks the "spin the wheel" button, the roulette wheel spins for 5 seconds, stopping on a random category, and a randomized open-ended question corresponding to the category appears - prompting players to share stories and engage in meaningful conversation.
How I built it
The game was built using HTML, CSS, and JavaScript. Game animations such as the fading of elements, blurring of the roulette wheel, and floating hearts in the background, were created using CSS keyframes. The spinning of the roulette wheel, randomized questions, and correspondence of questions to pre-defined categories was done in JavaScript. I also used JavaScript's innerHTML function to display a randomized question after the wheel stopped on a specific category.
Challenges I ran into
The biggest challenge I ran into was ensuring the randomized questions corresponded to the appropriate question category. I solved this by dividing the 360 degree wheel into 8 separate 45 degree zones, and creating arrays for each zone with questions that corresponded to the appropriate category.
Accomplishments that I'm proud of
This was my first project that corresponded to a specific theme, and I am quite happy with how it turned out. Originally I had a shell of an idea to create a roulette game, and the visual elements really tied the project together to make a Valentine's-themed question game.
What I learned
Through this project I learned a lot about css keyframe animations, and making a project that was not only functional, but also visually attractive.
What's next for Valentine's Roulette
In the future I would like to add more questions to each category, ensuring the game could be played for hours on end without the same question appearing twice.
Log in or sign up for Devpost to join the conversation.