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

[@WebDevSimplified]

Thanks for collaborating with me on this video! I really enjoyed working with you and making this project.

[@zacglasgow]

Hope to see more from both of you!

[@WebDevSimplified]

@@zacglasgow thanks. I really enjoyed working on this project as well!

[@fujisan0388]

Thank you to both of you

[@bahrawy07]

Even after 4 years there is some ppl like me who acctually learned from this video alot ty

[@zacglasgow]

This is ULTRA quality. Well done.

[@jamesaustin2039]

I learned a lot from this video! You do a great job explaining each step in detail without being too wordy.

[@CCGGCCGY]

I'm very bad at Javascript. I was so happy that your video is explain very clear and detail that make me so easy to understand. if you have Javascript basic tutorial, I can guess that many people will want to join your course, right now I try my best to understand more Javascript to watch your other video. Your video really nice and make with heart.

[@stidd1]

It's nice to see vanilla js tutorials. 👍

[@shadsluiter]

I was thinking that a lot of code would be easier to write and read in jQuery. Too bad people are hating on it these days.

[@xMoSicc]

@@shadsluiter Same thoughts.

[@Teacher_Ali]

Just excellently and professionally done. It was like some official course video. Really high quality and lot of learning for anybody learning JS. Thanks for this amazing video. Hope to see many more from you.

[@andersonhall08]

Great videos! I would like to see more of these tutorials.

[@PortEXE]

Then you've come to the right place! I produce at least 1 video per week just like this one!

[@elcikay]

Hi. Thanks for your lesson. I was coding along with the video and I think the shuffleCards function did not implement the said algorithm correctly, because you did not store the values with a temporary variable when you swap. As a result, after the shuffle, many of the cards may have the same order value. Hence, they are arranged based on the order with which they were written in "index.html", which means they are not really shuffled. I logged the order values to the console and confirmed this is happening. (For those who wants to fix this, take note that "style.order" by default is an empty string.)

[@444yoshitha8]

can you pls say how can we fix it

[@DanijelLapadatovic]

Thank you for this video! I learned a lot about classes from here! And i like the way how easily u explain the code!

[@wasilwasolomon6323]

wow i do appreciate you for this tutorial! i really liked the presentation and I managed to have it count. I hope this can help me to come out with two players as well

[@remibardon7843]

Thank you for this video, it is really complete and the final product is really great 👍🏻 You both did a great job 👌🏻

[@harag9]

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?

[@andrewpham3933]

Learned so much from this, and you explained things so well. Much thanks man!

[@santiagoramirez5507]

Great tutorial!! I'd like to watch more of these projects using vanilla js!! Kind Reagards from Chile!

[@RakeGrayFox]

Excellent and very brillian! Just one note, may the flip counter should be ++ed when the matching function is triggered :)

[@nhanpham3225]

Thank you so much. Learn a lot from this tutorial!

[@jovannovakovic5975]

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

[@PortEXE]

Working on a new video this weekend!

[@PortEXE]

Head over to my Twitter account to vote for the next video topic! @portexe

[@tomo_thats_me294]

Great Video thank you for your help.

[@sajitheditz7530]

Can you upload a video connecting this game to database to display scoreboard?

[@Maxtasy888]

Really nice tutorial, thanks for the work!

[@eddiebrett]

couldnt really see your screen properly, new to JS so seemed very quick but it is all helping me improve so thank you for making this video.

[@anru_kitakaze]

Thank you, amazing tutorial!

[@sophiochaphidze7732]

Great video! Thank you

[@sandoxs]

Just awesome, thank you very much for that tutorial!

[@mech4byte]

Very informative and entertaining tutorial! Thanks for the information :)

[@gumpie]

Small suggestion. Increase your font size when presenting. Its a little bit small. But great content otherwise

[@_.sunnyraj._]

wear glasses

[@botirbrian6249]

Sunny Raj he is right if u watching on phone its so hard

[@anfilofiosantosfilho7792]

Congratulations!!! very, very good.

[@philhamilton3946]

Would like to see more

[@annabelle3977]

thank you very much for that tutorial!

[@kazimrahman7499]

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

[@LapahnYT]

I thought asynchronous means that it doesn't load at the same time, it will just load whenever it is ready and the other threads can continue doing their thing without having to wait for the js file to be loaded.

[@nestorcortes2257]

It does, you're correct. I think he may have the concept reversed.

[@nestorcortes2257]

Disregard my comment. I think I have the concepts reversed.

[@PortEXE]

To clarify for you so that you don't get confused; asynchronicity allows more than one thing to happen at one time. Here's the kicker though. JavaScript can't actually run asynchronously. Lots of work has been done to make JavaScript appear to run asynchronously, thus giving us "async" functions.

[@nestorcortes2257]

@@PortEXE Wow, that's interesting.

[@agent-33]

R.I.P. mobile users. I can't see the codes clearly. But I think I understood the logic thanks to explanations.

[@teetir1981]

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

[@enriquegrageda]

Thanks man, you havent uploaded lately. Hopefully everything is ok!

[@aisjdijasijdajsd]

Anyone knows why isit that for the function getCardType, you cant use "card.getElementById(" ")" but have to use getElementsByClassName

[@filtersland7493]

Is it possible to make it multiplayer?

[@lauraklabe2259]

hi i'm struggling with an assignment for art school. i'm trying to code a matching game. he has us using adobe dreamweaver and I have all my art in the game and I can get the pieces to change when i hover over it and click on it, but I'm having trouble getting the card to stay flipped once it's clicked on (rn a click flips it once and automatically flips back over) and flip back over

[@pattypool6703]

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

[@johncelgrande8513]

can you teach me how to add more seconds in time? i just want to ask for my project i need it

[@bubsztyn]

U guys will be successfull, great content.

[@Wave9B]

thank u so much man

[@muhammadnazmulhasan4613]

Very nice tutorial. Can i make the same game with PHP Script?

[@igalc]

The " return setInterval (( ) => { .... " function, where exactly did you specify what value it is returned by the internal function?

[@PortEXE]

That function returns the interval itself. On each interval the function inside will be called. It's set to return the interval itself so that we can later reference the interval in the clearInterval function.

[@igalc]

@@PortEXE Um ok, so it returns 1000, correct?

[@PortEXE]

Nope. 1000 is the number of milliseconds between each interval. I'd highly recommend looking at the setInterval() method www.w3schools.com/jsref/met_win_setinterval.asp

[@neelia.concept]

i love this! But i use Typescript and forEach does not work and i cant find something similar... if you got me any advice i would be so happy!!

[@PortEXE]

forEach works in TypeScript. It must be the way you’re approaching it with your Types.

[@mikolashweiss1990]

source code is wrong. "Matched Cards" isn't instantiated at the constructor level, only in the start game function and no longer works unless you also instantiate it when making the other properties of the class at the top.

[@RaptorMediaGRP]

if i wanted to make a card drag and drop how would i do that? i have tried everything

[@Marksman6]

The matched sound is used only on the first flipped card and his clone. Please help

[@yasminamran5]

How do you make this game a multiplayer game?

[@mostviews4171]

hard to read fonts are very small on mobile device

[@lukaslinares7198]

@26:20-32:30 shuffle 43:30

[@AhSoh7091]

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... if(this.cardToCheck){ // check for match this.checkForCardMatch(card); } else { this.cardToCheck = card; }

[@mohonabhattacharya4184]

idk if i did something wrong but when i restart the game and match two cards the animation doesn't work anyone know why?

[@tommyVassallo]

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

[@PortEXE]

Have you solved this

[@botirbrian6249]

I think u should remove bootstrap grid classes from cards and give another css class

[@jaydeest]

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

[@jaydeest]

you think its cause im using visual code? not sure what program your using. but you seem like a good teacher so ill subscribe

[@ChaosmaedcheJulie]

did you put loading in the JS in " " ?? That was my mistake...now it works as it should

[@jaydeest]

@@ChaosmaedcheJulie no unfortunately i deleted the files maybe ill try it again later and revert back to your comment thanks for the tip

[@444yoshitha8]

what is happening inside the shuffle card function 😑😥

[@yasminamran5]

I mean can you give a tutorial that makes it multiplayer?

[@PortEXE]

I could yes. A 2-player card game would be a fun idea, but this game is single player only. So I’d need a different card game to choose.

[@EyeIn_The_Sky]

Hey Guys, the game when played on mobile devices or Ipad the cards faces are already turned/revealed

[@michaelbabin2434]

Same isssue. Found a solution?

[@pattypool6703]

Same issue on iphone and ipad, android is fine. Did you find a solution?

[@pattypool6703]

@@michaelbabin2434 Same issue on iphone and ipad, android is fine. Did you find a solution?

[@piaalvarez32]

Same issue also on Safai on a desktop :(

[@213crause]

Lame

[@_.sunnyraj._]

where is the js file in description

[@PortEXE]

It's the GitHub link

[@shelbyposton3611]

Make game called tonk.

[@victorschweitz3506]

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!

[@Marksman6]

Same bug, did you resolved it ? :(

[@xanalana6713]

Just below 1 line of code inside flipCard function flipCard(card){ if(this.canFlipCard(card){ // Just add this line if(card === this.cardToCheck) return; /* * Same code as in video */ }// end of canFlipCard }// end of flipCard function

[@NoName-zr8kq]

Damn this is sooo harrd 💔💔

[@alberts6096]

youtube more views pls >: -(

[@PortEXE]

Haha I know right! Thanks for your support.

[@dimpledharamshi6404]

Why can't he make the text clear and big ,

[@aliasger3452]

Why u just use async and create some useless function 😅. U also doing these things in a simple way 😐

[@nickslobodsky4444]

overlays.forEach(overlay => { overlay.addEventListener("click", () => { overlay.classList.remove("visible"); }); }); 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 ?