What it does
Since it’s a beginner’s project, it relies on Google’s Speech Recognition API to recognize keywords for actions like “firing a bullet” or “ascending” by the player in the game.
How It’s Built
Under the hood, it depends on a few p5.js and Google SR libraries for game controls, audio input and recording the user’s transcripts and processing them. The game controls are similar to an iOS game (Ahh Pah!) that had been popular in Asia for a while, but now you get to play something like that right on your laptop and in your browser! It even feels more light-weight and fun.
I wanted to implement the game so that the player’s ascension value is dependent on the volume of the voice input and have invisible ceiling and floor to prevent the player from going out of bounds. This was challenging at first because p5.play doesn’t have an intuitive coordinate system.
A big problem that happened was when we tried to put the game through PhoneGap and turn it into an iOS app. We tested it first in Safari and imagined that it would be quick and easy, but apparently, Safari needed plugins to support a method in p5.js to get any voice input. We tried with several plugins and they did not help solve the problem whatsoever. That was when we decided to let go of PhoneGap thought since we don’t want to add any more dependencies to the project. I’m still working on finding a solution to that need.
What I learned
I’m also excited to hear that this game had become quite popular in the Hack Club community and had been introduced as an example project to new Hack Club members. Shout out to Hack Club! Shouty Flap was made possible for everyone to enjoy because of you.
Please, contribute to it on GitHub if you know how to make it better!
Try it out
View this project on GitHub: Shouty Flap