The more the snake grows the faster it gets and the more difficult it is to navigate.
The game is more addictive than you would think. Unfortunately the code does not work with touch at this point.
The source code is very simple, but the UI for this version is rather lacking. Since updating this code repository I found a few other repositories with slightly better user interfaces. I am hoping to get some time in the near future to update the UI and make it touch enabled.
To play the game you can use the four arrow keys on your keyboard to direct the snake. Just don't run out of room or hit the snake!
Making a Progressive Web App
cacheList = [ "/", "css/main-snake.css", "css/dark-snake.css", "css/images/dark-snakeblock.png", "css/images/dead-dark-snakeblock.png", "css/images/deadblock_border.png", "css/images/deadblock.png", "css/images/snakeblock.png", "js/snake.js" ];
I did add some basic elements to the page's HEAD element to set the viewport, reference the web manifest file and set the theme-color. I am finding when I match the theme color meta value to the web manifest theme-color value helps trigger the add to home screen prompt.
But here is the real issue. To qualify as a real progressive web application the site needs to work well on all screen sizes. If you run the Lighthouse PWA tests you will find some issues, specifically it says the app does nto render well on small viewports.
Wrapping It Up
The add to homescreen prompt is not being triggered in this first iteration because it is not responsive. It also needs to have touch support added.
I will let you know when I get these features added.
So far these have been very simple applications. Just wait there are more to come in the coming days! So be sure to sign up for my newsletter.
If you are new to Progressive Web Apps or want to learn more about creating your own PWA, you need to enroll in my course: Progressive Web Apps (PWA) From Beginner to Expert. Save 85% off the list price! Right now it is only $29 (US), $171 off the regular $200 price.
The course has over 21 hours of video content and more planned in the coming days. So be sure to enroll and start your PWA journey now!