How To Build A Simple Card Game With JavaScript -

How To Build A Simple Card Game With JavaScript

Web Dev Simplified
Views: 117971
Like: 2771
The first 1000 people to use the link will get a free trial of Skillshare Premium Membership:

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:

⏱️ 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

This video was sponsored by Skillshare

#CardGame #WDS #JavaScript


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

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

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

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

  5. Your videos are great…succinct and informative.

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

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

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

  9. Github Copilot knows a bunch of this code already

Leave a Reply

Your email address will not be published.