forked from mrayanne113/connect-four
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
29 lines (28 loc) · 1.13 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Connect Four</title>
<link rel="stylesheet" href="./lib/game.css">
</head>
<body>
<section class="checker-selection"></section>
<section class="container group">
<section class="left-sidebar">
<img class="logo" src="img/Connect_four_logo.png" alt="Connect Four Game">
<p>Player Red goes first. You can select which column to drop the checker to by using the right or left arrow keys, when you pick the column you can drop a checker with spacebar or the enter key. Player 2 (blue) goes second. Players will alternate turns after playing a checker. </p>
<p>Play alternates until one player gets four checkers of his or her color in a row.</p>
<p>The four in a row can be horizontal, vertical, or diagonal.</p>
<p id="show-winner"></p>
<section class="score-container">
<p>Red: <span id="red-score">0</span></p>
<p>Blue: <span id="blue-score">0</span></p>
</section>
</section>
<section class="right-col">
<canvas id="grid" width="700" height="700"></canvas>
</section>
</section>
<script src="main.bundle.js"></script>
</body>
</html>