How To Build A Simple Card Game With JavaScript - finalbosscardgame.com

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

18 Comments

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

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

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

  4. Your videos are great…succinct and informative.

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

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

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

  8. Github Copilot knows a bunch of this code already

Leave a Reply

Your email address will not be published.