Memory Card Game - JavaScript Tutorial - finalbosscardgame.com

Memory Card Game – JavaScript Tutorial

freeCodeCamp.org
Views: 133721
Like: 3247
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:
💻Repo:
💻Finished files:

⭐️ 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:

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

210 Comments

  1. Hola no tendrás este tutorial en español =( , saludos

  2. anyone figured out how to add audio to the 'flip' function?

  3. can we make this work in smartphone??
    da pra fazer isso funcionar no iphone??

  4. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.

    HOW IS RUVOL PLAYED and HOW YOU CAN MONETIZE IT?

    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0

    BIG MONEY POTENTIAL IN RUVOL!

    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: [email protected]gmail.com.

    Thanks and God bless!

    RODOLFO MARTIN VITANGCOL

    The Ruvol Inventor

  5. Hi, you are amazing. I like so much your video and helped so much to my work. Thank you ♥♥

  6. Honestly learn how to make a "tutorial" who makes a "tutorial" sped up… you go way to fast. it starts off as a tutorial but you lose focus and it ends up being a sped up walkthrough.

  7. Great tutorial. Great work. There is only one issue I can't be able to resolve.
    On iOs the "transform: rotateY (180deg);" doesn't seem to work, do you have a quick fix for this?
    Anyway keep up the good work! And Thank you so much!

  8. Hands down the best CSS JS I've ever heard TT.

  9. Hey, thanks for this amazing tutorial. One thing i recognised that the semicolons in javascript actually matter, which i thought that they dont, or i just dont understand something. I wrote this code and in some places i didnt put the semicolon, and so the app then didn't work correctly, fo example here:
    [hasFlippedCard, lockBoard] = [false, false]; — I had no semicolon here and after my cards didnt match, i could not flip the corner cards again. Not sure why tho …

  10. Obrigada, melhor tutorial desse jogo que eu já vi <3
    Entendi tudo e deu tudo certinho.

  11. Muito Obrigado!!! Very clear explanation, thank you so much!

  12. This is amazing, I have learned more from this then my dam bootcamp…. i had to watch it more then 15 times but thats okay.

  13. 28:05 Hi there, is it possible if you could explain this in normal if/else statement instead of [if(lockBoard) return;], thanks.

  14. this method is not even usable on mobile.

  15. i tried flipping a card on mobile and its is not working correctly.

  16. No one like u explain this in a such a good way 👍 very satisfied 😁

  17. Thank you very much. It's very interesting and instructive.

  18. Can we pleaaaaaase get a list of these tutorials by people with amazing accents. Lol I honestly feel like this would be the best way for everyone to learn

  19. Marina, you beautiful soul, THANK YOU!!!! This is a fantastic tutorial, the files are awesome, and for someone just learning to script, I can't thank you enough 🙂

  20. Absolutely loved this video. More clear and easy to follow than the online course I'm paying for, and you do it free, just to help people out. I love that! Thank you!

  21. simply the best tutorial. wow thank you for your great contribution.

  22. I really have fun doing this. Thank you

  23. Can i use sublime text to code, as i have windows 7 system

  24. Thanks. That was excelente. Obrigado Marina! 🙂

  25. Great tutorial ! But the flip doesn't work properly on Safari. Did anyone manage to fix it ?

  26. i would know how to change it in to 4×4?
    also will this fail if i use my own images? is there a re restriction on images format or size?thanks

  27. Thank you very much for this tutorial!

Leave a Reply

Your email address will not be published.