Story

In my first semester, the projects they gave us didn't really entertain me due to my prior experience in coding. Since I was bored, I made a Snake game, but with wall generation. The game now has walls that are procedurally generated.

Is it fun? Kinda. It's harder, for sure. However, I didn't finish the project so the player can just spawn in a wall if the randomness feels like it.

The idea of this came from when I took classes before school. We made a copy of snake, and I was wondering whether it was possible to create a procedurally generated snake with walls. You can find the source code here.

Development

Wall Generation

To make it, there are two major challenges: creating and drawing all the walls. Strangely enough, drawing the walls is the easiest part. The problem with the walls is to draw them efficiently. I remember trying to draw 200 walls and the game run at 5 frames per second.

Noise Map

For the walls, you need to create a perlin noise map. In order to make it, you will need to create a noise map.

To create a noise map, I used averages there is probably a real name for it, but meh. First thing, you generate the first cell with a random number between 0 and 1. This can be achieved by calling Math.random() in JavaScript.
Afterward, each cell will add a random value to the previous cell and clamp the value. In my case, I added a random value between [-0.25 ; 0.25]. This is how I achieved to get data like this:

Blurry Noise Map

Once you have it, I blurred it in order to give smoother walls this is probably not the best way to do it, but meh. Otherwise, you can get a lot of empty spaces. To do this, you just need to take the average of the four neighbors of the cell.
It's important to note that I outputted the result in a different array. If you output your result in the original array, the map will tend to become one shade.

Wall Creation

Once your noise is created, you select which pixel should be a wall. This is determined by the "Tolerance" slider. You simply define the walls as all the cells with a value bigger than the limit.
I also added a check to see if the cell's neighbors are also walls. I'm not sure what this does, but I assume this removes lots of small "islands" of walls.

Area Selection

Once you have walls, you only need to remove the areas unreachable by the player. To choose which areas to remove, you calculate how much tiles the area covers and the one with the highest will be kept. Since you need to travel every tile, I doubt there is a faster way than travelling everything. In this video, I show how the game calculates the number of tiles. Note that this is slowed down for the demonstration. In reality, the game only needs a couple of milliseconds to execute this.

Conclusion

After removing the unreachable areas, the game is ready! The player is spawned at the same position, even if there is a wall. This is the reason why I stopped to work on this. It is really hard to find the best position to spawn the player in when the walls are completely random. Even the food can spawn in an unreachable spot where the player can't exit without dying.