How To Build A Simple Card Game With JavaScript

The first 1000 people to use the link will get a free trial of Skillshare Premium Membership: skl.sh/webdevsimplified11201
JavaScript Simplified Course: javascriptsimplified.com
Card games may appear simple on the surface, but there is actually a lot of planning and problem solving that goes into creating a card game. In this video I show you how to create a deck of cards in JavaScript and CSS. Then I show you how to build a the simple card game war with this deck of cards.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/W...
CSS Data Attribute Blog Article: blog.webdevsimplified.com/201...
Emmet Tutorial: • Learn Emmet In 15 Minu...
🧠 Concepts Covered:
- OOP JavaScript
- CSS data attributes
- JavaScript modules
- How to plan a large project
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
01:31 - Demo
02:16 - Deck of Cards Setup
13:58 - HTML
15:39 - CSS
24:56 - Dynamically Render Cards
28:19 - Implement Game Logic
42:48 - Outro
Disclaimer:
This video was sponsored by Skillshare
#CardGame #WDS #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.

[@billyzman666]

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

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

[@ridl27]

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

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

[@palilomut4728]

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

[@LeoPacheco87]

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

[@javascriptdev2273]

you always add something unique to your videos

[@superdaveygravy]

Your videos are great...succinct and informative.

[@CareerProgramming]

Great tutorial Kyle!

[@yasir269050]

Very well made. Awesome

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

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

[@lardosian]

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

[@leeyahav4754]

amazing tutorial thnx a lot Kyle

[@DevsLikeUs]

Great info, thank you.

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

[@jarrayamehdi6566]

Wonderful tutorial, thx a lot =)

[@eugeniogonzato]

Thanks for your videos, you are the best

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

[@rajureddy7512]

Good job man

[@TheRegalboss]

You are the best! 👌🏻

[@majedulislam4982]

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

[@lusti159]

Thank you for this contet!

[@robiparvez]

awesome, bro

[@vasantbajantri3074]

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

[@crowlsyong]

Dude you are a legend

[@crvpted]

This is epic pog.

[@abhilekhgautam5963]

Great!!!

[@herbertk9266]

Thank you

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

[@TheTenThousandThings]

Bravo!

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

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

[@haythemsaidi91]

Beautiful

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

[@LuisVallejo21]

Hi Kyle, what programming paradigm do you mostly use?

[@LokeshKumar-vo2xc]

Happy Diwali bhai

[@nicholaswhite7351]

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

[@itsmanojb]

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

[@mohammedkhaja]

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

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

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

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

[@dineshkinibailoor340]

Is that fisher-yates shuffle algorithm at 11.45

[@baatar]

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

[@techwithshudarsan559]

!(I understood all your code)

[@eddyelamin9015]

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

[@muzafferckay2609]

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

[@piyushmahapatra5402]

Happy Diwali Bhai ❤️

[@vijaychauhan2450]

Happy diwali bhai

[@AdityaSharan811]

Happy diwali bhaii 🎊🔥

[@biigsmokee]

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

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

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

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

[@liLi-lg8xv]

Your hair looks awesome 👌

[@Roknok]

Happy diwali

[@xenon4602]

Happy Diwali

[@michelebarreto8289]

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

[@simaopacheco4529]

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

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

[@bunnybloods768]

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

[@SEGACD32XMODEL1]

Github Copilot knows a bunch of this code already

[@mdsamir8495]

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

[@virajkinik2725]

Why again two new instances of class Deck were created for playerDeck and computerDeck ? Couldnt the first deck be only used to just divide into 2 ?

[@juguetestoys1137]

hi master ! Can you build a simple flashcard app ?

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

[@WebDevSimplified]

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

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

[@ransom.52]

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

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

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

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

[@rodwinpieterse1950]

So bummed I cannot afford your JS course.

[@joshuadarby5820]

@8:53 thought i was having a stroke

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

[@deansprivatearchive]

suit, rank*

[@mikaelfarro]

Hey what about a chess clone?

[@dafrenchie59]

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

[@kuyabobss]

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

[@WebDevSimplified]

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

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

[@tyrusearls5553]

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

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

[@anilsaraf4450]

I need you help sir

[@MistyDGreat1]

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

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

[@cristiandorultan]

Min 5:56 😅

[@rupeshgarhwal1111]

Cross Origin Request Blocked error is comming

[@Gsudi]

What would be your suggestion for an easy clean solve?

[@godsepicgamer3825]

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

[@jerrykokkat176]

Please explain in java

[@alwinvillero4404]

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

[@Roknok]

Happy children's day!

[@alwinvillero4404]

ah yes, the children the future

[@ArvindKumar-sm6uh]

Rxce app mod bana do

[@user-ri9cn2rs5i]

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

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

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

[@AP-ds9bb]

how do I contact you?

[@stoinks6840]

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

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