Ever wanted to build a fun little card game where you can go head-to-head against the computer? Look no further! In this blog, we’ll walk through a mini project called Card Wars, a simple game that lets you and your digital rival draw cards from a virtual deck and compete for the highest value.
You’ll learn how to integrate an external API, update the DOM dynamically, and add some interactive flair with clean CSS—all in under 100 lines of JavaScript!
Video Tutorial:
🧠 What You’ll Learn
-
Using the Deck of Cards API to fetch and draw cards
-
Comparing card values programmatically
-
Updating scores and card images dynamically
-
Writing clean HTML and CSS for UI polish
📄 Project Structure
The project is made up of three main files:
-
index.html– Structure of the game -
style.css– Styles and layout -
script.js– Core logic and interactivityHTML:
HTML stands for HyperText Markup Language. It’s the skeleton of your webpage—it tells the browser what to show.
Key elements:
-
A container to wrap the entire game.
-
Two image slots to display your card and the computer’s card.
-
A button to draw new cards.
-
A scoreboard to track and display each player’s points.
-
A result box to show who won each round.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Card Wars</title> <!-- Google Fonts --> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet" /> <!-- Stylesheet --> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <h1>Card Wars</h1> <h3>You VS Computer</h3> <div class="cards"> <div> <h2>You</h2> <img id="player-card" src="https://deckofcardsapi.com/static/img/back.png" alt="Player Card" /> </div> <div> <h2>Computer</h2> <img id="computer-card" src="https://deckofcardsapi.com/static/img/back.png" alt="Computer Card" /> </div> </div> <button onclick="drawCards()">Draw Cards</button> <div class="scoreboard"> 🧍Your Score: <span id="player-score">0</span><br /> 🤖 Computer Score: <span id="computer-score">0</span> </div> <div class="result" id="result-text"></div> </div> <script src="script.js"></script> </body> </html>CSS:
The CSS file makes the game look visually appealing by:
-
Setting a dark theme with orange highlights.
-
Centering everything neatly.
-
Styling the card images and buttons.
-
Adding padding, colors, rounded corners, spacing, and layout.
body { font-family: "Poppins", sans-serif; background-color: #000000; text-align: center; padding: 20px; } .container { background-color: #222224; width: min(500px, 90vw); margin: 0 auto; border-radius: 10px; padding: 30px; } .cards { display: flex; justify-content: center; gap: 20px; margin: 20px 0; } h1 { color: #ff7651; font-weight: 300; letter-spacing: 0.5px; } h2, h3 { font-weight: 500; color: #d0d0d0; letter-spacing: 0.5px; } .cards img { width: 100px; height: auto; } button { padding: 10px 20px; background: #ff7651; color: #ffffff; border: none; border-radius: 5px; cursor: pointer; } .scoreboard { color: #d0d0d0; margin-top: 20px; font-size: 18px; } .result { margin-top: 10px; color: #d0d0d0; font-size: 20px; }Javascript:
-
This is where the actual gameplay lives. JavaScript controls what happens when the player clicks the button:
What it does:
-
Starts by getting a fresh shuffled deck from an API.
-
Draws two cards (one for you, one for the computer) each time the button is clicked.
-
Displays the card images on the screen.
-
Compares the values of the cards to decide who wins.
-
Updates the scores and shows a result message (Win, Lose, or Tie).
Think of it like:
⚙️ The brain and engine — it powers everything behind the scenes and responds to user actions.
let deckId = ""; let playerScore = 0; let computerScore = 0; //Initialize Deck fetch(`https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1`) .then((res) => res.json()) .then((data) => { deckId = data.deck_id; }); const valueMap = { ACE: 14, KING: 13, QUEEN: 12, JACK: 11, }; function getCardValue(value) { return valueMap[value] || parseInt(value); } function drawCards() { fetch(`https://deckofcardsapi.com/api/deck/${deckId}/draw/?count=2`) .then((res) => res.json()) .then((data) => { const playerCard = data.cards[0]; const computerCard = data.cards[1]; const playerImg = document.getElementById("player-card"); const computerImg = document.getElementById("computer-card"); //Update card Images playerImg.src = playerCard.image; computerImg.src = computerCard.image; //Wait for both the images to load before calculating score Promise.all([ new Promise((resolve) => (playerImg.onload = resolve)), new Promise((resolve) => (computerImg.onload = resolve)), ]).then(() => { const playerVal = getCardValue(playerCard.value); const computerVal = getCardValue(computerCard.value); const resultText = document.getElementById("result-text"); if (playerVal > computerVal) { playerScore += 1; resultText.textContent = "You Win This Round 🎉"; } else if (playerVal < computerVal) { computerScore += 1; resultText.textContent = "Computer Wins This Round😔"; } else { resultText.textContent = "It's a tie! No Points Awarded"; } document.getElementById("player-score").textContent = playerScore; document.getElementById("computer-score").textContent = computerScore; }); }); }🚀 What Makes This Cool?
-
Real-time interactivity using JavaScript.
-
Dynamic content pulled from a real API (
deckofcardsapi.com). -
Visually clean layout using modern fonts and CSS.
-
A great beginner project to understand how web development works.
Want to make it even better?
-
Add a “Reset Game” button.
-
End the game at 10 points and show a final message.
-
Play sound effects or animations on card draw.
-
Use animations when cards appear.
-
-
-
