-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (113 loc) · 3.18 KB
/
index.html
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
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Connect Four | A game by Felix Teutsch</title>
<link rel="stylesheet" href="./style/style.css">
<link rel="stylesheet" href="./style/gameOver.css">
<link rel="stylesheet" href="./style/score.css">
<link rel="stylesheet" href="./style/rules.css">
<link href="./img/favicon_light.svg" rel="icon" media="(prefers-color-scheme: light)">
<link href="./img/favicon_dark.svg" rel="icon" media="(prefers-color-scheme: dark)">
<link rel="shortcut icon" href="./favicon.svg" type="image/x-icon">
</head>
<body>
<div id="buttonArea">
<button id="newGame">New Game</button>
<button id="continueGame" style="display: none;">Continue Game</button>
</div>
<div id="gameArea">
<div id="scores">
<div class="player-score" id="red_score">
<h2>Player 1</h2>
<p id="redScore" class="score-display">0</p>
</div>
<div class="player-score" id="yellow_score">
<h2>Player 2</h2>
<p id="yellowScore" class="score-display">0</p>
</div>
</div>
<table id="board">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="winnerScreen" style="display: none;">
<div class="messageContainer">
<h2 id="winnerMessage"></h2>
<button id="playAgainButton">Play Again</button>
<button id="resetScoreButton">Reset Score</button>
</div>
</div>
<button id="showRules">Show Rules </button>
<div id="rules" style="display: none;">
<div class="messageContainer">
<h2>Connect Four Rules:</h2>
<ul>
<li>The game is played on a vertical grid of 6 rows and 7 columns.</li>
<li>Players take turns dropping their colored discs from the top into any of the columns.</li>
<li>The goal is to connect four of your colored discs vertically, horizontally, or diagonally.</li>
<li>If all the cells in a particular column are filled and a player still wants to make a move,
they must choose a different column.</li>
<li>The Border of the field indicates whose players turn it is</li>
</ul>
<button id="closeRules">Close</button>
</div>
</div>
</div>
<script src="./JavaScript/script.js"></script>
<script src="./JavaScript/rules.js"></script>
<script src="./JavaScript/landing.js"></script>
</body>
</html>