Including a p5.js project in this website (Minesweeper 💣)

- 482 words -

The first posts I wrote on this site and which were about p5.js applications are based on code that I wrote before creating the site. As I already hosted the applications on their own Github pages it was easier to simply have a link to these pages in the posts. For example check my cellular automata post.

Now that this site is created I wanted to see how I could integrate a p5.js application directly in its pages. This is now done with this simple minesweeper demo. It didn't required a lot of work other than adding a call to a cdn in the post source to get p5.js and updating my .eleventy.js to add .js files to the list of template files to compile.

For now I am happy with this test but there are still a few things I'd like to test:

Check how to put this kind on posts in their own Github repo and add them to the site's source code as git submodules
Check how I can integrate a framework like Vue.js to avoid having to create my own interface.js with some ugly functions to update the UI and send the data to the p5.js sketch
Investigate how to make this kind of demo more mobile friendly because for now it clearly doesn't work on a touch screen

The minesweeper

To create this first p5.js integrated demo I wanted something simple to code which I could have running pretty fast. Recreating a minesweeper has several advantages:

This is a well known game which wouldn't require me to do some research on how to make its UI or which corner cases rules exist.
It includes a kind of maze solving algorithm to automatically open the cells clicked when they are not near a mine. And I love this kind of algorithm, even though this one is fairly short and simple.
It is a nice way to prepare a future project of creating a minesweeper on an hexagonal grid. Actually that was my initial project but I realized that it's not as trivial as I would have expected and thus it would be better to make it a completely seperated project.

There are still a number of features I'd like to implement even in this squared grid minesweeper like having a deterministic grid (i.e. not having cases where the user has to choose a cell randomly), having cells with several mines to make it a bit harder to play, adding a zoom feature to be able to have larger grids or even creating an AI which would open the cases based on probabilities... But for now that's a nice little demo, even though I must admit that it was more fun to create it than to play with it (because personally I find minesweeper to be a terribly boring game!)

The demo

Grid size Filling ratio

0 0

← Posts

Posts in the same category: [p5]

Jun 2020 Circle packing algorithm (with kittens 🐱)
Sep 2020 Birds flock simulation

The stuff I do