I wanted to do this for a while but I thought I needed to use custom code! Then I saw Sarkis explaining some of the methods he was using for his own upcoming memory game and figured it out from there. I've always been excited by the idea of creating games within Webflow and I wanted to learn some more advanced techniques. I now see there's a whole load of possibilities - even if it is slightly complicated to get there!

What it does

It's a simple pairs matching game where you have to remember where cards are and find the pairs. If you don't manage within the time limit you get a failure screen, but if you match all the pairs you'll see the success message!

How I built it

I used a load of hidden divs that act as triggers for different things sitting on top of the cards. Some of them are also using conditional visibility via the CMS so that I can only show certain ones. I actually will probably rebuild it now that I've figured it out as the structure could be more efficient!

Challenges I ran into

Pretty much every time I did something it broke something else... Webflow isn't massively set up for this so often I had to rethink and change tactic!

Accomplishments that I'm proud of

Making it worrrrrrk.

What I learned

You can do a lot more with Webflow than you think once you start using these techniques... but it does hurt your head!

What's next for Sia Sia Bowie Bowie Giraffe Giraffe - Memory Matching Game

I want to do a more complete version, make it mobile friendly and add more difficulty, maybe multiple levels... we'll see!

Built With

+ 4 more
Share this project: