Inspiration

Who doesn’t love a fun snake game?

At university, where people from different cultures and languages come together, imagine how much more we could connect if we spoke each other's languages. That's what inspired us to build SlitherLang, merging the fun and addictive nature of Slither.io with language learning. We combined active recall, muscle memory and gameplay to turn vocabulary practice into something fun and engaging.

What it does

SlitherLang is simple. You're a snake, and every orb around you has a Chinese word and an English word. If they match, eat it and score points. If you mess up, you lose points and a life (don't worry, you've got three).

Collect blue orbs to charge your speed bar and red orbs to gain extra points Every time you swallow a correct orb, the Chinese word is pronounced out loud. If you miss, at the end you’ll get a review list with speaker icons so you can listen and practice the words as many times as you like.

Even if you start knowing nothing by playing and listening to the review words, you’ll actually begin to learn basic Chinese vocabulary without it ever feeling like studying.

How we built it

SlitherLang runs entirely in the browser, built with JavaScript and Phrase.js. We kept things modular with ES6 classes for the snake, orbs, and UI panels, making the game easy to tweak and expand. For smooth development, we used Vite for fast reloads and a clean build process. All movement, collisions, and effects are custom-coded, and we organised our assets and vocab files for easy localisation and scaling.

We pulled from readily available language datasets and wrote a Python script to scrape and convert them into four JSON files for vocab. We also used the browser’s built-in SpeechSynthesis API to generate Mandarin Chinese audio for words.

Best of all, it’s fully client-side, so no downloads required. And yes... the background is inspired by Among Us.

Challenges we ran into

Screen resolutions - the game scaled differently across laptops, so getting the font sizes, snake movement, and UI to look consistent was a challenge. Audio timing - finding a way to trigger the Mandarin word audio exactly when the orb was eaten (without lag or overlap) took a lot of experimenting. Fullscreen mode - making the game run cleanly in full screen without breaking the layout was tricky. There’s a memory leak that occasionally pops up at around 30-50 minutes of game time. If we had more time, fixing that would’ve been high on our list. We also ran into a problem where words with commas in the English translation made the pronunciation engine read out the English instead of the Chinese, but we managed to fix it at the last minute.

Accomplishments that we're proud of

We’re proud of how quickly we managed to develop and deploy SlitherLang. Our teamwork was another big win. Each of us took on different parts of the project, stepped in when someone was stuck, and kept things moving smoothly. And most of all, we’re proud that we actually finished with a playable game that works. We're proud of the different and creative features that we added, such as the different orbs and their purposes. We're also proud of coming up with the idea itself. We think that this has not been done before; we used up quite some time brainstorming this idea.

What we learned

We learned how different it feels to use Git in a team compared to just working solo. Managing branches, merges, and keeping the project in sync was a whole new experience. This project taught us a lot about game development and how a lot of features we took for granted are quite tricky to implement. Our proficiency in game development has definitely improved by this, as well as our ability to work in teams. Overall, we think that this hackathon benefited us greatly, improving our skills and giving us an experience outside of university.

What's next for SlitherLang

Right now, SlitherLang is just at the beginning. We built it around Chinese–English, but we don’t want to stop there. The goal is to bring in multiple languages. We also want to make it more social. Imagine a battle mode: if two snakes collide, they go head-to-head in a quick vocab challenge. Whoever gets the most translations correct in the time limit wins and steals all of their opponent’s points, and of course, the larger snake would have a longer timer for fairness. Multi-device support is also another important point in our future implementations.

SlitherLang encourages friendly competition in two communities, with extra benefits. People from the gaming community would learn a new language on top of doing their favourite activity, and those in the language community will be even more motivated due to the competition, fun repeatability and addictive gameplay.

Built With

Share this project:

Updates