How To Build A Simple Card Game With JavaScript
JavaScript Simplified Course:
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:
CSS Data Attribute Blog Article:
Emmet Tutorial:
🧠 Concepts Covered:
– OOP JavaScript
– CSS data attributes
– JavaScript modules
– How to plan a large project
🌎 Find Me Here:
My Blog:
My Courses:
Patreon:
Twitter:
Discord:
GitHub:
CodePen:
⏱️ 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
Can anyone explain the freshDeck() function? I don't really get what's going on inside the function… Thanks!
Please make a video on creating a full featured code editor using javascript.
Cross Origin Request Blocked error is comming
Hi Kyle why dont you use factory function instead of class?
2:48
.js files hurt my eyes now
.ts is the way to go
A little nostalgic tutorial. It's a game of my childhood 🙂 Ty Kyle
Msth.random() is not really random. You should use something like crypto.randomBytes
Very well made. Awesome
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
Is that fisher–yates shuffle algorithm at 11.45
Ты крут, чувак!
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? 🙂
keep up the superb work, I've learnt so much from this tutorial(as well), thank you Kyle
I looked at skillshare website. It feels like a scam page. If you click "go premium" you can't see any prices. And it's impossible to contact them unless you have an account. Is that site really legit?
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
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.
Awesome video. Can you please write test cases for this project. It will be very helpful.
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
amazing tutorial
thnx a lot Kyle
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
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!
There is a bug here: Once player has an Ace in his deck , he will never lose.
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..
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?
cool thanks for showing a use for the get statements in classes! funny that numberOfCards is actually 1 character longer than cards.length tho
You can do:
[this.cards[newIndex], this.cards[i]] = [this.cards[i], this.cards[newIndex]]
!(I understood all your code)
suit, rank*
In Windows you can get the "♠","♣","♥","♦" heart spade etc by typing windows + r key, type charmap in run box, in charmap the Ariel font scrolling down you will see them.
Unless all aces are served to one player, isn't it an endless game ?
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!
Does anyone know how to make the array return 5 cards? Please
Beautiful
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.
How make it multiplayer?
I am looking for apps developer for my game. any body here who can do poker game like game? please lets set upa meeting.
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?
broo just tell us what we need to put in fucking first instead of going back n changing shit
If that is all in client side it means all card values can be manipulated?
Its impressive how easily you get around and create your code, thank you for this video!
watched the tutorial basically twice and made sure all the characters were correct and the game is still not rendering correctly…
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
Rxce app mod bana do
How did you make that horizontal array (value and suit) vertical?
hi master !
Can you build a simple flashcard app ?
i have made a blackjack with python and it is way easier than this:D
…if there was a war between… 2-4 players maybe 4 additional in lobby, how would you code that deal?…
Please explain in java
I need you help sir
Your hair looks awesome 👌