Developing a Snake Game With JavaScript
The game is available here.
I find this snake game project mildly ironic, as I have built this game without using any code from its namesake and all-time favourite language of mine — Python — which would have been quite punny.
Nevertheless, as they say — horses for courses — a web application without the need for any backend would not require the use of Python. As this game resides completely at the client side, JavaScript would have been the perfect choice.
Most importantly, the HTML and JS code have been largely built from the original codebase from Straker’s Github page. To be sure, I did not copy and paste wholesale. Where possible, I tried to analyse line by line as this was a learning project, refactoring where appropriate that reflects my understanding or style. To make the game more fun, I have also added the following features:
- Current Score — a counter to track the score of the current game
- High Score — the highest score achieved by the player
- Pause — the ability to pause and unpause by pressing the space bar
- Mobile playability — added a few directional buttons that appear only when the screen is small enough; a pause/play button is also included — this is still very much in alpha phase
The github page of my snake project is here.
Refactoring
In terms of the organisation of the code, I split the files into separate .html, .css and .js files to make the codebase more modular, and that was what the Harvard CS50 course taught me.
Github
This project has also been useful in teaching me how code goes from development to deployment, to hosting in the cloud, which for now is free, courtesy of Github. I started out using VS Code and its tools to Git add, commit and push. Latterly, I have been modifying code directly on the Github portal.
Current Score
I create a scoreboard that tracks the snake’s progress in the current game. Whenever the snake dies — by coming in contact with itself — the variable score is reset to 0.
High Score
I keep track of the highest score until the page is reloaded. Every time a new high score is achieved, the hiscore variable is updated and the new score reflected on the webpage promptly.
Pause
Now, the way I have done this is completely not idiomatic. In the absence of a succinct solution, I have resorted to just forcing an error by calling a non-existent function. As the recursive loop still works, once the pause is removed the error would no longer be thrown and the rest of the code would be executed as per normal. I know that this is extremely hacky but it works for now.
Mobile Playability
In order for me to play the game on my iPhone, I have also added a few buttons to control the snake and pause the game. An unfortunate limitation of this approach is that I have been experiencing a small but significant lag in response time, making the game much harder to play hence less enjoyable on mobile. I read online that this is due to a deliberate lag imposed to prevent the phone from reading swipes as taps.
Regardless, having a functional game that you tinkered with on your phone was quite an experience for me.
The directional and pause functions in JavaScript above contain the code to be executed upon tapping the corresponding buttons within the webpage, as described in HTML5 in lines 25 to 29 below. Some simple lines of code describing the scoreboards are also detailed within.
Reflections
This is the first project where I have proactively embraced the open-source movement, giving up on insisting to write everything from scratch to incorporating what already works — with permission (if required) and attribution — and building from there.
And while I still very much like Python’s ease of use and elegant syntax, this project is proof that I can hunker down and work towards a challenging goal with alternative tools, more directly suited to the task.
While the languages might be different, the underlying algorithm remains the same. With varied possibilities and new frontiers, the learning journey continues.
