Animal Run is a voice-controlled game designed to help users to refresh their vocabulary
Built with P5.js, Animal Run is a voice-controlled game using the speech recognition functionality from the p5.speech library. This game is designed as an entertaining tool for users who wish to refresh their vocabulary. Depending on the number of players users chose, one, two, or three randomly selected animal emojis will appear on the screen. All users need to do is to say appropriate words to move the emoji forward. Users can say whatever the words they want to say; however, there are three conditions that should be met. First, the words shouldn't start with the first letter of the animal; second, the occurrence of the first letter is what determines the amount of the move. For example, “acceptance” (with three letter c's) is more advantageous than “sick” (with one letter c) when moving the cat emoji forward. Third, the words should not be repeated. Therefore, the goal of the game is to make the animal emoji get to the destination as fast as possible by carefully choosing appropriate words.
Try it yourself at https://animal-run.glitch.me/ (make sure to allow sound permissions)
The Rules
To move the animal forward
The words should not start with the first letter of the animal.
The words must contain the first letter of the animal. The more, the better.
The words should not be repeated.
Word Recognition
To process a speech input, I used the RiTa library's toLowerCase function to make all letters lowercase letters. Some words like apple, university, or those of proper nouns are automatically capitalized, causing problems when counting the occurrence of the first letter of the animal in the spoken words.
I used the array.prototype.filter() function to detect whether the word has been said already and the string.split() function for calculating the occurrence of the target letter.
var findDuplicates = arr =>
arr.filter((item, index) => arr.indexOf(item) != index);
function gotSpeech(speech) {
speech.text = speech.text.toLowerCase();
var sp = speech.text.split(" ");
var len = sp.length;
wordTime = millis();
for (var i = 0; i < len; i++) {
textAr.push(sp[i]);
var newTextAr = [...new Set(findDuplicates(textAr))];
for (var j = 0; j < player; j++) {
if (mode == 2 && sp[i][0] != animalN[r[j]][0] &&
newTextAr.includes(sp[i]) == false
) {
animal[j].moveUp(sp[i].split(animalN[r[j]][0]).length - 1);
}
}
firstWord.push(sp[i]);
}
}
Design / Game Flow
There are four main steps in the game. On the main page, one out of 10 animal emojis is presented at the center of the screen with short instructions down below. Users can start the game by clicking anywhere on the screen, which will transition them to the next page. On the next page, users have options to play games with multiple players. Depending on the number of players they select, a corresponding number of emojis will appear on the game page. As one animal emoji reaches the top, users will receive a message about the total playtime and the winner of the game (in 2 or 3-player mode only).
Appearance on Mobile Device
On Samsung Android. There are subtle differences in emoji design across devices.