How to Code a Card Matching Game

In this special two part video series we will be creating a simple Halloween themed card matching game. In this first video I will be explaining all of the HTML and CSS needed to create the animations and design for the game. In the second part of the video PortEXE will explain all of the JavaScript needed to make the card game interactive and playable.

I hope you enjoy the collaboration with PortEXE. I really enjoyed working with him, and hope to do more collaboration videos in the future.

All of the images and code are available on my GitHub linked below.

PART TWO (PortEXE Video):

Code For This Video:

CodePen For This Video:




#Halloween #WebDevelopment #Programming


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

32 thoughts on “How to Code a Card Matching Game

  1. All of the code and assets for this video are available on my GitHub, and you can play the game live here

    Also, make sure to checkout part two on PortEXE's channel

  2. Great content… but I wished the sound could be muted. So, I added a mute function on the version that I uploaded to GitHub

  3. I really like your videos, thanks.

    I have a question if there is a way to plant the current HTML file and display the game on the site. All attempts to plant HTML files after finishing work on my site failed. I would be happy to help maybe someone knows some way, thanks

  4. Found this very easy to code alongside. Thank you for going through the nitty-gritty details and explaining why as you went.

  5. This is great video, i have been able to create the game with my own pictures, on the computer it is working in all browers but not IE, when trying on my Iphone and ipad I see the pictures in mirror and not the background. Wehn click on picture you see other cards turn to the back side of the card and turns back again. I have downloaded edge and chrome on my iphone and have to same issue, I added the animation browser code in css. When checking the virtual iphone it is working, but not on my owns. Any ideas what I am missing? The sounds is working, except the one running out of time. The picture are dancing when matched,😫😩

  6. Haven't watched part 2 yet but thanks for this. As usual with your longer walkthroughs I've learned an absolute ton. Thanks dude.

  7. Apparently this complete game will not work on my ipad. The flipping transition has some issue though. All the cards by default will be at front. Nevertheless, great tutorial

  8. amazing…..
    I'm learning something new every day from your vidoes
    Thank you for your love
    I pray for you
    all the best

  9. Great tutorial, so happy to try and recreate this as a beginner. I usually avoid using grid, can I do this using flexbox? Will it cause issues in JS?

  10. I've had this pinned forever and just now got around to going through it. Great walk through as always and such a fun project. Also enjoyed putting my own spin on it since it's not Halloween at the moment ;). Thanks for making coding fun, Kyle! Enjoyable projects make the concepts stick so much easier. Now, onto the JavaScript.

  11. Code a dungeon themed card game!

  12. Great tutorial ! I followed this and made a new Match game on Google Play Store, it has new feature that we can continuously matching the card. This is a great game where u can show off with your friends about your score. Check it out :

  13. Would it be overkill to make this type of game using HTML5 canvas? I'm confused on when one should use HTML5 canvas or not.

  14. Hi can you please make a scoreboard or Highscore and a Webstorage with that ..would be practically helpful!
    Thanks much

  15. Hi. Thank you for this game.
    I really appreciate for your hard work and this goes well.

    Thank you very much.

  16. Awesome tutorial 😍😍😍😍. Can you please help on below question?
    Upon refreshing the page, we call see the front face of all cards. How can we prevent that?

  17. Hi again! I am stuck on where the issue is within my code when it comes to keeping the "game-info-container" spaced! As soon as I changed the "game-container" to flexbox: center, it moved the cards and my Time and Flips text and numbers to the center too. I assumed it could've been a CSS override rule? But it can't be, because yours works. The only other issue I could think of was the closing tags being off in the HTML but I don't see any difference between your code and mine there either.. help?? (And thank you!) Here's my GitHub code:

Leave a Reply

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