D4mations.com

Memory Card Game – JavaScript Tutorial



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

d4mer

, , , , , , ,

37 responses to “Memory Card Game – JavaScript Tutorial”

  2. 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;
    “`

  10. 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. 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.

  19. 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.

  22. 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!

Leave a Reply