This is more or less a proof of concept around building a match 3 game using JavaScript and CSS without any kind of framework or sort of game based library.
A key thing I wanted to achieve with this was to make a match 3 using the DOM instead of canvas, particularly with flexbox. Beyond that, I didn't even want to use jQuery (but I did because I got tired of writing out document.findElementById, etc).
Play it here - opening your console helps too
I wanted to toss out a special thanks / acknowledgement to an article I read here just talking about match 3 logic that I used to get started with the basics of setting up a board and the basics of throwing together a match 3. While I ended up deviating from it significantly, it was a good read to get me started.
It's pretty simple to play around with - basically just open the index.html in your favourite browser and start matching 3. You'll probably want to open the console so you can see when you're out of moves and your score.
-
This isn't flawless or anything but it satisfied enough of what I set out to do that I felt like I could take the next step and try to do something a little bit more serious with this in it.
-
Flexbox is a pretty core part of the cascading effects that I made, if your browser doesn't support flexbox, this probably looks an awful lot like rubbish
-
This was actually really fun to do, and I'd love to hear from anyone taking a look at it!