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.
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.
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
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.)
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?
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..!!
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.
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
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.
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.
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,😫😩
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
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
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.
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
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; }
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!
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
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 ?
Thanks for collaborating with me on this video! I really enjoyed working with you and making this project.
Hope to see more from both of you!
@@zacglasgow thanks. I really enjoyed working on this project as well!
Thank you to both of you
Even after 4 years there is some ppl like me who acctually learned from this video alot ty
This is ULTRA quality.
Well done.
I learned a lot from this video! You do a great job explaining each step in detail without being too wordy.
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.
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.
It's nice to see vanilla js tutorials. 👍
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.
@@shadsluiter Same thoughts.
Thank you for this video! I learned a lot about classes from here! And i like the way how easily u explain the code!
Great videos! I would like to see more of these tutorials.
Then you've come to the right place! I produce at least 1 video per week just like this one!
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
Thank you for this video, it is really complete and the final product is really great 👍🏻 You both did a great job 👌🏻
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.)
can you pls say how can we fix it
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?
Learned so much from this, and you explained things so well. Much thanks man!
Great tutorial!! I'd like to watch more of these projects using vanilla js!! Kind Reagards from Chile!
This is pure gold, man! Awesome!
Thank you very much for this!
We really appreciate it. We want more!
Cheers!
Working on a new video this weekend!
Head over to my Twitter account to vote for the next video topic! @portexe
Really nice tutorial, thanks for the work!
Thank you so much. Learn a lot from this tutorial!
Excellent and very brillian!
Just one note, may the flip counter should be ++ed when the matching function is triggered :)
Great Video thank you for your help.
Thank you, amazing tutorial!
Great video! Thank you
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..!!
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.
Very informative and entertaining tutorial! Thanks for the information :)
Just awesome, thank you very much for that tutorial!
Congratulations!!! very, very good.
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.
thank you very much for that tutorial!
Can you upload a video connecting this game to database to display scoreboard?
Small suggestion. Increase your font size when presenting. Its a little bit small. But great content otherwise
wear glasses
Sunny Raj he is right if u watching on phone its so hard
R.I.P. mobile users. I can't see the codes clearly. But I think I understood the logic thanks to explanations.
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
Is it possible to make it multiplayer?
Anyone knows why isit that for the function getCardType, you cant use "card.getElementById(" ")" but have to use getElementsByClassName
Would like to see more
can you teach me how to add more seconds in time? i just want to ask for my project i need it
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.
It does, you're correct. I think he may have the concept reversed.
Disregard my comment. I think I have the concepts reversed.
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.
@@PortEXE Wow, that's interesting.
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,😫😩
idk if i did something wrong but when i restart the game and match two cards the animation doesn't work anyone know why?
U guys will be successfull, great content.
thank u so much man
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
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!!
forEach works in TypeScript. It must be the way you’re approaching it with your Types.
if i wanted to make a card drag and drop how would i do that? i have tried everything
The matched sound is used only on the first flipped card and his clone. Please help
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
you think its cause im using visual code? not sure what program your using. but you seem like a good teacher so ill subscribe
did you put loading in the JS in " " ?? That was my mistake...now it works as it should
@@ChaosmaedcheJulie no unfortunately i deleted the files maybe ill try it again later and revert back to your comment thanks for the tip
what is happening inside the shuffle card function 😑😥
Thanks man, you havent uploaded lately. Hopefully everything is ok!
hard to read fonts are very small on mobile device
How do you make this game a multiplayer game?
Very nice tutorial. Can i make the same game with PHP Script?
The " return setInterval (( ) => { .... " function, where exactly did you specify what value it is returned by the internal function?
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.
@@PortEXE Um ok, so it returns 1000, correct?
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
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;
}
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!
Same bug, did you resolved it ? :(
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
Ahhh .. I used bootstrap to create the lay out of my cards and now the shuffling algorithm wont work.... head meet keyboard.
Have you solved this
I think u should remove bootstrap grid classes from cards and give another css class
where is the js file in description
It's the GitHub link
Hey Guys, the game when played on mobile devices or Ipad the cards faces are already turned/revealed
Same isssue. Found a solution?
Same issue on iphone and ipad, android is fine. Did you find a solution?
@@michaelbabin2434 Same issue on iphone and ipad, android is fine. Did you find a solution?
Same issue also on Safai on a desktop :(
Lame
I mean can you give a tutorial that makes it multiplayer?
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.
@26:20-32:30 shuffle
43:30
Why can't he make the text clear and big ,
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 ?
Make game called tonk.
Damn this is sooo harrd 💔💔
Why u just use async and create some useless function 😅. U also doing these things in a simple way 😐
youtube more views pls >: -(
Haha I know right! Thanks for your support.
Yes plz do more. I tweeted this.
Thanks I appreciate it!