Building a Bingo game with JavaScript


It’s been more than 2 months since my last post… I guess it’s not that easy to keep writing periodically, or at least I’m not that kind of people…

This time I come here to expose my learnings during my very last project.

I know I just started this post telling I couldn’t commit to write periodically, but with the new year, I tried to set new goals and one of them is to deliver at least 12 projects during the year.

It means launching one application every month, and in order for me to accomplish it, I have decided that I will try to publish something simple (yet working and useful) during the first half of the month, and then deliver updates with new functionalities among the next days/weeks.

I hope this helps me to learn on how to deliver products incrementally and listening to the people needs (if anyone uses them) instead of trying to deliver a very “big perfect thing” that later no one uses.

This first project of the year is a “Bingo” game. For the moment, the users cannot play in the computer, but they can print bingo cards and then use the tool to call the different numbers.

The idea came in a Christmas family meeting when a relative wanted to play bingo and kept looking for a YouTube video to listen for the numbers… The first round was fine, but after that, we couldn’t find a proper video… Some of them were too noisy, some of them were too quick, some others too slow, and at the end, were just videos that were not “random enough” and that added some pauses in the game for the ads…

So after that time, I just looked for a free text2speech online tool and recorded an audio for each number from 1 to 90 resulting in 90 different mp3 files that ranged from 1 to 3 seconds each.

With the sounds already downloaded, I just created an array of 90 numbers (from 1 to 90) and then I shuffled using a JavaScript method (just google “array shuffle method JavaScript” and you can see how to do that) and so it turned out I already had an array with the random numbers for that game.

At this point, I just needed a timer that every 4 seconds called a method that would subtract the first index from the previously shuffled array and push it into a new array called “calledNumbers”. So I already had an application that every 4 seconds would move a number from the “availableNumbers” to the “calledNumbers” array. I just needed to add some visuals and link it with the sounds.

For the visuals, I just added a place to show the last said number, a list of all the numbers differentiating if they had been called or not (by changing its background) and a place to put a “play” and “pause” button that would just activate or deactivate the created timer.

For the sounds, I had named the mp3 files with the number as the file name (e.g: 23.mp3) so I just had to use the Audio API from JavaScript to load the “../”+number+”.mp3″ file and then use the “play” method every time that a number was moved from one list to another.

Having that into place, everything was already working, and I asked a couple of friends to test it…

The UI was ugly, but I didn’t want them to test that, I wanted to test the “logic” behind the application, and I found out that worked fine but that sometimes the audio was not loaded fast enough…

For that reason, and after googling a little, I ended up creating a method that when the page is loaded starts loading all the audios in the same order as the shuffled array, and until all the audios are not preloaded, the game does not start, having the sounds ready at any moment once the game starts. The solution was based on this answer: https://stackoverflow.com/a/31351186

And that was all… I had a working application that could have been useful a week earlier and that maybe could help someone else. By that time I just looked for an available domain and I published it.

Not sure yet how to spread the word… it’s not something that people uses daily… I guess I’ll have to try paid ads to narrow the public that may use it, I never did it before, so could be a good option to try it.

In addition, I already have a few improvements I would like to apply, so while launching and waiting for some users, I can start developing them, at the end there are still a couple of weeks from this month to polish the app and see if it gets traction before jumping on something else…

If you read until this point, thank you for your time, and if you have any doubt, suggestion or just wanna talk about anything, you can find me on Twitter @txordy.

,

One response to “Building a Bingo game with JavaScript”

Leave a Reply

Your email address will not be published. Required fields are marked *