create account

Making A Memory Game - React JS by jrej

View this thread on: hive.blogpeakd.comecency.com
· @jrej · (edited)
$1.76
Making A Memory Game - React JS
Hello fellow Steemians,

I know you were waiting for an update. And you might not have been expecting this. But this is what I've been up too recently.

Building my own memory game from scratch!

In this version, there is an odd number of cards so you would have to find the one remaining in the end.  The idea was to mimic an investigation, comparing alibis and witnesses until you find the sole suspect!

Give it a try [here!](https://jrejoire.github.io/Memory_Game/)

[![Untitled.png](https://cdn.steemitimages.com/DQmPLrNcApwdgMeWGxH1aDCHJfNns27vMnpbX4U7kam5ZKj/Untitled.png)](https://jrejoire.github.io/Memory_Game/)

You must know, this is more than just a game for me. I'm actually considering a professional transition to web development. This small piece was intended to figure on my portfolio application. I know It might be fairly simple now but I'm consistently improving and staying dedicated to this project of mine.

My followers on Steemit probably know me better for my long form comic ([link](https://steemit.com/comic/@jrej/read-a-comic-on-steem-hobos-guns-and-bros)) and sketches I've been posting. But I like having both technical and artistic knowledge to be truly self sufficient. 

Ever since I got into to the world of crypto, I knew there were opportunities to grow in this environment. I hope, with these new skills, I'll be able to bring more value to the system, some useful projects for everyone to enjoy!

![app2.png](https://cdn.steemitimages.com/DQmYY7PPhhk2UiWCFUUt3cuSSCk8f8izcTKHMxBhLFoXGwu/app2.png)

Now let's dive in to the challenges of this application.
The most important thing with a project on the Javascript framework React are the state variables (as seen below). These are used in the whole application and are tracking different values.

![app.png](https://cdn.steemitimages.com/DQmUrNga24V72RcVZR8aHYand4AFievnHj9jFYD3UMbdUAf/app.png)

Having a clear idea of all these main variables would help structure the page.
The one I chose were: 
- A list of the randomized cards, 
- The selected card when clicked once, 
- An array of the cards once found, 
- Cards facing up or not, 
- Number of clicks by turn, 
- Number of clicks from the start, 
- The odd card to find, 
- Finally... the winning condition.

---

What I am the most proud of is the following code which maps the array of cards into the images we see. It also includes the comparison condition which allow two cards to be revealed once matched. I spend quite a while figuring out this one. 

There's probably a better way but I like how small the code is for such an important role in the process.

![app 3.png](https://cdn.steemitimages.com/DQmQLmFz8DTKB8JJNusAFhtbEwjFvQRP2oasCy1uNscbBG7/app%203.png)

Below is the ingame shot. I used portraits from a [free ressource](https://www.pexels.com/) online. 

![App end.jpg](https://cdn.steemitimages.com/DQmYPJpVeHZHjEn3NQHXUuESSgADCh4sao9bXwenJXwRZxn/App%20end.jpg)

With the shape of the grid, I wanted to copy the famous Solitaire marble game which has a symmetrical design even with an odd number of pieces. 

Notice the click counter at the bottom. I think my best score was 38! 

Now it's your turn! [Play now](https://jrejoire.github.io/Memory_Game/) and share your score below! 
Best one will win a digital beer!

See you on the other side,

Jrej
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 482 others
properties (23)
authorjrej
permlinkmaking-a-memory-game-react-js
categoryblog
json_metadata{"tags":["blog","dev","gaming","steemit","busy"],"image":["https://cdn.steemitimages.com/DQmPLrNcApwdgMeWGxH1aDCHJfNns27vMnpbX4U7kam5ZKj/Untitled.png","https://cdn.steemitimages.com/DQmYY7PPhhk2UiWCFUUt3cuSSCk8f8izcTKHMxBhLFoXGwu/app2.png","https://cdn.steemitimages.com/DQmUrNga24V72RcVZR8aHYand4AFievnHj9jFYD3UMbdUAf/app.png","https://cdn.steemitimages.com/DQmQLmFz8DTKB8JJNusAFhtbEwjFvQRP2oasCy1uNscbBG7/app%203.png","https://cdn.steemitimages.com/DQmYPJpVeHZHjEn3NQHXUuESSgADCh4sao9bXwenJXwRZxn/App%20end.jpg"],"links":["https://jrejoire.github.io/Memory_Game/","https://steemit.com/comic/@jrej/read-a-comic-on-steem-hobos-guns-and-bros","https://www.pexels.com/"],"app":"steemit/0.1","format":"markdown"}
created2019-04-30 02:04:33
last_update2019-04-30 02:06:21
depth0
children3
last_payout2019-05-07 02:04:33
cashout_time1969-12-31 23:59:59
total_payout_value1.390 HBD
curator_payout_value0.366 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length3,311
author_reputation34,006,204,340,070
root_title"Making A Memory Game - React JS"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id83,981,686
net_rshares3,732,177,552,923
author_curate_reward""
vote details (546)
@c-squared ·
c-squared-comment
<div class="pull-left">https://cdn.steemitimages.com/DQmaSUWYsJ3AMUEMRqCSaoKJVNvtsbKm4fNAtmTidr8Uggc/C%20Squared%20Logo%20Transparency%20200px.png</div><br>This post was shared in the <a href="https://discord.gg/B8JFmJ4">Curation Collective Discord community</a> for curators, and upvoted and resteemed by the @c-squared community account after manual review.<br/>@c-squared runs a <a href="https://steemit.com/witness/@c-cubed/announcing-the-launch-of-the-new-c-squared-witness">community witness</a>. Please consider using one of your witness votes on us <a href ="https://steemconnect.com/sign/account-witness-vote?witness=c-squared&approve=1">here</a>
👍  
properties (23)
authorc-squared
permlink20190430t024011780z
categoryblog
json_metadata{"tags":["c-squared"]}
created2019-04-30 02:40:30
last_update2019-04-30 02:40:30
depth1
children0
last_payout2019-05-07 02:40:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length655
author_reputation8,872,520,093,091
root_title"Making A Memory Game - React JS"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id83,983,027
net_rshares8,017,570,260
author_curate_reward""
vote details (1)
@supdork ·
Sup Dork?!? Enjoy the Upvote!!!
👍  
properties (23)
authorsupdork
permlinkre-jrej-making-a-memory-game-react-js-20190430t025530800z
categoryblog
json_metadata{"tags":["blog"],"app":"steemit/0.1"}
created2019-04-30 02:55:33
last_update2019-04-30 02:55:33
depth1
children1
last_payout2019-05-07 02:55:33
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length31
author_reputation763,343,468,371
root_title"Making A Memory Game - React JS"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id83,983,688
net_rshares8,182,155,510
author_curate_reward""
vote details (1)
@jrej ·
Thanks a ton @supdork!
properties (22)
authorjrej
permlinkre-supdork-re-jrej-making-a-memory-game-react-js-20190430t030740925z
categoryblog
json_metadata{"tags":["blog"],"users":["supdork"],"app":"steemit/0.1"}
created2019-04-30 03:07:06
last_update2019-04-30 03:07:06
depth2
children0
last_payout2019-05-07 03:07:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length22
author_reputation34,006,204,340,070
root_title"Making A Memory Game - React JS"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id83,984,215
net_rshares0