This week, I was inspired by a video on Minesweeper Patterns and wanted to create something similar in an interactive form online.
I spent a significant time looking for a minesweeper image asset. There were some nice ones in Wikimedia Commons but they had attribution requirements. I didn’t really understand creative commons licenses before, so I spent some time researching it. Creative commons licenses on a baseline require attribution. Additionally, based on the license type they may prohibit commercial work, derivative work and continuation of the license.
My favourite license are assets in the public domain, or CC0, where creators give up their copyright. I don’t really want to clutter my webpage with attribution, so I prefer public domain assets. I was able to find a nice image set in the public domain, thanks to eugeneloza. I had a nice set of all the numbers, mine, flag, hidden and revealed tiles.
After that, I attempting to display a grid of images. This builds up on the past week’s website, as I use a canvas with onload to draw the image in. I struggled a bit with the syntax, but I was able to figure it out. I wanted to dynamically load the canvas size based on the size of the images, but resizing the canvas would cause prior canvas and loaded images to be cleared. I attempted to resize the canvas by putting a condition to resize on the first image loading. Then I realised that JavaScript actually loads images asynchronously, which was causing the loaded images to be already cleared. I decided to just hardcode the canvas size for now.
The next issue was having the images appear side by side each other. I was passing an array of image paths. To determine their location I used modulus on the iteration variable to set the starting x coordinate and took the floor of the iteration variable. These were then multiplied by the scaled width and heights of the images, which allowed me to set the correct location of the images. It worked surprisingly better than expected, as I felt a lot of pain in the past from dealing with CSS and its padding, which I still don't get.
For next week, I would like to have some sort of function that can convert an input into an array of image paths, so I can have different image patterns. I would also like to add in the functionality for left click to identify safe tiles and right click to put flags. Then there needs to be some sort of logic to check if that was correct or not.
Learnings