Memory Card Game – JavaScript Tutorial
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:
What program do you code in?
Muchas gracias!
Você é Brasileira?
awesome tutorial learnts new words
vai brasiliam
anyone figured out how to add audio to the 'flip' function?
can we make this work in smartphone??
da pra fazer isso funcionar no iphone??
how do you make the game responsive?
Thanks i enjoyed writing with you 😃
how can I do this work in mobile??
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: rodolfovitangcol@gmail.com.
Thanks and God bless!
RODOLFO MARTIN VITANGCOL
The Ruvol Inventor
Hi, you are amazing. I like so much your video and helped so much to my work. Thank you ♥♥
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.
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!
Hands down the best CSS JS I've ever heard TT.
awesome!
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 …
Obrigada, melhor tutorial desse jogo que eu já vi <3
Entendi tudo e deu tudo certinho.
The best by far! thanx
Muito Obrigado!!! Very clear explanation, thank you so much!
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.
28:05 Hi there, is it possible if you could explain this in normal if/else statement instead of [if(lockBoard) return;], thanks.
this method is not even usable on mobile.
i tried flipping a card on mobile and its is not working correctly.
No one like u explain this in a such a good way 👍 very satisfied 😁
Awesome tutorial, thanks : )
which editor you used?
Thank you very much. It's very interesting and instructive.
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
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 🙂
One of the best js tutorials I've seen! Much <3
i wish everyone explained like u
how can we detect three cards click ??
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!
Awesome Explanation
simply the best tutorial. wow thank you for your great contribution.
great tutorial.
thank you for uploading.
I really have fun doing this. Thank you
Can i use sublime text to code, as i have windows 7 system
33:23 Whaaatttt?! 😀
Thanks. That was excelente. Obrigado Marina! 🙂
you have no idea that you saved my life
love u youu ❤️
Supper
great explanation for flex
how do i get the same images?
Great tutorial ! But the flip doesn't work properly on Safari. Did anyone manage to fix it ?
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
Thank you very much for this tutorial!
What a great tutorial, relaxing and interesting at the same time