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

**URL:** <https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030>\
**Category:** Teachers' Lounge\
**Tags:** wdc\
**Created:** [April 1, 2021, 4:40pm UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030 "2021-04-01T16:40:31Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [April 1, 2021, 4:40pm UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/1 "2021-04-01T16:40:31Z")

</div>

Thanks a million to everyone who helped out with [last weekend’s challenge](https://community.thunkable.com/t/wdc-8-can-you-re-create-victorias-quote-gallery-using-google-sheets/1189068) (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](https://dev.to/shaileshparmarwebdeveloper/memory-game-using-react-js-3hn3) 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?

![mem_game](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/5/55e2fa4b4f8fb7f52b925fcc3b2001056d11c3b7.gif)

You can try this game out for yourself here:  
[https://shaileshparmar-webdeveloper.github.io/memory-game/](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](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/1/d1f212d83703ca751313f0deacee9d0f9e78b46e.png) 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

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [April 2, 2021, 8:04am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/7 "2021-04-02T08:04:54Z")

</div>

## Community Resources

Links that are shared by the Community during the challenge.

- [Split image online](https://pinetools.com/split-image) for creating smaller images from a larger image. Shared by @tatiang
- icons from [http://icons8.com](http://icons8.com) - shared by @catsarisky

## 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](https://thunkable.site/w/Z4QOmMbPB) if you want to try it out and a [project page](https://x.thunkable.com/copy/e2f39aef83ef2662cfc2f0e58bbfcd58) if you want to remix for yourself.

 ![tatiang](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/a/d/ad7528e11f8c0a27d05f25b1457c450808d26cce.png)

* * *

@catsarisky created this Easter-themed [web app](https://thunkable.site/w/HVOI7XgLG). 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:

 ![catsarisky](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/8/b/8b154188ed63d0af5e0a7edb6e1e500718f9a002.png)

* * *

@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](https://x.thunkable.com/projectPage/6066b6a60b543700119ae3e7) if you want to remix it.

 ![codeswept](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/9/0/90062089468794d0c6ec269b6bb65e1ea95a2d78.png)

* * *

@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](https://x.thunkable.com/projectPage/6066d2cab581000012a7e345)

 ![jane](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/4/f4f1173a05d825b16cc9fe33b09b8591348bc8aa.png)

* * *

@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](https://x.thunkable.com/projectPage/606749b9ac2c0c00121ba921)

 ![dark_mode](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/2/e245e4684ff892713562e898a29e4e76005f7e12.png)

### Next Up

Check out the summary for WeekendDesignChallenge #10 here:

> [@art WDC #10 Can you re-create Randall's password generator?](https://community.thunkable.com/t/wdc-10-can-you-re-create-randalls-password-generator/1213307/2):
>
> Summary of Entries: [PassNerds](https://community.thunkable.com/t/wdc-10-can-you-re-create-randalls-password-generator/1213307/28) by @codeswept[image] [Pass Gen](https://community.thunkable.com/t/wdc-10-can-you-re-create-randalls-password-generator/1213307/31) by @manyone[image] [Random Password Generator](https://community.thunkable.com/t/wdc-10-can-you-re-create-randalls-password-generator/1213307/40) by @codeemaker[image] [EncryptText](https://community.thunkable.com/t/wdc-10-can-you-re-create-randalls-password-generator/1213307/48) by @tatiang[image] [CHBS](https://community.thunkable.com/t/wdc-10-can-you-re-create-randalls-password-generator/1213307/59) by @domhnallohanlon[image] [Design Challenge 10](https://community.thunkable.com/t/wdc-10-can-you-re-create-randalls-password-generator/1213307/69) by @arun[image] [Password](https://community.thunkable.com/t/wdc-10-can-you-re-create-randalls-password-generator/1213307/71) by @roumak-coder[image] Password Generator by @luv.ak.tech[image]

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [April 2, 2021, 4:49am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/8 "2021-04-02T04:49:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [April 2, 2021, 5:16am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/9 "2021-04-02T05:16:13Z")

</div>

> [@eko.devs.apploroceo](#):
>
> exactly like that?

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!

* * *

> [@eko.devs.apploroceo](#):
>
> time?

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

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [April 2, 2021, 5:51am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/10 "2021-04-02T05:51:26Z")

</div>

> [@domhnallohanlon](#):
>
> > [@eko.devs.apploroceo](#):
> >
> > time?
> 
> This weekend! 😂 Post your apps on Monday to be featured in the round-up!

ok thanks for the info

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 2, 2021, 5:51am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/11 "2021-04-02T05:51:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![krithikvasan6m1](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@krithikvasan6m1](https://community.thunkable.com/u/krithikvasan6m1)\
**Post date:** [April 2, 2021, 6:07am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/12 "2021-04-02T06:07:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [April 2, 2021, 6:09am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/13 "2021-04-02T06:09:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![japa6225a](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/japa6225a/32/95982_2.png) [@japa6225a](https://community.thunkable.com/u/japa6225a)\
**Post date:** [April 2, 2021, 6:35am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/14 "2021-04-02T06:35:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [April 2, 2021, 6:36am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/15 "2021-04-02T06:36:30Z")

</div>

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.

* * *

> [@japa6225a](#):
>
> I actually managed to sell it with royalties.

Nice!

* * *

> [@japa6225a](#):
>
> This would be a good one to learn the canvas.

Absolutely!

* * *

> [@japa6225a](#):
>
> Cool comp

Thank you!

---

<div class="post-metadata">

**Author:** ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)\
**Post date:** [April 2, 2021, 7:34am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/16 "2021-04-02T07:34:10Z")

</div>

**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](https://pinetools.com/split-image). 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…

[![]( " - YouTube") ](https://www.youtube.com/watch?v=0Fu5QLdpnzo)

**Edit:** Here’s a different image swapped in, found in [The Met’s Open Access collection](https://www.metmuseum.org/art/collection/search#!?showOnly=highlights%7CwithImage%7CopenAccess&offset=20&pageSize=0&perPage=20&sortBy=Relevance&sortOrder=asc&searchField=All):

 ![Screen Shot 2021-04-02 at 12.53.12 AM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/c/5/c5edb3cd51d8b2ae316e9d069b1a0d391b71d1b9.jpeg)

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [April 2, 2021, 8:00am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/17 "2021-04-02T08:00:06Z")

</div>

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

> [@tatiang](#):
>
> The image is a creative commons image that I split using [Split image online](https://pinetools.com/split-image).

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](https://support.cloudinary.com/hc/en-us/community/posts/360006170260-How-to-split-a-image-into-multiple-images-) but they done have any filter/endpoint specifically for it…anyway…one for a different challenge maybe? 😂

* * *

Update:

> [@domhnallohanlon](#):
>
> Links that are shared by the Community during the challenge.

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

---

<div class="post-metadata">

**Author:** ![domhnallohanlon](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/domhnallohanlon/32/29554_2.png) [@domhnallohanlon](https://community.thunkable.com/u/domhnallohanlon)\
**Post date:** [April 2, 2021, 8:05am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/18 "2021-04-02T08:05:20Z")

</div>

Opened on April 2, 2021, 8:05am UTC



---

<div class="post-metadata">

**Author:** ![krithikvasan6m1](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@krithikvasan6m1](https://community.thunkable.com/u/krithikvasan6m1)\
**Post date:** [April 2, 2021, 10:38am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/19 "2021-04-02T10:38:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [April 2, 2021, 10:44am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/20 "2021-04-02T10:44:00Z")

</div>

both

---

<div class="post-metadata">

**Author:** ![krithikvasan6m1](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@krithikvasan6m1](https://community.thunkable.com/u/krithikvasan6m1)\
**Post date:** [April 2, 2021, 10:54am UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/21 "2021-04-02T10:54:54Z")

</div>

OK working on it

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [April 2, 2021, 12:23pm UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/24 "2021-04-02T12:23:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![krithikvasan6m1](https://avatars.discourse-cdn.com/v4/letter/k/a183cd/32.png) [@krithikvasan6m1](https://community.thunkable.com/u/krithikvasan6m1)\
**Post date:** [April 2, 2021, 12:28pm UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/25 "2021-04-02T12:28:19Z")

</div>

Yes Sorry, 😔

---

<div class="post-metadata">

**Author:** ![eko.devs.apploroceo](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/eko.devs.apploroceo/32/93147_2.png) [@eko.devs.apploroceo](https://community.thunkable.com/u/eko.devs.apploroceo)\
**Post date:** [April 2, 2021, 12:57pm UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/26 "2021-04-02T12:57:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![catsarisky](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/catsarisky/32/100661_2.png) [@catsarisky](https://community.thunkable.com/u/catsarisky)\
**Post date:** [April 2, 2021, 3:20pm UTC](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030/27 "2021-04-02T15:20:05Z")

</div>

I picked a theme! Now I just need to program it! 🙂

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/5/f/5fbe8e53810140099dd7bf7911ca4bb3d54e2bb2.png) (icons from [http://icons8.com](http://icons8.com))

[Next page](https://community.thunkable.com/t/wdc-9-can-you-re-create-shaileshs-memory-game-app/1201030.md?page=2)
