June 2016

Time Spent

8-10 hours

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 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

A casual game should always be fun to play and make, and it’s not a matter of its programming complexity. It’s the first time I’ve really experienced the power of JavaScript and its libraries and realized that I could use it to turn a frustrating game, a game I (and probably you, too) have almost given up, into a crazily fun one.

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!

Built With

javascript p5.js Google Speech Recognition API html css

Try it out

View this project on GitHub: Shouty Flap

Built With

Share this project: