In this tutorial we create a Halloween themed card matching game in plain JavaScript! Just in time for the holiday! Mix or Match.

Follow me on social media! Links on my website:


Here is a link to WebDevSimplified’s tutorial for Part 1:

Here is a link to the code if you’re wanting a JavaScript-only tutorial:

My Gear:

Video Card For Screen Capture:
Editing Suite:

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

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



27 thoughts on “How To Code A Card Game In Plain JavaScript – Spooky Halloween Edition

  1. Ahhh .. I used bootstrap to create the lay out of my cards and now the shuffling algorithm wont work…. head meet keyboard.

  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. WoW….!!….Super Programmers with Great Hearts….Only Thanks will not be enough….But Thanks a lot…!! Looking forward for more GAMEs using OOP paradigm from you …..cause….your clear concept makes me easy to understand…thanks..!!

  4. Hi can you please update a scoreboard or Highscore with this…and something to save those data in Webstorage! That would be practically helpful!
    Thanks much though

  5. I copied the game and did everything right. But when I try to click to start the game, nothing happens.

  6. Just watched the CSS video and was impressed with it. Just about to start on this one (just a few minutes in) and have a quick question – Why load the script "async", Can't you just put the script element tag at the bottom of the body, that way it loads after the dom?

  7. i got a problem with the overlay not disappearing when i click.. ive rewritten the code multiple times to exact, was wondering if you knew a solution. sucks cause i went through the css one and i thought maybe i made a mistake on the css but then copied the css code from github and it still wont work.. sigh/ this looked like a fun project

  8. overlays.forEach(overlay => {
    overlay.addEventListener("click", () => {

    Doesn't work.
    I did exactly how you did.
    I'm sorry but it's a fraud.

    Also, i can't download the audio files.
    Where to get them ?

  9. So, I have a bug. The bug is that the flip counter still increments by one when clicking on a card with the front facing me. I can't figure out how to fix this since it's clearly not what should be going on. Hopefully, someone can help me out.

    Thanks in advance!

  10. hi…one part i checked a long time i cannot understand how it works. Hope someone can help me up.
    In the flipCard method. what return of this.cardToCheck in first If Method… i checked it return null from startGame.
    and this code is works !!! so i confuess…

    // check for match


    } else {

    this.cardToCheck = card;


  11. This is pure gold, man! Awesome!
    Thank you very much for this!
    We really appreciate it. We want more!

Leave a Reply

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