Keyboard Hero

• 

  Start screen

• 

  Gameplay

• 

  Levels

Inspiration

Keyboard Hero was inspired by the classic game Guitar Hero with a typing game twist. Keyboard Hero gives you all the fun of Guitar Hero with only a laptop and an internet connection! Say goodbye to all of those boring typing games and harness the power of music to scale up your typing tempo.

What it does

Choose a level based on difficulty and song preference. Then, type through the premade levels, where you’ll see falling blocks that say which key to press. Keys you press add to your point total, and if you press a key perfectly within the purple bar, you’ll gain two points! Missed keys are counted separately and aren’t included in your point total.

Characters are sorted into eight columns that correspond to which finger you should type them according to touch typing conventions. Thus, players can more easily learn touch typing.

Keyboard Hero is a fun game for everyone! Kids can play the easier levels to learn typing for the first time and adults can play the more difficult levels to improve their speed and accuracy.

How we built it

We developed the game with HTML, CSS, and JavaScript. We used P5.js to animate our the keys on the screen. The p5.sound library was used to play the songs for each level. We used repl.it to collaborate online. We made our code efficient and organized by using object oriented programming.

To make each level, we typed in letters according to the beats in the song. We saved each of those letters and the time stamp into a file, which was then used in our game to sync the letters perfectly with the beats.

Challenges we ran into

One challenge we ran into was making sure that the timing of each key would fit in with the beat and rhythm of the different songs. Adjusting the falling speed of the blocks and adjusting the frame rate would only work for some songs not not others. Eventually, we figured out a method to always have the keys line up, no matter the speed or tempo.

Accomplishments that we’re proud of

We are very proud of our video-game like aesthetic because it provides for an adventurous dive into a futuristic and technological world. We are also extremely proud of making sure that each key is matched up to a beat in the song. Our team had to do a lot of trial and error before being able to figure out the method to have the keys line up.

What we learned

While creating this project, we learned how to set reasonable goals for our project. We had envisioned multiple different routes in which Keyboard Hero could go, but decided that in order to have a game that we were satisfied in by the end of the hackathon, we needed to have reasonable goals and expectations.

We also learned how to make and save text files using JavaScript. We needed to do this to create level map files.

What's next for Keyboard Hero

Right now, our game only includes pop music selections. To expand our reach to a wider audience, we want to add the ability for the player to select their favorite genre, such as pop, rock, classical, jazz or country.

We would also like to make Keyboard Hero a multiplayer game by letting players join forces and work together to play a duet in real time by using their collective typing powers.

To make the gameplay more exciting, we’d love to add some more visual effects, such as a correct key emitting a beam of light.

We would also like to make a more capable level editor so it’s easy for anyone to make maps.

Built With

• css3
• html5
• javascript
• p5.js
• p5.sound