Streaming live at 10am (PST)

How to create simple memory game / matching game

Hi :smiley:

I would like to build an easy easy memory game or matching game (without CMS) with a total of 12 cards (so 6 combinations).

In the specific this would be the scenario:

  1. On click the card (div) flips and shows the back
  2. On click on another card (div) if they match they should stay visible, if not they should flip back
  3. If 2 cards macth a feedback popup should appear (so a total of 6 different pop-ups).

Is that possible in Webflow?

Any tips on how can I achieve this?

Thanks in advance!

Hi @NoCodeDev, thanks for the great question.

At the moment it is not yet possible natively to make an evaluation of some conditions when an interaction occurs, i.e. it is not possible to have one interaction trigger another interaction (or not trigger) based on the other element’s value or style.

I am looking forward to great things in the future, take a peek at what’s coming: Announcing Memberships, Logic, and more at No-Code Conf 2021 | Webflow Blog

This might be done using a little javascript or jquery to do the conditional logic and use Webflow interactions to for the card flipping and creating a feedback popup window.

With custom code you can use for example, the jQuery click event by class name to trigger the interaction that is also using class based targeting.

Then in custom code you could do your conditional logic and trigger the interaction necessary to make the cards flip or not, such as “if two cards match that have some same value or attribute etc, then both should be visible, else trigger the card flip to hide the card face”

Just thinking out loud on this, I try to do most things using nocode, and it is easy to use click events to trigger mouse click interactions.

Sometimes a little javascript or jquery goes a long way to do supplemental things. I am just a simple guy who loves html and css, so other simple ideas would be interesting to hear.

Webflow allows to use custom code in the following places:
1. In the Head or Footer of custom code in Project or Page settings
2. In a Custom Code Embed element placed in the page body on the canvas
3. In a Rich Text field in the CMS

I hope this helps to give some idea there.

2 Likes

@NoCodeDev Also if your JS knowledge is not perfect you may check this visual builder :slightly_smiling_face:

2 Likes

Many thanks! Will look into it!

Woah! This tool rocks! Thanks, I think it can help me a lot!