Skip to content

Commit 118194e

Browse files
committed
Add Blackjack game - Closes #191
1 parent fb0e9ac commit 118194e

File tree

4 files changed

+1018
-0
lines changed

4 files changed

+1018
-0
lines changed

data/projects.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -318,5 +318,13 @@
318318
"category": "Small Games",
319319
"categoryKey": "games",
320320
"difficulty": "medium"
321+
},
322+
{
323+
"title": "Blackjack",
324+
"slug": "blackjack",
325+
"description": "Classic card game - Beat the dealer to 21! Features betting, realistic animations, and dark/light themes.",
326+
"category": "Game",
327+
"categoryKey": "game",
328+
"difficulty": "Intermediate"
321329
}
322330
]

projects/blackjack/index.html

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Blackjack - 21</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="theme-toggle">
11+
<button id="themeBtn" aria-label="Toggle theme">
12+
<span class="icon">🌙</span>
13+
</button>
14+
</div>
15+
16+
<div class="container">
17+
<header>
18+
<h1>Blackjack</h1>
19+
<div class="stats">
20+
<div class="stat-item">
21+
<span class="stat-label">Chips:</span>
22+
<span id="chips" class="stat-value">1000</span>
23+
</div>
24+
<div class="stat-item">
25+
<span class="stat-label">Wins:</span>
26+
<span id="wins" class="stat-value">0</span>
27+
</div>
28+
<div class="stat-item">
29+
<span class="stat-label">Losses:</span>
30+
<span id="losses" class="stat-value">0</span>
31+
</div>
32+
</div>
33+
</header>
34+
35+
<main class="game-area">
36+
<section class="dealer-section">
37+
<div class="player-info">
38+
<h2>Dealer</h2>
39+
<div class="hand-value" id="dealerValue">0</div>
40+
</div>
41+
<div class="cards-container" id="dealerCards"></div>
42+
</section>
43+
<div class="game-message" id="gameMessage"></div>
44+
<section class="player-section">
45+
<div class="player-info">
46+
<h2>You</h2>
47+
<div class="hand-value" id="playerValue">0</div>
48+
</div>
49+
<div class="cards-container" id="playerCards"></div>
50+
</section>
51+
<section class="betting-section" id="bettingSection">
52+
<h3>Place Your Bet</h3>
53+
<div class="bet-controls">
54+
<button class="bet-btn" data-bet="10">$10</button>
55+
<button class="bet-btn" data-bet="25">$25</button>
56+
<button class="bet-btn" data-bet="50">$50</button>
57+
<button class="bet-btn" data-bet="100">$100</button>
58+
</div>
59+
<div class="custom-bet">
60+
<input type="number" id="customBet" min="1" placeholder="Custom amount">
61+
<button id="placeBetBtn">Place Bet</button>
62+
</div>
63+
<div class="current-bet">Current Bet: $<span id="currentBet">0</span></div>
64+
</section>
65+
<section class="controls" id="gameControls" style="display: none;">
66+
<button id="hitBtn" class="control-btn primary">Hit</button>
67+
<button id="standBtn" class="control-btn secondary">Stand</button>
68+
<button id="newGameBtn" class="control-btn tertiary">New Game</button>
69+
</section>
70+
</main>
71+
</div>
72+
73+
<script src="main.js"></script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)