Rhythm Heroes : Hackathon Nov 2022
Project Overview
Welcome to Rhythm Heroes! This game is based on the retro Dance Dance Revolution arcade game. The goal of this game is to test your rhythm, your musical timing and your reflexes.
How to play
First, select A song! Each song has a different difficulty level so choose wisely! Once the game starts, you will see directional arrows sliding down your screen at different speeds and intervals according to the rhythm of the song. The goal is to tap the correct arrow when it reaches the target at the bottom of the screen. If your timing is good, your score will increase.
On keyboards, use the arrow keys ←↑→↓ and on your mobile device, simply tap the correct target at the bottom of the screen. Good luck!
Setup
Deployed link
How to install
- Double click setup.exe
- Follow onscreen instructions
User Stories
Persona: Gamer
- As a gamer I am presented with the landing page which gives me a general overview of how to play the game.
Aceptance criteria: Gamer was able to landing page with instructions.
-
As a gamer, I want to be presented with the start game button so that I can press the start game button to play the game.
Acceptance criteria: Gamer was able to click the start game button and play.
-
As a gamer, I want to be able to choose from a selection of song options and difficulty levels.
Acceptance criteria: Gamer was able to choose from a selection of songs.
-
As gamer, I want to be able to hear a snippet of the song audio before I make a song selection.
Acceptance criteria: Gamer was able to hear the audio of each song before making a selection.
-
As a gamer, I want to see the gameboard, moving arrows and the arrow targets at the bottom of the screen.
Acceptance criteria : Gamer was able to see all the elements of the gameboard, including the score, the track details and volume controls.
-
As a gamer, I want the option to play again at the end of the game
Acceptance criteria : Gamer was shown a play again button which, when pressed, directed them back to the carousel to select a new song and play again.
Wireframes:
Some styling changes were made to the carousel and we decided against the split screen desktop deisplay for the game board, but the overall design for each page is consistent with the wireframes here.
Testing
Responsive Design
Chrome Developer Tools and Pesticide Chrome extension was regularly used during development to test responsiveness on different screen sizes. To make the website responsive Bootstrap 4 and CSS was used. Responsiveness for different screen sizes can be seen in the features section above.
Validator Testing
Deployment
-
We have used Gitpod an IDE to write the game code.
-
Team worked on each task by making a fork of the original copy of the repo.
-
Team created a branch name and add individual work to the project repo using
git add command. -
A pull request is created and added to the project logs.
-
The project lead reviewed and approved the pull request and merged to the project repository.
Technologies used
- HTML5 for the contents and structure of the website.
- CSS3 for the styling and animations.
- Bootstrap 4 for responsive design
- Balsamiq for wireframes.
- GitHub as a remote repository.
- gitpod.io was used as IDE and git version control.
- Chrome Developer Tools for testing screen sizes and using
- Wave Chrome extension to check web accessibility.
- Pesticide Chrome extension during development.
- Game name generator.
- Downie 4 to download YouTube videos for playlist.
- Permute to convert downloaded YouTube videos, from mp4 to mp3.
- amiresponse
Credits
Project idea took inspiration from the following sources:
-
CSS filter generator to convert from black to target hex color
-
CSS Neon button effect for the button styles.
Contributors
Acknowledgements
To all the Rhythm Hero game developers, your time and contributions are highly valued. Thank you. To our Facilitator- Naoise Gaffney, thank you for your support and checkpoints.