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:
💻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://behereonline.com

Xem thêm bài viết khác:

Article Categories:
Game

All Comments

  • how to flip all the card @@ ?? please help !

    Hust Boy July 13, 2020 7:02 am Reply
  • With inspect element I can see back-face card, anyone know how to fix it?

    Litukas July 13, 2020 7:02 am Reply
  • We need a channel from you especially for the css.

    Mustafa Osama July 13, 2020 7:02 am Reply
  • those booleans are so difficult….

    Like TurTle July 13, 2020 7:02 am Reply
  • Fun little tutorial, learnt a lot. Absolute position example was gold, and also really liked the explanation of restructuring. Thank you!

    Gabor Pfalzer July 13, 2020 7:02 am Reply
  • Thanks for your help . I am french but you speak slowly and I understood a lot thanks to you

    Pierre Ci July 13, 2020 7:02 am Reply
  • My brain is burningg. Such a good project and tutorial. Extremly hard tutorial and ı like it

    Can AKT July 13, 2020 7:02 am Reply
  • 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.

    Stuepp July 13, 2020 7:02 am Reply
  • More tutorials from this woman! Where is her YouTube channel!?!?!?!

    Alberto Rangel July 13, 2020 7:02 am Reply
  • 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!

    M.D July 13, 2020 7:02 am Reply
  • 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?

    tornado4ever MS July 13, 2020 7:02 am Reply
  • Hi, thank you for tutorial. How did you make responsive? Did you use @media, beacuse i cant make responsive like you did.

    Denmlak July 13, 2020 7:02 am Reply
  • i copied it 1:1 but i cant flip the cards over

    Fabian Skala July 13, 2020 7:02 am Reply
  • 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 😀🙄🙄🙄

    SAVE MONEY July 13, 2020 7:02 am Reply
  • I didn't expect to be responding to her questions like im talking to Dora the explorer 🤣🤣🤣 good tuto tho

    boi RCK July 13, 2020 7:02 am Reply
  • Mindblown, guess I need to study basics.

    End One July 13, 2020 7:02 am Reply
  • Thank you very much for that! Keep up the good work!

    franz seidenfuss July 13, 2020 7:02 am Reply
  • Hello. I think that the left side of the screen is a code editor like Visual Studio Code, but what program is on the right side of the screen? How do you get that display?

    Aiyi Wu July 13, 2020 7:02 am Reply
  • I was making this game without watching any tutorial and i was stuck at storing the cards in variables, thanks for the solution 👍

    DC - TLC July 13, 2020 7:02 am Reply
  • I wish there was a "Love" button. This is the most concise and clear javascript tutorial I have seen. The animations were extremely helpful.

    tinyone July 13, 2020 7:02 am Reply
  • How to are you man ?

    HOLLYWOOD July 13, 2020 7:02 am Reply
  • I just love how she explains step by step what she's doing and why. More tutorials like this PLEASE!

    Avé-Maria Nlandou July 13, 2020 7:02 am Reply
  • Brilliant expose!

    One of the strengths of this presentation is seeing Flexbox, CSS calc, box-sizing, transform and transition explained in a practical and non-verbose way.

    Chris Adams July 13, 2020 7:02 am Reply
  • How to add "play again" for user to play from beginning?

    Amin Sani July 13, 2020 7:02 am Reply
  • Gamecrook is the I think only authentic website for free coins and gems for free.

    LYNXX. July 13, 2020 7:02 am Reply
  • Awesome. Thank you. 🙂

    Manal Alkallas July 13, 2020 7:02 am Reply
  • How to show alert of "you win" after the game finished?

    Amin Sani July 13, 2020 7:02 am Reply
  • You have taught me more about CSS in 10 minutes than my professor in a whole semester.

    EF2000Typhoon7LWA July 13, 2020 7:02 am Reply
  • You do a great job of making this easy to understand. Thanks!

    Duncan July 13, 2020 7:02 am Reply

Leave a Reply

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