Started with your video on node +mongo+express blog tutorial yesterday. Loved the way you keep things concise ,clear and especially your calm voice. Subscribed :)
He could've articulated the algorithm a bit more clearly but the code is fine. The random index "before" the current card includes the current card so it can "swap" with itself.
This game is currently endless since the draw simply returns the cards to their owner's decks. With this rule no one can take an opponent Ace card. There was a rule for the draw situation- when it occurs, both players flip 3 additional cards and compare the last flipped. This way you could take the opponents Ace cards and win.
Never coded in js before, but I've done a lot of scripting in GECK for Fallout mods, and at least for me, I found it to be a really informative introduction to js to follow this video and then solve the problem you've mentioned. I have just a couple of aesthetic things to take care of and I need to do something about when the war itself is a draw.
@@jabbadar I had that implemented inadvertently on my way to implementing the part that''s missing (the 'War' part), and it leads to endless games as well.
Awesome tutorial! I'm playing already a 23 hours match and can't beat that computer beast... but I never give up! If the computer and the player have at least one Ace... the game will take forever... Try with... const SUITS = ["♣","♦","♥","♠"] const VALUES = ["A"] ...but as the tutorial is not about Gameplay ;-) Structuring of classes with getHTML() and injecting the elements into the DOM depended on the game state, helped me understanding how very simple VanillaJS game could be structured. Thanks for sharing! Love it!
Because "2" should beat "Ace"...i just added two if statements before the rest of them: if (isRoundWinner(computerCard, playerCard) && playerCard.value == 2 && computerCard.value == 'A') to be win and swap "player" and "computer" in the second one to be lose
Love your tutorials. I think I bit off more than I could chew because I chose to code Solitaire as my first coding project for bootcamp. This will help me out a lot because all I'm trying to do now is get some dang cards on the screen 😂.
When I need to use "document.querySelector()", I use a variable that begins with "el", to signify an element Also, for booleans, I use a variable that begins with "is", even if the boolean signifies a plural
@@ladislavzima8382 To be consistent, so when briefly reading the code, whenever you encounter a variable prefixed with "is", you know to expect it to contain a boolean
Hey Kyle love the video just wanted to ask you if the design pattern you implemented in this video was factory right ? Dope content non the less! The design pattern videos have helped me beyond belief
Thank amigo. Question about game logic. If ties always go back to the bottom of each player's deck, then any play with an ace can never lose, because every round will be either a win or a tie for that card.
A 'war' should occur at that point, with each player putting up additional cards (usually 3 I think), and the winner of the last comparison takes all those cards. In this way, aces can be taken as part of the pile. I added this to my file and found it a helpful problem to work through.
I didn't quite understood how the const newIndex works. I got lost in the (math.random() * (i + 1)). Im not sure hoe the * works in this case. What are you multiplying? And why are you adding 1? You explained that this would essentially swap our current card with a random card that we havent looped through yet but Im just confused as to why we use multiplication and addition to achive this.
When I download the Skillshare iOS app, it offers a month-long trial which is longer than your two-week trial code, are you getting stiffed by Skillshare?
How would you deal with the logic of a blackjack card game? Especially with the Ace card where it can be 1 or 11 depending on what the player has before
I'm having trouble at ruclips.net/video/NxRwIZWjLtE/видео.html (32:51) after taking out the hard coded 26 I end up with no numbers in the deckElements. I looked at my code and it seems to be the same even copy and pasted the code from the github to triple check typing errors. The error that I'm getting is "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')" for the cleanBeforeRound(). any ideas?
I feel stupid asking this but...how do I run this program? I did the entire tutorial, but don't know how to actually run the program. Do I need to find the server/host and run it from the terminal?
If you use Visual Studio Code you can install the "Live Server" Extension...when it`s installed you simply click the "Go Live"-button and it will open a browser window with your current code and it updates automatically while you code.
@@tomimontaana50 Try using a local server, if you check Kyle bar direction shows localhost, a simple way of doing it is to install live-server with npm and running it on the folder you're developing in.
@UCRxvbXNAyPLJ-6UU6jRMpUw you need node.js installed on your machine, after that, run "npm i -g live-server" this will install live-server as a global dependency, once is finished just open your project folder in a terminal and run "live-server", it will look for an index.html file to serve it or you can run "live-server file.html" to specify the exact file you want to serve.
This guy has a good video explaining what | is and what it's can be used for. Personally I would use Math .floor & .celi for rounding. ruclips.net/video/mesu75PTDC8/видео.html
Wouldn't you just change the strings to reflect Player 1 and Player 2? War isn't really a 'game' in that neither player has any agency and the outcome is predetermined once the decks are given to each player.
I like your Javascript lessons, on this one I keep getting error in console: Uncaught TypeError: Failed to resolve module specifier "color-name". Relative references must start with either "/", "./", or "../". the code is word for word from your GitHub..
@@twinkiefrost6668 Because each ace got the value of 14, and when there is a draw both cards is put back in the same players deck, so there is no way to lose an ace.
@@stianmartinsen-stormyr1737 that's because the "war" part of the game wasn't implemented or even mentioned. but maybe that could be a fun challenge for viewers to implement. i'd also say splitting the deck in half is not a proper deal, but it probably doesn't matter since the cards have been pseudo-randomly shuffled. it's trivial to implement a deal for odd/even cards out of the original deck into the computer/player decks instead of splitting on the midpoint. but all of that is irrelevant to the point of the video, which is how to set up a deck and cards to make whatever game you want.
Whaaattt, the script is vanilla JS right? Why there's no *";"* to terminate a statement? Is it considered best practices nowadays to not explicitly do that, or am I missing something? Is it the new standard?
Man, I don't even know if you ever read this, but your channel is like an amazing one. Perfect tutorials with relaxing atmoshere. thousand thanks!
Thank you so much. That means a lot to me.
I agree. I feel like this is the gold standard for coding tutorials. Good pacing, no nonsense, huge help for me.
Started with your video on node +mongo+express blog tutorial yesterday. Loved the way you keep things concise ,clear and especially your calm voice. Subscribed :)
where is the link buddy?
@@panomapet9441 ruclips.net/video/1NrHkjlWVhM/видео.html
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/webdevsimplified11201
A little nostalgic tutorial. It's a game of my childhood :) Ty Kyle
Its impressive how easily you get around and create your code, thank you for this video!
you always add something unique to your videos
suits are also alt numpad (3,4,5,6) in the order of ♥♦♣♠
to write them hold down alt, type the 1 or more digit number from numoad, release alt
Love watching your videos!
Note: your shuffle function will never have the last card remain in the last slot.
He could've articulated the algorithm a bit more clearly but the code is fine. The random index "before" the current card includes the current card so it can "swap" with itself.
This game is currently endless since the draw simply returns the cards to their owner's decks. With this rule no one can take an opponent Ace card. There was a rule for the draw situation- when it occurs, both players flip 3 additional cards and compare the last flipped. This way you could take the opponents Ace cards and win.
Never coded in js before, but I've done a lot of scripting in GECK for Fallout mods, and at least for me, I found it to be a really informative introduction to js to follow this video and then solve the problem you've mentioned. I have just a couple of aesthetic things to take care of and I need to do something about when the war itself is a draw.
Another, probably easier method would be, to just remove both cards from the game on a draw.
@@jabbadar I had that implemented inadvertently on my way to implementing the part that''s missing (the 'War' part), and it leads to endless games as well.
keep up the superb work, I've learnt so much from this tutorial(as well), thank you Kyle
Awesome tutorial!
I'm playing already a 23 hours match and can't beat that computer beast... but I never give up!
If the computer and the player have at least one Ace... the game will take forever...
Try with...
const SUITS = ["♣","♦","♥","♠"]
const VALUES = ["A"]
...but as the tutorial is not about Gameplay ;-) Structuring of classes with getHTML() and injecting the elements into the DOM depended on the game state, helped me understanding how very simple VanillaJS game could be structured. Thanks for sharing! Love it!
Happy Diwali Bhai ❤️
Happy diwali bhai
Happy diwali bhaii 🎊🔥
Amazing and simple to understand as always. Thanks for the content.
Your videos are great...succinct and informative.
Great video, note a player with any Ace in the deck can never lose :P
Because "2" should beat "Ace"...i just added two if statements before the rest of them: if (isRoundWinner(computerCard, playerCard) && playerCard.value == 2 && computerCard.value == 'A') to be win and swap "player" and "computer" in the second one to be lose
Therefore it never ends XD
Love your tutorials. I think I bit off more than I could chew because I chose to code Solitaire as my first coding project for bootcamp. This will help me out a lot because all I'm trying to do now is get some dang cards on the screen 😂.
Boss man im coding solitaire and im lost
Never seen defer before! Must follow this and make a Texas Holdem game, so is flatMap a spread under the hood, thanks Kyle!
Great tutorial Kyle!
When I need to use "document.querySelector()", I use a variable that begins with "el", to signify an element
Also, for booleans, I use a variable that begins with "is", even if the boolean signifies a plural
Why not to use "are" instead of "is" for plural variables? :-)
@@ladislavzima8382 To be consistent, so when briefly reading the code, whenever you encounter a variable prefixed with "is", you know to expect it to contain a boolean
I do the same thing. And I frequently find myself wondering why I don't just learn typescript.
BEWARE there are loud clipping sounds that will RIP your ears. 8:53 12:30 possibly more. RIP RIP RIP but damn this is great content
Too late, I already died.
@@jaidchen rip
Dude you are a legend
Happy Diwali bhai
PDF annotation tools are mostly paid. JS tutorial explaining basics of PDF annotation layer / editing pdf would be very helpful.
Hey Kyle love the video just wanted to ask you if the design pattern you implemented in this video was factory right ? Dope content non the less! The design pattern videos have helped me beyond belief
Very well made. Awesome
Awesome video. Can you please write test cases for this project. It will be very helpful.
Thank you for this contet!
Wonderful tutorial, thx a lot =)
9:45 I don’t quite get why using random with the sort function causes the shuffle to not be totally random. Can anyone help explain? :)
amazing tutorial
thnx a lot Kyle
You are the best! 👌🏻
Thanks for your videos, you are the best
I have a question. The only way I can get modules to work is to have a server on through node. Do you just always have the server on in your videos?
Good job man
Diwali is a festival of lights. By watching your videos one day my life will be bright.❤️❤️❤️❤️
cool thanks for showing a use for the get statements in classes! funny that numberOfCards is actually 1 character longer than cards.length tho
Thanks for such an amazing tutorial. If you publish a product rating system using with node or mongoose that would helpful.
Great info, thank you.
Your hair looks awesome 👌
awesome, bro
Is that fisher-yates shuffle algorithm at 11.45
Please make a video on creating a full featured code editor using javascript.
how do add a picture after the even of winning or losing happens?
Thank amigo. Question about game logic. If ties always go back to the bottom of each player's deck, then any play with an ace can never lose, because every round will be either a win or a tie for that card.
A 'war' should occur at that point, with each player putting up additional cards (usually 3 I think), and the winner of the last comparison takes all those cards. In this way, aces can be taken as part of the pile. I added this to my file and found it a helpful problem to work through.
Github Copilot knows a bunch of this code already
Bravo!
Thank you
Ты крут, чувак!
Hi Kyle, what programming paradigm do you mostly use?
This is epic pog.
Happy diwali
If that is all in client side it means all card values can be manipulated?
!(I understood all your code)
if playerDeck and computerDeck are an object made from the class Deck then how is it able to access the getHTML property from class Card?
Do you offer a discounted bundle for the JavaScript and React course?
I didn't quite understood how the const newIndex works. I got lost in the (math.random() * (i + 1)). Im not sure hoe the * works in this case. What are you multiplying? And why are you adding 1? You explained that this would essentially swap our current card with a random card that we havent looped through yet but Im just confused as to why we use multiplication and addition to achive this.
When I download the Skillshare iOS app, it offers a month-long trial which is longer than your two-week trial code, are you getting stiffed by Skillshare?
is using flatMap the same as mapping the spread of ...suit @ 8:45?
How would you deal with the logic of a blackjack card game? Especially with the Ace card where it can be 1 or 11 depending on what the player has before
If totalValue > 21 { check to see if there are aces, if so reduce value of ace to 1 and check again, if not then go to BUST} something like that
Hi Kyle why dont you use factory function instead of class?
Beautiful
How did you make that horizontal array (value and suit) vertical?
i also wonder this let me know if u found it
@@MikeAgge He is using an extension called prettier, when he presses ctrl+s or ctrl+shift+i it formats automatically.
Great!!!
I'm having trouble at ruclips.net/video/NxRwIZWjLtE/видео.html (32:51) after taking out the hard coded 26 I end up with no numbers in the deckElements.
I looked at my code and it seems to be the same even copy and pasted the code from the github to triple check typing errors.
The error that I'm getting is "Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')" for the cleanBeforeRound().
any ideas?
I feel stupid asking this but...how do I run this program? I did the entire tutorial, but don't know how to actually run the program. Do I need to find the server/host and run it from the terminal?
If you use Visual Studio Code you can install the "Live Server" Extension...when it`s installed you simply click the "Go Live"-button and it will open a browser window with your current code and it updates automatically while you code.
Nice video sir, I want one video on voice recognition using google API for react native App. Please help me.
hi when i write console.log(deck.cards) i get this message Cross Origin Request Blocked error is comming what i must do to look the array of cards
how are you opening the index.html file?
@@barrydlight17 hi i open the index with chrome
@@tomimontaana50 Try using a local server, if you check Kyle bar direction shows localhost, a simple way of doing it is to install live-server with npm and running it on the folder you're developing in.
@@barrydlight17 thanks in live server is running
@UCRxvbXNAyPLJ-6UU6jRMpUw you need node.js installed on your machine, after that, run "npm i -g live-server" this will install live-server as a global dependency, once is finished just open your project folder in a terminal and run "live-server", it will look for an index.html file to serve it or you can run "live-server file.html" to specify the exact file you want to serve.
hi master !
Can you build a simple flashcard app ?
Hi is your react course [Learn React Today] up to date?
It is. It uses hooks and function components for everything.
if i get the money im going to register in skillshare :)
Instead of doing Math.floor() I always do,
5.76 | 0
Which return the number 5.
Is it good to do that?
This guy has a good video explaining what | is and what it's can be used for. Personally I would use Math .floor & .celi for rounding.
ruclips.net/video/mesu75PTDC8/видео.html
Happy Diwali
...if there was a war between... 2-4 players maybe 4 additional in lobby, how would you code that deal?...
Does anyone know how to make the array return 5 cards? Please
I would love for your help to develop an app! This is amazing!
@8:53 thought i was having a stroke
So bummed I cannot afford your JS course.
How make it multiplayer?
Wouldn't you just change the strings to reflect Player 1 and Player 2? War isn't really a 'game' in that neither player has any agency and the outcome is predetermined once the decks are given to each player.
I like your Javascript lessons, on this one I keep getting error in console:
Uncaught TypeError: Failed to resolve module specifier "color-name". Relative references must start with either "/", "./", or "../".
the code is word for word from your GitHub..
Hey what about a chess clone?
8:53 What the hell is that sound?
Lol. I have no idea. Sounds like my computer was yelling at me
@@WebDevSimplified happy diwali
There is a bug here: Once player has an Ace in his deck , he will never lose.
Why?
Yeah, I`m thinking the same.
@@twinkiefrost6668 Because each ace got the value of 14, and when there is a draw both cards is put back in the same players deck, so there is no way to lose an ace.
@@stianmartinsen-stormyr1737 that's because the "war" part of the game wasn't implemented or even mentioned. but maybe that could be a fun challenge for viewers to implement.
i'd also say splitting the deck in half is not a proper deal, but it probably doesn't matter since the cards have been pseudo-randomly shuffled. it's trivial to implement a deal for odd/even cards out of the original deck into the computer/player decks instead of splitting on the midpoint.
but all of that is irrelevant to the point of the video, which is how to set up a deck and cards to make whatever game you want.
Unless all aces are served to one player, isn't it an endless game ?
can you share your pc config??
Lol why
@@abe10 because I want to build a new one... Just to get an idea
Happy children's day!
ah yes, the children
the future
Min 5:56 😅
13:50 No Pattern completely random, ME sees J, J, J, 10,10,10
Build a Poker Game pls (Hold' em Texas) lol
suit, rank*
Cross Origin Request Blocked error is comming
What would be your suggestion for an easy clean solve?
Whaaattt, the script is vanilla JS right? Why there's no *";"* to terminate a statement? Is it considered best practices nowadays to not explicitly do that, or am I missing something? Is it the new standard?
Works with and without. I choose to use a ';' because i also program in C,C# where you have to use it. Simplifies live for me. :)
I need you help sir
I cant even figure out how spread out cards on the x axis 😭
watched the tutorial basically twice and made sure all the characters were correct and the game is still not rendering correctly...
how do I contact you?
Rxce app mod bana do
broo just tell us what we need to put in fucking first instead of going back n changing shit
Please explain in java
i don't even know how to play cards lmao
2:48
.js files hurt my eyes now
.ts is the way to go