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 :)
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.
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
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.
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
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!
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 😂.
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.
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.
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?
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
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.
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..
@@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.
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.
@@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.
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/webdevsimplified11201
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
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
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.
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!
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 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.
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.
you always add something unique to your videos
Diwali is a festival of lights. By watching your videos one day my life will be bright.❤️❤️❤️❤️
how do add a picture after the even of winning or losing happens?
PDF annotation tools are mostly paid. JS tutorial explaining basics of PDF annotation layer / editing pdf would be very helpful.
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!
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
keep up the superb work, I've learnt so much from this tutorial(as well), thank you Kyle
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? :)
Never seen defer before! Must follow this and make a Texas Holdem game, so is flatMap a spread under the hood, thanks Kyle!
Your videos are great...succinct and informative.
Amazing and simple to understand as always. Thanks for the content.
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
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.
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?
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?
Happy Diwali Bhai ❤️
Happy diwali bhai
Happy diwali bhaii 🎊🔥
Is that fisher-yates shuffle algorithm at 11.45
Github Copilot knows a bunch of this code already
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
Awesome video. Can you please write test cases for this project. It will be very helpful.
Thanks for such an amazing tutorial. If you publish a product rating system using with node or mongoose that would helpful.
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.
cool thanks for showing a use for the get statements in classes! funny that numberOfCards is actually 1 character longer than cards.length tho
Happy Diwali bhai
Great tutorial Kyle!
Dude you are a legend
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?
Please make a video on creating a full featured code editor using javascript.
Thanks for your videos, you are the best
amazing tutorial
thnx a lot Kyle
...if there was a war between... 2-4 players maybe 4 additional in lobby, how would you code that deal?...
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
Wonderful tutorial, thx a lot =)
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
Thank you for this contet!
Happy diwali
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?
Very well made. Awesome
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.
If that is all in client side it means all card values can be manipulated?
Great info, thank you.
This is epic pog.
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..
is using flatMap the same as mapping the spread of ...suit @ 8:45?
Hi Kyle, what programming paradigm do you mostly use?
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.
Your hair looks awesome 👌
Hi Kyle why dont you use factory function instead of class?
Does anyone know how to make the array return 5 cards? Please
You are the best! 👌🏻
Good job man
Do you offer a discounted bundle for the JavaScript and React course?
Thank you
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 understood all your code)
awesome, bro
Nice video sir, I want one video on voice recognition using google API for react native App. Please help me.
@8:53 thought i was having a stroke
hi master !
Can you build a simple flashcard app ?
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.
if i get the money im going to register in skillshare :)
suit, rank*
Bravo!
Happy Diwali
Beautiful
Hey what about a chess clone?
Happy children's day!
ah yes, the children
the future
Great!!!
I would love for your help to develop an app! This is amazing!
Build a Poker Game pls (Hold' em Texas) lol
13:50 No Pattern completely random, ME sees J, J, J, 10,10,10
Hi is your react course [Learn React Today] up to date?
It is. It uses hooks and function components for everything.
So bummed I cannot afford your JS course.
Cross Origin Request Blocked error is comming
What would be your suggestion for an easy clean solve?
Unless all aces are served to one player, isn't it an endless game ?
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.
Min 5:56 😅
I need you help sir
8:53 What the hell is that sound?
Lol. I have no idea. Sounds like my computer was yelling at me
@@WebDevSimplified happy diwali
I cant even figure out how spread out cards on the x axis 😭
can you share your pc config??
Lol why
@@abe10 because I want to build a new one... Just to get an idea
watched the tutorial basically twice and made sure all the characters were correct and the game is still not rendering correctly...
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. :)
Rxce app mod bana do
Please explain in java
how do I contact you?
i have made a blackjack with python and it is way easier than this:D
i dont understand a word. i just this video is only for english speakers. Try to speak slowly and explain every function or built in function.. Thnks
broo just tell us what we need to put in fucking first instead of going back n changing shit