I recently followed a tutorial from @CarnesBeau with freeCodeCamp.org. The project was to make a Simon Game ala the game from Hasbro from the late 70s, early 80s. I decided to make some improvements on it. I recorded my own sounds on my keyboard in Ableton Live, added an error sound and made the game responsive to work on mobile as his tutorial was not.
The game works perfectly on desktop, but I’ve noticed some glitches on mobile when I try to play it on my cellphone. Mainly, it seems that if the same color lights up twice in a row, the sound only happens the first time and occasionally the sounds seem to not play on the first move or randomly. (This was already happening before I added my own sounds, so that isn’t the problem.)
Some thoughts – I read something about mobile browsers having a 300ms delay, but I believe this is no longer the case, so I’m not sure if that has any bearing on the problem. There are some places in the code where setTimeout is used with certain delays, I’m not sure if that could be related to the problem. The final thought I had was that my event listeners are using ‘click’ events. I wasn’t sure if I need to add ‘touch’ events as well for mobile? It seems that the mobile browsers (I’ve tried both Chrome and Safari) treat the ‘click’ event as a ‘touch’ event anyway. I’ve searched a lot for help and have tweaked a few things in the code, but haven’t found the problem yet. Any help anyone can offer is much appreciated and enjoy a good game of Simon! If you get to 20 rounds, you win! Here’s a link to the code on Github: