Classic Snake Game using LLMs
Image Credit: Generated using Google Imagen3.
Intro
Last August, I have spent a week trying to create working applications using GenAI models. These were meant to be useful for me and my kids and to assess the capabilities of the then popular LLMs like ChatGPT, Claude, and Gemini. You can find them here https://vijay.eu/projects/
My initial experience
This was my experience back then: Ask each LLM to generate code for a project, copy the code into local files, test it locally, come up with new suggestions and then rinse and repeat until I found the project working well as per my expectation.
For this exercise I have used: Anthropic Claude, Google Gemini, and OpenAI ChatGPT. Each had a different way of generating code, handling code changes on top of existing code and updating code.
From my experience at that time, Anthropic Claude understood prompts really well and generated code much better than all other LLMs. The quality of code was way better than others. One major advantage was Claude Artifacts. This was a deal breaker for me and game changer for testing quick prototypes in the chat window itself. Also Claude allowed you to host the code and gave you an URL to share with your friends. Getting the html files and testing locally also worked seemlessly. It let you download the files. No copy pasting code from the chat window, which was the case for the remaining two LLMs.
New Challenge
Then came the other challenge. My website(https://vijay.eu) is based on Hugo and it is a static website hosted on GitHub Pages. GitHub delivers the static webpages to your mobile/computer when you open my website. There is no dynamic content in my website so there is no need of backend server to process the requests.
I wanted to host my projects created using LLMs also on my website. This means, those projects should be fully static and should not require a backend server to handle any requests for the frontend running in user’s mobile or computer.
Hugo uses templating which simplifies adding new posts, which means all posts have the same header, footer, common javascript and common CSS. However for my projects, most of the magic is handled as part of Javascript and CSS.
I spent several hours tweaking the code, explaining this to LLMs and asking them to generate the code which works with my existing hugo code. This took quite an effort and took several trial and errors before the first project worked. When I wanted to create a second flag game I had to do all this over again as it included a different design and there were upto ten questions each coming one after another. I enjoyed building those games but thought these should have been handled automatically for me.
Current experience with LLMs
Today after four months, I wanted to check how far these LLMs have improved. So I decided to create classic snake game for my kids to play. Asked the same prompt to Claude, Gemini and ChatGPT. ChatGPT has new feature similar to Claude’s artifact. ChatGPT created the code and displayed the code and demo window. When I pressed Preview, it kinda worked until the green snake (a single green square) ate the first red square. After that it all went haywire. There were multiple red squares appearing randomly across the box and the green square does not move.
Gemini generated code in a window and no option to run locally in the window. Copied the code to my computer and ran it locally. It didn’t work. There was a black box and nothing else. No red or green squares.
Now, Claude generated perfectly working code, tested it in the artifact window and also customized the code to work with my hugo website. It also gave me instructions to add shortcodes in my hugo to add new javascript and css for this game. I felt the snake was moving too fast and asked Claude to generate new version to add three different speeds. It did on first try. I have tested it locally then added it my blog and pushed the changes. You can try this snake game on my website at https://vijay.eu/projects/snake-game/
Winner this time
So, in this second round of my game benchmarking of LLMs, the winner is Anthropic Claude :)
My Thoughts
These LLMs are now getting more advanced, producing error free code and understanding user prompts much better. This took me 10 minutes to prompt, test, download and push it to my website. TEN minutes from getting the idea to publishing it live on my website. This is A-W-E-S-O-M-E. You just have to imagine and you have unlimited digital workers, a.k.a LLMs, realizing those dreams for you. Democratizing code for everyone. This gives more power to people who can create end-to-end projects from idea to design to code to deploying it in real world production.
How was your experience working with LLMs? What difference have you observed over the last six months?
If you are new to my posts, I regularly post about AWS, EKS, Kubernetes and Cloud computing related topics. Do follow me in LinkedIn and visit my dev.to posts. You can find all my previous blog posts in my blog