A proof of concept math three game using javascript and CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
.gitignore
README.md
_config.yml
index.html
package.json

README.md

Intro

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).

Demo

Play it here - opening your console helps too

Special Thanks

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.

Getting 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.

I wanted to mention . . .

  • 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!