48 Comments



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:

Twitter:

GitHub:

CodePen:

#Halloween #WebDevelopment #Programming

Nguồn: https://partnersinsublime.com/

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

Author

meeylandofficial@gmail.com

48 thoughts on “How to Code a Card Matching Game

  1. All of the code and assets for this video are available on my GitHub https://github.com/WebDevSimplified/Mix-Or-Match, and you can play the game live here https://codepen.io/WebDevSimplified/pen/EdEjyx.

    Also, make sure to checkout part two on PortEXE's channel https://youtu.be/3uuQ3g92oPQ.

  2. 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,😫😩

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

  4. 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

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

  6. 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?

  7. 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.

  8. Code a dungeon themed card game!
    https://morganpage.teachable.com/p/practise-modern-javascript-by-coding-a-card-game/?product_id=1834511&coupon_code=TWENTYFIVEOFF

  9. 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 :
    https://play.google.com/store/apps/details?id=com.AzaleaStudio.IcyMatch

  10. 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.

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

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

    Thank you very much.

  13. 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?

  14. 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: https://github.com/cierram2105/halloween-card-game

  15. I can't for the life of me get my gradient to work at the 5:00 mark! I've created the css and html documents, I've linked the css stylesheet to my html, I used the same code you used for your css… I'll keep googling for answers, but do you have any troubleshooting advice?

  16. Very good video….how about to create one memory game on Android Studio ? It will help a lot of people…u are sharp as a tack !!! Thx Bro !

  17. Hi, just so you know when the card game is played on a mobile or Ipad device the cards are already revealed/turned over.

  18. Really an interesting and useful video, I have some kind of problem when I try to apply the grid-template-columns, at 9:07 , doesn't change anything in my page what's happening?

  19. ​ Web Dev Simplified I appreciate the replys!

    I am coding it and typing comments, as I go through this video.
    I double checked and copied your code verbatim.
    @9:00 when you do the grid-template-column: repeat(4, auto);
    this code is applied to the game-container.
    game-container contains game-info-container and then 16 x cards;
    When I, use the grid-template-column: repeat(4,auto);…
    Because game-container contains game-info-container,
    the auto=width is set to the width of the game-info-container,
    so there is a rather large horizontal gap between the cards.
    The grid-gap:10px works fine for the "top-margin" between cards;
    It's just for whatever reason, each column of display: grid is the width of the game-info-container, and not the cards like in your video.
    Do you have any idea why? What I may have missed/done wrong/or a workaround?
    I agree with everyone else, these are great videos, and you can really tell with the high likes, to very very low dislike ratio!
    I'm looking forward to watching more, once I figure this out ; )

  20. superb. the code works perfect. thank you so much. you made my day and saved me from the last moment assignment submission. also the explanation provided by you is very clear and easy to understand. keep uploading such videos and keep helping us. Cheers!!!

  21. my font isn't working I am at 6.42 and my css code is

    @font-face {
    font-family:"Comfortaa";
    src: url("Assets/Fonts/Comfortaa.woff") format("woff").url
    ("Assets/Fonts/Comfortaa.woff2") format("woff2")
    }

    @font-face {
    font-family:"Nautica";
    src: url("Assets/Fonts/Nautica.woff") format("woff").url
    ("Assets/Fonts/Nautica.woff2") format("woff2")
    }

    * {
    box-sizing: border-box;
    }

    html{
    min-height:100vh;
    }

    body {
    margin: 4;
    background: radial-gradient(#0000ff, #FFFF00, #FF3D00, #757575,#CCFF90,#FF8F00, #40C4FF, #FFFFFF, #4CAF50, #E53935, #C0CA33,#512DA8,#00BCD4,#00ACC1,#F44336,#673AB7,#673AB7,#42A5F5,#FB8C00,#B2FF59,#388E3C,#9E9D24,#00695C,#00838F,#0277BD,#E91E63,#FFF176,#FF9100,#DD2C00,#1A237E,#FFAB00,#F44336,#FF8F00,#558B2F,#F44336,#69F0AE,#7B1FA2,#303F9F,#4FC3F7,#8E24AA,#FF6E40,#26A69A,#81C784,#D84315,#212121,#FFE082,#81C784,#1565C0,#B9F6CA,#9CCC65,#0288D1,#00BCD4,#DCE775,#303F9F,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#5C6BC0,#00838F,#039BE5,#80CBC4,#4CAF50,#F1F8E9,#B71C1C,#7CB342,#00897B,#009688,#1DE9B6,#2E7D32,#0000ff, #FFFF00, #FF3D00, #757575,#CCFF90,#FF8F00, #40C4FF, #FFFFFF, #4CAF50, #E53935, #C0CA33,#512DA8,#00BCD4,#00ACC1,#F44336,#673AB7,#673AB7,#42A5F5,#FB8C00,#B2FF59,#388E3C,#9E9D24,#00695C,#00838F,#0277BD,#E91E63,#FFF176,#FF9100,#DD2C00,#1A237E,#FFAB00,#F44336,#FF8F00,#558B2F,#F44336,#69F0AE,#7B1FA2,#303F9F,#4FC3F7,#8E24AA,#FF6E40,#26A69A,#81C784,#D84315,#212121,#FFE082,#81C784,#1565C0,#B9F6CA,#9CCC65,#0288D1,#00BCD4,#DCE775,#303F9F,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#5C6BC0,#00838F,#039BE5,#80CBC4,#4CAF50,#F1F8E9,#B71C1C,#7CB342,#00897B,#009688,#1DE9B6,#2E7D32,#0000ff, #FFFF00, #FF3D00, #757575,#CCFF90,#FF8F00, #40C4FF, #FFFFFF, #4CAF50, #E53935, #C0CA33,#512DA8,#00BCD4,#00ACC1,#F44336,#673AB7,#673AB7,#42A5F5,#FB8C00,#B2FF59,#388E3C,#9E9D24,#00695C,#00838F,#0277BD,#E91E63,#FFF176,#FF9100,#DD2C00,#1A237E,#FFAB00,#F44336,#FF8F00,#558B2F,#F44336,#69F0AE,#7B1FA2,#303F9F,#4FC3F7,#8E24AA,#FF6E40,#26A69A,#81C784,#D84315,#212121,#FFE082,#81C784,#1565C0,#B9F6CA,#9CCC65,#0288D1,#00BCD4,#DCE775,#303F9F,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#5C6BC0,#00838F,#039BE5,#80CBC4,#4CAF50,#F1F8E9,#B71C1C,#7CB342,#00897B,#009688,#1DE9B6,#2E7D32,#0000ff, #FFFF00, #FF3D00, #757575,#CCFF90,#FF8F00, #40C4FF, #FFFFFF, #4CAF50, #E53935, #C0CA33,#512DA8,#00BCD4,#00ACC1,#F44336,#673AB7,#673AB7,#42A5F5,#FB8C00,#B2FF59,#388E3C,#9E9D24,#00695C,#00838F,#0277BD,#E91E63,#FFF176,#FF9100,#DD2C00,#1A237E,#FFAB00,#F44336,#FF8F00,#558B2F,#F44336,#69F0AE,#7B1FA2,#303F9F,#4FC3F7,#8E24AA,#FF6E40,#26A69A,#81C784,#D84315,#212121,#FFE082,#81C784,#1565C0,#B9F6CA,#9CCC65,#0288D1,#00BCD4,#DCE775,#303F9F,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#5C6BC0,#00838F,#039BE5,#80CBC4,#4CAF50,#F1F8E9,#B71C1C,#7CB342,#00897B,#009688,#1DE9B6,#2E7D32,#0000ff, #FFFF00, #FF3D00, #757575,#CCFF90,#FF8F00, #40C4FF, #FFFFFF, #4CAF50, #E53935, #C0CA33,#512DA8,#00BCD4,#00ACC1,#F44336,#673AB7,#673AB7,#42A5F5,#FB8C00,#B2FF59,#388E3C,#9E9D24,#00695C,#00838F,#0277BD,#E91E63,#FFF176,#FF9100,#DD2C00,#1A237E,#FFAB00,#F44336,#FF8F00,#558B2F,#F44336,#69F0AE,#7B1FA2,#303F9F,#4FC3F7,#8E24AA,#FF6E40,#26A69A,#81C784,#D84315,#212121,#FFE082,#81C784,#1565C0,#B9F6CA,#9CCC65,#0288D1,#00BCD4,#DCE775,#303F9F,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#5C6BC0,#00838F,#039BE5,#80CBC4,#4CAF50,#F1F8E9,#B71C1C,#7CB342,#00897B,#009688,#1DE9B6,#2E7D32,#66BB6A,#00ACC1,#0097A7,#FF6F00,#C5E1A5,#64B5F6,#FFF59D,#009688,#FF9100,#DD2C00,#1A237E,#FFAB00,#F44336,#FF8F00,#558B2F,#F44336,#69F0AE,#7B1FA2,#303F9F,#4FC3F7,#8E24AA,#FF6E40,#26A69A,#81C784,#D84315,#212121,#FFE082,#81C784,#1565C0,#B9F6CA,#9CCC65,#0288D1,#00BCD4,#DCE775,#303F9F,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#5C6BC0,#00838F,#039BE5,#80CBC4,#4CAF50,#F1F8E9,#B71C1C,#7CB342,#00897B,#009688,#1DE9B6,#2E7D32,#0000ff, #FFFF00, #FF3D00, #757575,#CCFF90,#FF8F00, #40C4FF, #FFFFFF, #4CAF50, #E53935, #C0CA33,#512DA8,#00BCD4,#00ACC1,#F44336,#673AB7,#673AB7,#42A5F5,#FB8C00,#B2FF59,#388E3C,#9E9D24,#00695C,#00838F,#0277BD,#E91E63,#FFF176,#FF9100,#DD2C00,#1A237E,#FFAB00,#F44336,#FF8F00,#558B2F,#F44336,#69F0AE,#7B1FA2,#303F9F,#4FC3F7,#8E24AA,#FF6E40,#26A69A,#81C784,#D84315,#212121,#FFE082,#81C784,#1565C0,#B9F6CA,#9CCC65,#0288D1,#00BCD4,#DCE775,#303F9F,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#5C6BC0,#00838F,#039BE5,#80CBC4,#4CAF50,#F1F8E9,#B71C1C,#7CB342,#00897B,#009688,#1DE9B6,#2E7D32,#0000ff, #FFFF00, #FF3D00, #757575,#CCFF90,#FF8F00, #40C4FF, #FFFFFF, #4CAF50, #E53935, #C0CA33,#512DA8,#00BCD4,#00ACC1,#F44336,#673AB7,#673AB7,#42A5F5,#FB8C00,#B2FF59,#388E3C,#9E9D24,#00695C,#00838F,#0277BD,#E91E63,#FFF176,#FF9100,#DD2C00,#1A237E,#FFAB00,#F44336,#FF8F00,#558B2F,#F44336,#69F0AE,#7B1FA2,#303F9F,#4FC3F7,#8E24AA,#FF6E40,#26A69A,#81C784,#D84315,#212121,#FFE082,#81C784,#1565C0,#B9F6CA,#9CCC65,#0288D1,#00BCD4,#DCE775,#303F9F,#01579B,#E57373,#FFC107,#FDD835,#FFF176,#558B2F,#01579B,#4FC3F7,#00B0FF,#00BCD4,#29B6F6,#64FFDA,#6A1B9A,#1A237E,#00BCD4,#8E24AA,#5C6BC0,#00838F,#039BE5,#80CBC4,#4CAF50,#F1F8E9,#B71C1C,#7CB342,#00897B,#009688,#1DE9B6,#2E7D32,#66BB6A,#00ACC1,#0097A7,#FF6F00,#C5E1A5,#64B5F6,#FFF59D,#009688)
    };

    .page-title {
    color: #F57F17;
    font-family: Confortaa. New York Times;
    font-weight: lighter;
    text-align: center;
    font-size: 3em;
    }

    on codepen. Thanks

  22. Had this tutorial bookmarked since Halloween and finally came around to do it. Really good pace to follow along, good job. Now time to head over to part 2. 🙂

  23. There is a small glitch that is bugging me. When you find a match the silhouette of the card value appears before the card is done flipping. Do you know how to solve it?

Leave a Reply

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