Wibbles - W(eb) (N)ibbles - Recreating "The Worm", Snake, Nibbles and the like
Tags: programming, gamedev, webdev, showdev
Published: 2022-11-30 19:03:24

Do you remember [NIBBLES.BAS](https://en.wikipedia.org/wiki/Nibbles_(video_game)) from your old DOS Computer? Well I do. But I also remember ["Der Wurm"/"The Worm"](http://www.dngames.de/old/wurm.html) by "Digital Nightmares". I spent days playing it as a child. Also the multi player mode was a lot of fun.

Wibbles (Nibbles on the Web) is a Snake variant that takes the concept of "Der Wurm"/"The Worm" and ports it to the web.

## Why?

In a nostalgic moment I remembered The Worm and [found it on archive.org](https://archive.org/search.php?query=digital%20nightmares%20The%20Worm&and[]=mediatype%3A%22software%22). It was unplayable, mainly because the animation between levels was too slooooow. Also the graphics are unproportional and the longer the worm got, the slower it moved.

I often browsed https://opengameart.org and wished I had a good idea for a side project game, where I could use some of these sprites.

Since I wanted to practice [clean code](https://www.amazon.com/dp/0132350882/) and [TDD](https://en.wikipedia.org/wiki/Test-driven_development) I was looking for a side project anyway. (Spoiler: Clean Code is a work in progress. I failed at TDD.)

{% embed https://www.reddit.com/r/ProgrammerHumor/comments/92b3pn/side_projects/ %}

Since side projects are something that never gets done (I got side-tracked by the multiplayer part). I defined an MVP and hoped to release it, before the next thing got interesting. 

This is it - The MVP of Wibbles:

Play it on https://htho.github.io/wibbles/

See the source on https://github.com/htho/wibbles/

[![Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1dykdubucsw2s1wsayt.png)](https://htho.github.io/wibbles/)

## State

Of course its in an early alpha state, but already playable.

There are only two maps which are quickly played. But it is easy to add more maps.

A lot of stuff is missing. Like an UI with information about the game, level, points and the like.

I'd like to implement a multi-player mode and share my experiences doing that.

The tiles have a border in Firefox.

## A Series?

This is a series of articles because I want to share valueable insights I got when I created the game. These are some topics I'd like to write about:

* I use the [Dispose Pattern](https://en.wikipedia.org/wiki/Dispose_pattern) to make sure EventListeners are removed when I don't need them anymore.
* For the multiplayer mode I prototyped a [signaling server for WebRTC](https://dev.to/michaelneu/i-webrtc-you-building-a-video-chat-in-javascript-2j38#signalling) in php. As I am used to JavaScript/TypeScript tooling, writing php only using free tooling feels like editing in notepad again.
* I reverse engineered some aspects of the original game digging through the binaries. Although I don't use any of them, I think some people might find that interesting.
* Rendering/Algorithms: NIBBLES.BAS and Snake are very simple because they move one tile at a time. For wibbles stuff gets complicated because movement is not time dependent but frame dependent.
* More Patterns...

## And Now?

Please give the game a try. I am looking forward to get your feedback. I even take contributions on GitHub.

Have Fun!