How To Build A Simple Card Game With JavaScript

[@___-jh7ys]

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!

[@WebDevSimplified]

Thank you so much. That means a lot to me.

[@crowlsyong]

I agree. I feel like this is the gold standard for coding tutorials. Good pacing, no nonsense, huge help for me.

[@vishalcelestine8654]

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 :)

[@panomapet9441]

where is the link buddy?

[@vishalcelestine8654]

@@panomapet9441 kzbin.info/www/bejne/Z3_VeZ6gobyJnq8

[@ferhatgiritli8569]

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

[@billyzman666]

Its impressive how easily you get around and create your code, thank you for this video!

[@ridl27]

A little nostalgic tutorial. It's a game of my childhood :) Ty Kyle

[@javascriptdev2273]

you always add something unique to your videos

[@azsamsiizbrah]

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.

[@Gaff.]

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]

Another, probably easier method would be, to just remove both cards from the game on a draw.

[@Gaff.]

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

[@dsackinger]

Love watching your videos! Note: your shuffle function will never have the last card remain in the last slot.

[@JamieGillett]

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.

[@lardosian]

Never seen defer before! Must follow this and make a Texas Holdem game, so is flatMap a spread under the hood, thanks Kyle!

[@superdaveygravy]

Your videos are great...succinct and informative.

[@danielgrafen8647]

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!

[@palilomut4728]

keep up the superb work, I've learnt so much from this tutorial(as well), thank you Kyle

[@avi12]

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]

Why not to use "are" instead of "is" for plural variables? :-)

[@avi12]

@@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

[@DoctorMandible]

I do the same thing. And I frequently find myself wondering why I don't just learn typescript.

[@LeoPacheco87]

Amazing and simple to understand as always. Thanks for the content.

[@tjcoledrumming5903]

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

[@boblebeau1363]

Boss man im coding solitaire and im lost

[@WebDevSimplified]

The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/webdevsimplified11201

[@bunnybloods768]

Diwali is a festival of lights. By watching your videos one day my life will be bright.❤️❤️❤️❤️

[@piyushmahapatra5402]

Happy Diwali Bhai ❤️

[@vijaychauhan2450]

Happy diwali bhai

[@AdityaSharan811]

Happy diwali bhaii 🎊🔥

[@themaninblack5022]

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

[@jaidchen]

Too late, I already died.

[@bloblop8397]

@@jaidchen rip

[@itsmanojb]

PDF annotation tools are mostly paid. JS tutorial explaining basics of PDF annotation layer / editing pdf would be very helpful.

[@meruzhansargsyan1476]

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?

[@vasantbajantri3074]

Awesome video. Can you please write test cases for this project. It will be very helpful.

[@dineshkinibailoor340]

Is that fisher-yates shuffle algorithm at 11.45

[@ifillup]

Great video, note a player with any Ace in the deck can never lose :P

[@andreystruk9391]

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

[@ginbarato1178]

Therefore it never ends XD

[@eddyelamin9015]

how do add a picture after the even of winning or losing happens?

[@majedulislam4982]

Thanks for such an amazing tutorial. If you publish a product rating system using with node or mongoose that would helpful.

[@rubenuribe]

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? :)

[@crowlsyong]

Dude you are a legend

[@capcodes]

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

[@aubreydigital]

cool thanks for showing a use for the get statements in classes! funny that numberOfCards is actually 1 character longer than cards.length tho

[@lusti159]

Thank you for this contet!

[@LokeshKumar-vo2xc]

Happy Diwali bhai

[@mohammedkhaja]

Please make a video on creating a full featured code editor using javascript.

[@mattmaloney5988]

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.

[@Gaff.]

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.

[@eugeniogonzato]

Thanks for your videos, you are the best

[@jarrayamehdi6566]

Wonderful tutorial, thx a lot =)

[@SEGACD32XMODEL1]

Github Copilot knows a bunch of this code already

[@leeyahav4754]

amazing tutorial thnx a lot Kyle

[@baatar]

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?

[@CareerProgramming]

Great tutorial Kyle!

[@Roknok]

Happy diwali

[@yasir269050]

Very well made. Awesome

[@nicholaswhite7351]

Ты крут, чувак!

[@crvpted]

This is epic pog.

[@whoman7930]

Instead of doing Math.floor() I always do, 5.76 | 0 Which return the number 5. Is it good to do that?

[@sethhendricks348]

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. kzbin.info/www/bejne/o5bWpmprhbl3eZo

[@herbertk9266]

Thank you

[@gerson-v-w5b]

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.

[@daveisdead]

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

[@laysdong]

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

[@DevsLikeUs]

Great info, thank you.

[@liLi-lg8xv]

Your hair looks awesome 👌

[@rajureddy7512]

Good job man

[@techwithshudarsan559]

!(I understood all your code)

[@TheRegalboss]

You are the best! 👌🏻

[@muzafferckay2609]

Hi Kyle why dont you use factory function instead of class?

[@percyisiah]

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?

[@stianmartinsen-stormyr1737]

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.

[@sakshigosain238]

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?

[@ransom.52]

...if there was a war between... 2-4 players maybe 4 additional in lobby, how would you code that deal?...

[@robiparvez]

awesome, bro

[@simaopacheco4529]

If that is all in client side it means all card values can be manipulated?

[@LuisVallejo21]

Hi Kyle, what programming paradigm do you mostly use?

[@baatar]

Do you offer a discounted bundle for the JavaScript and React course?

[@johnniegilkerson4724]

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

[@juguetestoys1137]

hi master ! Can you build a simple flashcard app ?

[@gaurishagrawal9404]

How make it multiplayer?

[@Gaff.]

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.

[@brimmedHat]

Bravo!

[@mdsamir8495]

Nice video sir, I want one video on voice recognition using google API for react native App. Please help me.

[@biigsmokee]

is using flatMap the same as mapping the spread of ...suit @ 8:45?

[@turing4991]

Happy Diwali

[@haythemsaidi91]

Beautiful

[@tomimontaana50]

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

[@barrydlight17]

how are you opening the index.html file?

[@tomimontaana50]

@@barrydlight17 hi i open the index with chrome

[@barrydlight17]

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

[@tomimontaana50]

@@barrydlight17 thanks in live server is running

[@barrydlight17]

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

[@dafrenchie59]

Unless all aces are served to one player, isn't it an endless game ?

[@rodwinpieterse1950]

So bummed I cannot afford your JS course.

[@leepowell2922]

I'm having trouble at kzbin.info/www/bejne/hKm1qHyQjM9_qqc (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?

[@michelebarreto8289]

Does anyone know how to make the array return 5 cards? Please

[@kuyabobss]

Hi is your react course [Learn React Today] up to date?

[@WebDevSimplified]

It is. It uses hooks and function components for everything.

[@abhilekhgautam5963]

Great!!!

[@deansprivatearchive]

suit, rank*

[@mikaelfarro]

Hey what about a chess clone?

[@avi12]

8:53 What the hell is that sound?

[@WebDevSimplified]

Lol. I have no idea. Sounds like my computer was yelling at me

[@Roknok]

@@WebDevSimplified happy diwali

[@tyrusearls5553]

I would love for your help to develop an app! This is amazing!

[@elijahantony4300]

How did you make that horizontal array (value and suit) vertical?

[@MikeAgge]

i also wonder this let me know if u found it

[@elijahantony4300]

@@MikeAgge He is using an extension called prettier, when he presses ctrl+s or ctrl+shift+i it formats automatically.

[@MistyDGreat1]

Build a Poker Game pls (Hold' em Texas) lol

[@joshuadarby5820]

@8:53 thought i was having a stroke

[@rupeshgarhwal1111]

Cross Origin Request Blocked error is comming

[@Gsudi]

What would be your suggestion for an easy clean solve?

[@alwinvillero4404]

if i get the money im going to register in skillshare :)

[@Roknok]

Happy children's day!

[@alwinvillero4404]

ah yes, the children the future

[@thedduck]

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?

[@webosm6494]

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. :)

[@godsepicgamer3825]

I cant even figure out how spread out cards on the x axis 😭

[@wiljagerhardt1219]

13:50 No Pattern completely random, ME sees J, J, J, 10,10,10

[@swoorp]

can you share your pc config??

[@abe10]

Lol why

[@swoorp]

@@abe10 because I want to build a new one... Just to get an idea

[@wenchongwang1685]

There is a bug here: Once player has an Ace in his deck , he will never lose.

[@twinkiefrost6668]

Why?

[@stianmartinsen-stormyr1737]

Yeah, I`m thinking the same.

[@stianmartinsen-stormyr1737]

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

[@jklmnop]

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

[@anilsaraf4450]

I need you help sir

[@user-ri9cn2rs5i]

watched the tutorial basically twice and made sure all the characters were correct and the game is still not rendering correctly...

[@cristiandorultan]

Min 5:56 😅

[@jerrykokkat176]

Please explain in java

[@ArvindKumar-sm6uh]

Rxce app mod bana do

[@AP-ds9bb]

how do I contact you?

[@demanitnt]

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

[@stoinks6840]

broo just tell us what we need to put in fucking first instead of going back n changing shit

[@digital-artefakt]

i have made a blackjack with python and it is way easier than this:D