Project Connect Snake

Posted by Brahm Lower on Thu 16 August 2018

Table of Contents


This is a whimsical project implementing Snake on an image of the Connect Four box art. The game can be played here, and source code can be found on github.


This is a very brief post about a project I start back in February 2018 called Connect Snake. This past weekend I finished it to a point where I'm decently proud of it and feel comfortable sharing it with the world (most of my projects never see the light of day because I don't think they're good enough).

Project Background & Goals

So what's Connect Snake. There's a meme playing fun on the box art for the Connect Four game, and at one point while mindlessly browsing imgur, I came across the following gif (I've since found a higher quality video source):

As far as I could tell, this was just a gif made by manually editing the image and compiling it into a gif rather than a screen recording of an actual game. But hey! Snake is moderately enjoyable- I wanna actually play this! So I set out to write it.

My only real project goal was to learn more about frontend development and the Javascript ecosystem since I'm a little rustier on that front. This ulitmately had me learning about the following libraries and technologies:

  • npm
  • creating an npm module
  • webpack
  • general js dev tooling (serve, eslint)


I really only spent about a day working on it initially before life got in the way again (I began preparing to move out of Alaska), so I only got it to a just-barely-working state. Certainly not one that was easy to integrate into a site or anything. And so the project lay dormant until last weekend when I saw an Imgur gallery with the Connect Four memes. I spent the day wrapping up the project and making it properly easy to embed on a webpage.

Though I don't plan to work on it much in the future, there are few features that would add a lot of value to the project:

  • Configurable path for static resources (/my/custom/path/board.png rather than /static/board.png)
  • Configurable key bindings for controls. This would allow such things as AWSD instead of arrow keys. This could be taken a step further and could be event driven instead, which would make it easier to add mobile support
  • Track score. This sounds kinda silly since the snake can't get too big, but still, we're humans and we like being able to quantify things. Especially our successes 😀
  • Progressively increase speed of snake as it gets longer. Slow snake is easy mode.

So how does it compare you ask? The following is unedited in engine gameplay! It's no AAA production, or next-gen minecraft killer, but it's enough for a quick chuckle.

look how long my snake is