forked from lucyfox4131/color-wars
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
51 lines (45 loc) · 1.63 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Dosis|Raleway" rel="stylesheet">
<title>Color Wars</title>
</head>
<body>
<div id="game-div">
<div class="scoreboard">
<h1 class="scores">Scoreboard</h1>
<p id="scores"></p>
</div>
<div class="canvas-elements">
<canvas id="document" width="500px" height="500px"></canvas>
<br>
<canvas id="scoresCanvas" width="500" height="100"></canvas>
</div>
</div>
<div id="game-start" class="magic-center">
<h1>Welcome to Color Wars</h1>
<button class="btn" id="start-btn" name="button">Start Game!</button>
<button class="btn" id="instructions-btn" name="button">Instructions</button>
</div>
<div id="level-up">
<h1>Nice Job! Level Up?</h1>
<button class="btn" id="level-up-btn" name="button">Next Level</button>
</div>
<div id="instructions" class="magic-center">
<h1>Color Wars</h1>
<p>
Each level is a pattern with two computer colors on the board. Place your dot of color on the board (you're orange!), and watch the colors race to fill in the pattern.
To win the level, place your color so that it takes up the majority of the pattern when it expands.
The more room your color takes up, the more points you win.
Will you be a Color Wars champion? Try it out!
</p>
<button class="btn" id="got-it" name="button">Got it!</button>
</div>
<div id="game-over" class="magic-center">
<h1>You Win! Nice Job!</h1>
</div>
<script src="main.bundle.js"></script>
</body>
</html>