How To Code A Card Game In Plain JavaScript – Spooky Halloween Edition


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:


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


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

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

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

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

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


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


Please enter your comment!
Please enter your name here