-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcheckers.html
More file actions
125 lines (115 loc) · 5.13 KB
/
checkers.html
File metadata and controls
125 lines (115 loc) · 5.13 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkers</title>
<link rel="stylesheet" href="css/checkers.css">
</head>
<body>
<div id="gameContainer">
<div id="gameInfo">
<h2>Checkers</h2>
<p class="description">
Checkers is a traditional board game played between two players.
Players move their pieces diagonally across the board and capture
opponent pieces by jumping over them. The goal is to capture all of
the opponent's pieces or block them so they cannot make any moves.
</p>
<p class="instructions">
Click a piece to select it, then click a square to move.
</p>
</div>
<div id="playerSetup">
<label>Red Player:</label>
<input type="text" id="playerRed" placeholder="Enter name">
<label>Black Player:</label>
<input type="text" id="playerBlack" placeholder="Enter name">
<button type="button" id="startGame">Start Game</button>
</div>
<!-- Turn Indicator -->
<p id="status">Red Player's Turn</p>
<div id="boardWrapper">
<!-- Game Board -->
<div id="board">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</div>
<p id="winnerMessage"></p>
<!-- Restart Button -->
<button type="button" id="restartBtn">Restart Game</button>
<!-- Scoreboard -->
<div id="scoreboard">
<p>Red Wins: <span id="redWins">0</span></p>
<p>Black Wins: <span id="blackWins">0</span></p>
</div>
<!-- Navigation -->
<a href="mainPage.html">Back to Game Menu</a>
</div>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<script src="js/checkers.js"></script>
</body>
</html>