• Saturday , 19 January 2019

Memory Card Game – JavaScript Tutorial

Code Canyon



Learn the fundamentals of pure javascript by building a memory card game. No frameworks or libraries, just vanilla JavaScript.

This video will cover how to:
‣ select elements in the DOM with querySelector
‣ iterate through lists with forEach
‣ add/remove an element class
‣ add/remove event listeners
‣ timeout
‣ html5: data-attribute
‣ css3: positioning, flexbox, perspective, backface-visibility, transitions

🔗Demo: https://marina-ferreira.github.io/memory-game/
💻Repo: https://github.com/code-sketch/memory-game/
💻Finished files: https://marina-ferreira.github.io/projects/js/memory-game/

⭐️ Course Contents ⭐️
⌨️ (00:00) Intro
⌨️ (00:47) Basic Structure / Create the Project
⌨️ (03:53) Board HTML
⌨️ (07:13) Board Styles
⌨️ (12:41) Flip Card
⌨️ (15:53) 3d Effect / CSS3 Perspective
⌨️ (18:25) Store Cards
⌨️ (22:37) Match Cards
⌨️ (25:12) Refactoring
⌨️ (27:27) Lock Board
⌨️ (28:53) Card Double Click
⌨️ (31:04) Shuffling

🎥Tutorial by Code Sketch. Check out the Code Sketch channel for more great tutorials: https://www.youtube.com/channel/UCHFmShpjG-8N52O0JD2ut3A/

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Original source

3d Ocean

Related Posts

37 Comments

  1. Gus Reyes
    December 14, 2018 at 00:38

    Obrigado pelo tutorial

  2. Misakimichy
    December 14, 2018 at 00:38

    This is a great video. I've learnt that global variables are not good. What's the better way to put these variables in local?
    “`
    let flippedCard = false;
    let lockBoard = false;
    let firstCard, secondCard;
    “`

  3. Baagii Ch
    December 14, 2018 at 00:38

    the toggle doesnt work what i should do? 14:50

  4. BLA BLA
    December 14, 2018 at 00:38

    great video, very enjoyed the instructor. Just would like ask, how to set up the board for responsive design? I am bit lost with responsivity. Thank you

  5. No Name
    December 14, 2018 at 00:38

    Brasil!!! 🇧🇷 😍

  6. Mirror View
    December 14, 2018 at 00:38

    You have explained really very well but the problem is that it is not working on my web browser.
    My bad !!!

  7. Habib Ullah
    December 14, 2018 at 00:38

    all my cards are on top of each other?

  8. prateek goyal
    December 14, 2018 at 00:38

    Awesome tutorial!!! I learnt a lot from this – css positioning, dataset framework etc.

  9. Prabhnoor Kaur
    December 14, 2018 at 00:38

    How can I get this to work in Internet explorer??

  10. george sohulov
    December 14, 2018 at 00:38

    Hey there, first of all great tutorial!
    Could you, please help me out adding an audio button that plays some instructions for example when clicked? Also how can be an audio added on each pair match and on each fail? And one final thing – how could you add a button that starts the game, before it's pressed the cards stay revealed to the player?
    Thanks in advance.

  11. You never know.
    December 14, 2018 at 00:38

    1) Right click – Inspect Element? Game over. 2) Should be made pure dynamic, i.e. values dynamically added to cards, without hard-coded values. 3) Auto-reset after all matches or reset button present. 4) The firstCard shouldn't turn if you wait more than 1500 ms. etc.

  12. powerful duas and wazifas
    December 14, 2018 at 00:38

    Great tutorial! Please make a tutorial on how to make a chatbot with voice in JS ASAP! I really need it!

  13. three eggsaday
    December 14, 2018 at 00:38

    great tutorial. does anyone know how to add a counter feature and a message at the end when all tiles are flipped?

  14. Ares Xena
    December 14, 2018 at 00:38

    This code could have been simplified.

  15. Ralf Spinoza
    December 14, 2018 at 00:38

    very good work. A lot a good stuff. Thank you very much for that.

  16. ramona Saintandre
    December 14, 2018 at 00:38

    I just want to say thank you so much for this tutorial
    I am part of the Udacity Grow with Google Scholarship program and one of our projects is to build a memory game.
    I had the hardest time grasping the JS part of it.
    your tutorial helped so much and I passed my project with flying colors
    Here is my version of your memory game
    Enjoy
    https://thenewmona.github.io/davidsmemorygame/

  17. Emad Uddin
    December 14, 2018 at 00:38

    superv tutorial….. many many thanks

  18. VeeWalk
    December 14, 2018 at 00:38

    I've been putting off this same project off for about a year and this is awesome! Thanks for the very thorough explanation on all of the concepts.

  19. vamsi krishna reddy bevara
    December 14, 2018 at 00:38

    ERROR in the code

    firstly….this was a awesome tutorial by the instructor..thank you so much for that….
    but there is error

    i have tried the code by myself and giving the suggestion that there is a error….
    in the double click logic

    when we click the first time then "this"= the item we clicked and firstcard is not assigned …so returns..

    but..when we click the second time we dont enter the if block again because hasflippedcard = true …so even when we double click on same cards the cards are matched….so adding ` if(this === firstcard){ return;} ` in the if block is wrong…. we should add it in the else block…that will work…

    Try it… both the codes (said by the instructor and mine) and decide yourself.

  20. Mal Dev
    December 14, 2018 at 00:38

    What font-family type are you using in your vs code font, is it an plugin?

  21. Walter Mitty
    December 14, 2018 at 00:38

    Great tutorial. Thanks!

  22. David
    December 14, 2018 at 00:38

    I love this tutorial a lot. I feel like an idiot because I didn't knew half of what I saw here but I liked it a lot. I insta-subscribed to Code Sketch. Waiting for more videos!

  23. Erwan Poupard
    December 14, 2018 at 00:38

    Very good tutorial Marina ! Do you use a visual studio plugin to live reload ?

  24. Vaso Beruashvili
    December 14, 2018 at 00:38

    Fantastic tutor. Thanks!

  25. Therover19
    December 14, 2018 at 00:38

    Wish this was in Scrimba!

  26. Othman Alamody
    December 14, 2018 at 00:38

    thanks heres my version: https://codepen.io/theweeknd/pen/gjKVVg i spent more work on it 😀

  27. Carlos Uehara
    December 14, 2018 at 00:38

    it's amazing, pretty work!!

  28. expiring pixels
    December 14, 2018 at 00:38

    Amazing, you are so cool and smart!!!!

  29. Solar Flare
    December 14, 2018 at 00:38

    holy crap that was the best position: absolute / relative explanation I've seen

  30. kamaboko1
    December 14, 2018 at 00:38

    Fantastic tutorial. It hit on so many different key skill sets to know.

  31. bjaeken
    December 14, 2018 at 00:38

    In visual studio code you can get extensions like bioler html templates…. '" ! TAB" generates it instantly..

  32. YouRSmalltime
    December 14, 2018 at 00:38

    Kthxbye 🙃

  33. Arun Raj Moorthy
    December 14, 2018 at 00:38

    Very clear and detail explanation. Awesome 👌

  34. Rainyer Santiago
    December 14, 2018 at 00:38

    Congrats for this awesome tut'.

  35. herbert kavuma
    December 14, 2018 at 00:38

    Thks i like it

  36. Josué Rodrigues
    December 14, 2018 at 00:38

    Marina tu é Zika 🙂

  37. Muhammet ESER
    December 14, 2018 at 00:38

    Thanks for this great Tutorial.

Leave A Comment

You must be logged in to post a comment.