Skip to content

Commit 0a70f9a

Browse files
talha-yousaf-cowlartalha-yousaf-cowlar
committed
Add Chess Game with gameplay mechanics, mode selection, and responsive design
1 parent 307e66a commit 0a70f9a

3 files changed

Lines changed: 963 additions & 0 deletions

File tree

‎33-Chess-Game/index.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
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" />
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+
</div>
47+
</header>
48+
49+
<main class="game-container">
50+
<div id="board" class="board"></div>
51+
<div class="promotion-overlay hidden" id="promotionOverlay">
52+
<p>Promote pawn to:</p>
53+
<div class="promotion-pieces" id="promotionPieces"></div>
54+
</div>
55+
</main>
56+
57+
<div id="gameOverOverlay" class="game-over-overlay hidden">
58+
<div class="game-over-box">
59+
<h2 id="gameOverTitle">Checkmate!</h2>
60+
<p id="gameOverMessage"></p>
61+
<button type="button" id="playAgainBtn" class="btn btn-large">Play Again</button>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<script src="script.js"></script>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)