Memory Card Game – JavaScript Tutorial

Game



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:

Nguồn: https://dccwo.org/

Xem thêm bài viết khác: https://dccwo.org/game/

20 thoughts on “Memory Card Game – JavaScript Tutorial

  1. Fun little tutorial, learnt a lot. Absolute position example was gold, and also really liked the explanation of restructuring. Thank you!

  2. Thanks for the video, I'm pretty noob in coding but I could learn a good amount, and this help with my studies, really thank you very much.

  3. Hi this is great but i have a question about the calculating the width of the memory card. she says you need to take the margin into consideration so why does she then take away 10px when the margin is set to 5px? thanks if anyone can help me on this I would greatly appreciate it!

  4. A newbie question for anyone willing to answer. At 14:21in the line 8th it says card => card.eventListener. Should it be cards => cards.eventListener. It works both ways. but it still confusing to me why we cab use card instead of cards?

  5. Hi, thank you for tutorial. How did you make responsive? Did you use @media, beacuse i cant make responsive like you did.

  6. hi nice work please help me can you change this code into simple matching game for kids like A for Apple B For Ball without flipping animation 😀🙄🙄🙄

  7. I didn't expect to be responding to her questions like im talking to Dora the explorer 🤣🤣🤣 good tuto tho

Leave a Reply

Your email address will not be published. Required fields are marked *