-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (69 loc) · 4.62 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Connect4 game CatDog edition.">
<title>Connect4 Cat Dog Edition</title>
<link rel='stylesheet' href='styles.css'>
<link rel="icon" type="image/png" href="image/catdog.png"/>
</head>
<body>
<div id='main'>
<div class=header>
<img alt='heading image of cat dog' src='image/catdog.png'>
</div>
<div class='main'>
<div class='turn'>
<h1 id='update-turn'></h1>
<button id='reset'>Clear Board</button>
</div>
<div class=board>
<div id='clicker'></div>
<div id='board'></div>
</div>
<div class='total'>
<h1 class='scoreboard'> SCOREBOARD</h1>
<div class='players'>
<div class='player1'>
<h3>Player <img alt ='cat image' src='image/catred.png'> : <span class='p1w'>0</span></h3>
</div>
<div class='player2'>
<h3>Player <img alt='dog image' src='image/dog-yellow.png'> : <span class='p2w'>0</span></h3>
</div>
</div>
</div>
</div>
</div>
<div class='game-rules'>
<div class='intro'>
<div class='game-header'>
<h3>Game Rules : How to Play Connect4</h3>
</div>
<div class='plus'>
<div class='bar one'></div>
<div class='bar two'></div>
</div>
</div>
<div class='game-instructions'>
<p class='heading'>OBJECTIVE:</p>
<p>To be the first player to connect 4 of the same colored discs in a row (either vertically, horizontally, or diagonally)</p>
<p class='heading'>HOW TO PLAY:</p>
<ul>
<li>First, decide who goes first and what color each player will have. </li>
<li>Players must alternate turns, and only one disc can be dropped in each turn. </li>
<li>On your turn, drop one of your colored discs from the top into any of the seven slots. </li>
<li>The game ends when there is a 4-in-a-row or a stalemate.</li>
</ul>
</div>
</div>
<footer>
<div class='social'>
<a href='https://github.com/1anya1' aria-label='github repo' target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><g> <g xmlns="http://www.w3.org/2000/svg"><g><path d="M255.968,5.329C114.624,5.329,0,120.401,0,262.353c0,113.536,73.344,209.856,175.104,243.872 c12.8,2.368,17.472-5.568,17.472-12.384c0-6.112-0.224-22.272-0.352-43.712c-71.2,15.52-86.24-34.464-86.24-34.464 c-11.616-29.696-28.416-37.6-28.416-37.6c-23.264-15.936,1.728-15.616,1.728-15.616c25.696,1.824,39.2,26.496,39.2,26.496 c22.848,39.264,59.936,27.936,74.528,21.344c2.304-16.608,8.928-27.936,16.256-34.368 c-56.832-6.496-116.608-28.544-116.608-127.008c0-28.064,9.984-51.008,26.368-68.992c-2.656-6.496-11.424-32.64,2.496-68 c0,0,21.504-6.912,70.4,26.336c20.416-5.696,42.304-8.544,64.096-8.64c21.728,0.128,43.648,2.944,64.096,8.672 c48.864-33.248,70.336-26.336,70.336-26.336c13.952,35.392,5.184,61.504,2.56,68c16.416,17.984,26.304,40.928,26.304,68.992 c0,98.72-59.84,120.448-116.864,126.816c9.184,7.936,17.376,23.616,17.376,47.584c0,34.368-0.32,62.08-0.32,70.496 c0,6.88,4.608,14.88,17.6,12.352C438.72,472.145,512,375.857,512,262.353C512,120.401,397.376,5.329,255.968,5.329z" fill="#0196d6" data-original="#000000" style=""/></g></g></g></svg></a>
<a href='https://www.linkedin.com/in/anna-filatova/n' aria-label='linkedin' target="_blank" rel="noopener noreferrer"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 152 152" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><g xmlns="http://www.w3.org/2000/svg" id="Layer_2" data-name="Layer 2"><g id="Color"><path id="_10.Linkedin" d="m76 0a76 76 0 1 0 76 76 76 76 0 0 0 -76-76zm-22.1 116h-16.58v-53.41h16.58zm-8.3-60.7a9.65 9.65 0 1 1 9.61-9.7 9.68 9.68 0 0 1 -9.61 9.7zm70.4 60.7h-16.57v-26c0-6.2-.12-14.15-8.62-14.15s-10 6.74-10 13.7v26.45h-16.51v-53.41h15.91v7.28h.23c2.21-4.2 7.62-8.63 15.69-8.63 16.78 0 19.87 11.06 19.87 25.42z" data-name="10.Linkedin" fill="#0196d6" data-original="#000000" style=""/></g></g></g></svg></a>
</div>
</footer>
<script src='main.js'></script>
</body>
</html>