•  Fix responsive layout issues
• Use screen areas or swap to control the direction
• Add some question mark popup explaining how to play on mobile

If you change the direction too quickly it will skip the conditional check to not turn back and collapse with the first body piece.

It should allow only one direction change per each interval iteration.

After the game is over, if you try to play again using the button that resets everything it does not work as expected.

• Last food remains on the board.
• New snake appears in the correct position, but the previous one is still in the board.
• New snake cannot move, this could be because it's using the previous snake head instead of the new one.

I tried hitting the button while the game was running to see what would happen. It didn't reset anything which seems great, but it did play the sound like it's starting up again. If that sound should be disabled that's a really quick fix. However, if you do want a sound playing for UX feedback, I'd suggest playing a different, more "error-y" sound to indicate the button isn't working right now (which would match up with the button changing it's style during play).

Alternative solutions:

• Don't even let the user click on the button during play (make the button actually disabled while the game is running)
• Change the Play button to a Stop button during gameplay

I was wondering if you'd considered using TypeScript for this app! I've always found TypeScript makes working JavaScript a lot nicer for me personally, and it's helped me keep my code cleaner. If you're interested, I'd be willing to convert it over to TypeScript. :)

There are three sounds related to actions in the game, but they play with some lag. It's downloading them each time.

So, if possible, the game should download the 3 wav files just when loading the page, and consume them for every action without downloading again.

Food generation sometimes creates a new square outside the main board