Skip to content

Commit d88cab3

Browse files
he-is-talhahe-is-talha
authored
Merge pull request #9 from Feat: Add Chess Game (#9)
Feat: Add Chess Game
2 parents 307e66a + 0b89745 commit d88cab3

3 files changed

Lines changed: 1073 additions & 0 deletions

File tree

‎33-Chess-Game/index.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
6+
<title>Talha - Chess Game</title>
7+
8+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
9+
<!-- Also uploaded the demo of this code in a gif : https://c.tenor.com/x8v1oNUOmg4AAAAd/tenor.gif-->
10+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
11+
12+
<!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
13+
<!-- More html-css-js Games Calculators Games Cards Elements Projects on https://www.github.com/he-is-talha -->
14+
<!-- 👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻👆🏻-->
15+
16+
<link rel="icon" href="https://i.ibb.co/M6KTWnf/pic.jpg" />
17+
<link rel="stylesheet" href="style.css" />
18+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&display=swap" rel="stylesheet" />
19+
</head>
20+
<body>
21+
<div class="wrapper">
22+
<!-- Mode selection screen -->
23+
<div id="modeScreen" class="mode-screen">
24+
<h1>Chess</h1>
25+
<p>Choose game mode</p>
26+
<div class="mode-buttons">
27+
<button type="button" id="vsFriendBtn" class="mode-btn">
28+
<span class="mode-icon">👥</span>
29+
Vs Friend
30+
</button>
31+
<button type="button" id="vsAiBtn" class="mode-btn">
32+
<span class="mode-icon">🤖</span>
33+
Vs AI
34+
</button>
35+
</div>
36+
</div>
37+
38+
<!-- Game screen -->
39+
<div id="gameScreen" class="game-screen hidden">
40+
<header class="header">
41+
<h1>Chess</h1>
42+
<div class="game-info">
43+
<span class="turn-label" id="turnLabel">White to move</span>
44+
<span class="mode-badge" id="modeBadge">Vs Friend</span>
45+
<button type="button" id="newGameBtn" class="btn">New Game</button>
46+
<button type="button" id="changeModeBtn" class="btn btn-ghost">Change Mode</button>
47+
</div>
48+
</header>
49+
50+
<main class="game-container">
51+
<div id="board" class="board"></div>
52+
<div class="promotion-overlay hidden" id="promotionOverlay">
53+
<p>Promote pawn to:</p>
54+
<div class="promotion-pieces" id="promotionPieces"></div>
55+
</div>
56+
</main>
57+
58+
<div id="gameOverOverlay" class="game-over-overlay hidden">
59+
<div class="game-over-box">
60+
<h2 id="gameOverTitle">Checkmate!</h2>
61+
<p id="gameOverMessage"></p>
62+
<button type="button" id="playAgainBtn" class="btn btn-large">Play Again</button>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<script src="script.js"></script>
69+
</body>
70+
</html>

0 commit comments

Comments
 (0)