My experience building a Snake game with Brython
“Wait, what?” is how I expect most people to react to the title of this article.
What do you mean by “Just Use Browser Python”?
Well, below is a screenshot of my personal website’s source code, see if you notice something different:
Yes, it’s Python!
And now, let’s talk about how that works, how well it works, and what other alternatives to browser JS exist out there.
And since writing Python for the browser sounds pretty cool, I decided to give it a shot.
Building Snake with Brython
In order to give Brython a test run, I decided to build the classic snake game.
Oh yeah, and the guy built that in less than 5 minutes. Props to Chris DeLeon, that’s extra impressive.
So, on top of Chris’ implementation, I added a score and high score functionality, a little bit of a better interface, a pause button, and an instructions button. Then, I ported it to Brython.
Actually, I also modified his code to something that runs in JS
While most of the Brython code was a “direct translation” of the JS, some parts, like the score functionality, I built directly in Brython and then implemented in JS, to see how it felt.
The final result is this:
So, based on that snippet, let’s break down some of the key concepts about Brython:
No installation is required for Brython. Just import the script inside
In order for Brython to convert and evaluate the Python code as if it were normal JS, we need to call
brython right when the document’s body loads, like so:
This will search for script tags of type
text/python and evaluate the code inside.
window objects, which are essential in any JS project. As such, Brython must have a way to incorporate these as well.
To solve this, the creators of Brython could simply have allowed developers to immediately access
window by default in their Python code, but that would cause Python debuggers to scream
undefined variable all the time and would be worse for performance.
Thus, to make use of these Web APIs, we have to import them just like we would do with any Python module:
from browser import document, html, window
Now, you don’t actually have to
pip install these. After all, we’re writing this into our HTML! Just include the import statements and you’re good — Brython will know what to do.
To see how well this works, I made a point out of trying a few different methods from the Web APIs, such as
addEventListener , etc. Everything worked as expected.
In Snake, once the snake eats the apple, we need to generate a new apple at a random location.
However, when I started off with Brython, I didn’t know I could use Python’s
random module (you can!). So how could I generate a random number (without building my own library)?
In Python, if I want to unpack a list, I can do
list2 = [*list1] . Also, if I want to set a variable’s value based on a condition, I use
foo = 10 if condition else 20 .
[...arr] ) and the ternary operator (
let foo = condition ? 10 : 20 ).
But does Brython support them?
I tried them out and it worked just fine. You’ll see that Python list unpacking and conditional assignment are included in my final source code.
Honestly, I thought debugging Brython was going to be horrible.
However, it’s actually not that bad.
Granted, what I built is a small project which isn’t very complicated, but the errors thrown by Brython were mostly accurate and rather descriptive.
That is true with regards to syntax issues, at least. Importing Python modules is a different ball game.
For more complex projects, I suspect Brython will be multiple times slower than pure JS.
I did try to use the Brython Editor to convert my Brython code into JS and run the actual JS on the webpage, but that was throwing so many errors that I decided to put it aside for now. I didn’t put much effort into it though.
Final Thoughts on Brython
Honestly, I was quite impressed with Brython. Here are some pros and cons from my own experience with the language:
- I managed to build a snake game without too much hassle and a surprisingly positive debugging experience
- I appreciate the fact that my code looks cleaner in Python, and the fact that I can make use of helpful Python syntax to write code for the browser
- Seeing Python in my website’s source code made me happy
- Runtime Brython is significantly slower that pure JS
- You will inevitably run into more errors
- The Brython Docs and website are not the nicest to navigate and learn from
- Brython lacks a strong ecosystem and development tools
Overall, having finished my first project with Brython, I can confidently say I will try it again at some point.
Other Alternatives to Browser JS
However, there are other alternatives out there.
Pyodide seems like an interesting one, for example. It compiles Python (along with its scientific libraries) to WebAssembly, which allows it to run in the browser.
WebAssembly, as the name suggests, is an assembly language for the web. Just as Assembly in our computers can work as an intermediary between high-level languages and machine code, WebAssembly can allow the same thing to happen on the web.
Thus, one can write a compiler for Python, or any other language, to WebAssembly, which would allow it to run in the browser.
But honestly, that’s not a bad start!
Author’s Note ✍️
Thanks for reading! If you believe this article was useful, feel free to support me with some claps 👏👏.
This article is part of my series of Programming Tutorials. Here are some of the other tutorials on the list: