🎨 WDC #9 Can you re-create Shailesh's Memory Game App?

Thanks a million to everyone who helped out with last weekend’s challenge (special mention to @catsarisky and @codeswept who submitted fully functioning apps!)

This week we have a fun one for you all! I spotted a neat game on dev.to by Shailesh Parmar. In the past, Shailesh has built clones of WhatsApp, Spotify and Netflix himself so I thought it would be cool if we used one of his apps for inspiration this week.

What do think - can you recreate his Memory Game?

You can try this game out for yourself here:
https://shaileshparmar-webdeveloper.github.io/memory-game/

This is one of those projects that you could probably spend months on but here are a couple of features I spotted that you might incorporate into your project:

  1. Ask the user for their name on Screen1 and greet them by name on Screen2
  2. The animation component does have a click event handler, animation_click but you could just as easily use buttons here.
  3. Figuring out if that cards are a pair is one challenge
  4. Creating a randomly distributed board of cards is another challenge entirely
  5. I really like the “congrats” gif when the game is completed
  6. You can add difficulty levels, count the number of moves, track the time taken to complete a board, set a time to complete each board in, add in a points system, move up to a harder board after an easier on is completed…the list goes on and on here, and all of that is before you’ve even picked your colour. scheme, a theme for your cards, icons etc etc.

I’m going to try to submit an entry myself again this weekend but I’m also delighted to announce that @jane will be joining us as a “Special Guest Thunker” for this particular challenge too!

Best of luck to everyone and, as always, really looking forward to seeing all the creative ideas you come up with!

cc: @luv.ak.tech @manyone @roumak-coder @kartik14 @thg @tatiang @muhaeminz @krithikvasan6m1 @aanshi6 @jared @Chris @skulamester @muneer @cyberdriver

4 Likes

Community Resources

Links that are shared by the Community during the challenge.

Summary of Entries:

Collection of /projectPage/ links for all entries

@tatiang created Memorzzle, which is a memory game and a jigsaw rolled into one. There’s a web app if you want to try it out and a project page if you want to remix for yourself.


@catsarisky created this Easter-themed web app. There’s a really nice colour changing animation when you click on each card, a global high score board powered by Firebase and 4 difficult levels:


@codeswept created “RAMory Game” with sound effects and a lots of tiles to keep track of with your working memory - definitely my favourite project name this week I think! Here’s the project page if you want to remix it.


@jane “Thunkified” the app by creating a Thunkable Beaver theme and built out the whole thing in just 132 blocks. The remixable project is available to play here


@domhnallohanlon added a “Dark Mode” to the app while keeping the functionality to a single level with counters for number of pairs and number of turns. You can remix the project here

Next Up

Check out the summary for WeekendDesignChallenge #10 here:

1 Like

i am in
ps:do we have to make exactly like that?time?

No - it’s just for inspiration! If you have no idea of what to build then copy the reference project but if you have a concept/theme you want to work around then go for it!


This weekend! :joy: Post your apps on Monday to be featured in the round-up!

ok thanks for the info

Yay @jane! And thanks, @domhnallohanlon for all the great suggestions… definitely feelin’ inspired by that list.

3 Likes

@dom How do I make the levels?? Like medium hard and easy

That is entirely up to you, whether or not you want the levels. They’re just a great feature to add. Also, you can tag him like this @domhnallohanlon

Missed this post. I remember writing a memory game in robo basic (TRS80) then again in QBasic using graphics. I actually managed to sell it with royalties. This would be a good one to learn the canvas. Might see what the results are here. Cool comp

2 Likes

Hey @krithikvasan6m1

So first off, I’d recommend building it with just the 8 cards as per the example app.

You’ll also need to play the game a bit to get a feel for how it works (yay - playing games for research)

The “levels” might just be an extra pair of cards? It could be a shorter amount of time to complete the board? There are lots of things you might do here - it’s a design challenge so I’m really interested in seeing the ideas and concepts that people come up with.

My list was just for guidance and there’s no requirement that you must include everything on the list - take a look at the previous two challenges in particular to see how folks expanded on the ideas from the original brief and created something that was their own interpretation.


Nice!


Absolutely!


Thank you!

1 Like

Here’s a sneak preview! My idea is to combine memory with a puzzle game. So once you match two cards, you get to use that piece to solve a jigsaw puzzle. I’ve only coded the memory part so far. It generates a random arrangement of cards each time you play.

I used a single button component and lots of cloning and dynamic access (using Any Component blocks) to the button properties. And the legacy interface. The image is a Creative Commons image that I split using Split image online. I meant for this to be a difficult memory game. There’s no sound yet.

And because it’s all dynamic, it should be really easy to add different card images or even let the user select a set of images.

Note that the card cloning is a little slow in the video because I wanted to make sure it worked. I’ve sped it up already in version 2 which you’ll get to see soon…

Edit: Here’s a different image swapped in, found in The Met’s Open Access collection:

4 Likes

This is a great idea @tatiang - thank you for the sneak peak!

Great resource - thanks for sharing. Given that we’ve seen quite a few questions about Cloudinary this week it got me wondering if this could be done via their API? A quick search suggests that it can be done manually but they done have any filter/endpoint specifically for it…anyway…one for a different challenge maybe? :joy:


Update:

ok let’s collect all these great resources in one place for increased visibiity!

3 Likes

Do we need to code it?? Or is it a design challenge??

both

OK working on it

1 Like

Congrats on figuring out how to use the webviewer @krithikvasan6m1 - it’s certainly a useful tool!

One of the awesome things about these challenges is that they’re a chance to learn and develop new skills in Thunkable. Did you learn something new by putting the original website into a webviewer?

Yes Sorry, :pensive:

i have started the work now
thinking to put 20 lvls in the app
edit 2021-04-01T18:30:00Z : i have made the base UI and 9 lvls and now i am coding the lvls

I picked a theme! Now I just need to program it! :slight_smile:

image (icons from http://icons8.com)

3 Likes