-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
60 lines (59 loc) · 3.02 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simon</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lexend+Peta&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Tomorrow&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Simon!</h1>
<h2>Memory Game</h2>
</header>
<nav></nav>
<main>
<section id="game-area">
<div id="game-container">
<div id="red" class="red game-buttons" data-number="0">RED</div>
<div id="gold" class="yellow game-buttons" data-number="1">YELLOW</div>
<div id="blue" class="blue game-buttons" data-number="2">BLUE</div>
<div id="orange" class="orange game-buttons" data-number="3">ORANGE</div>
<div id="green" class="green game-buttons" data-number="4">GREEN</div>
<div id="purple" class="purple game-buttons" data-number="5">PURPLE</div>
</div>
<br>
<div id="display-area">
<div id="status-display">
<button id="start-button">Start</button>
<p id="current-status">← Click Start!</p>
</div>
<div id="score-area">
<p>Score <span id="score-display"></span></p>
<p>HighScore <span id="highscore-display"></span></p>
</div>
<p id="all-time-high">All Time HighScore <span id ="all-time"></span></p>
</div>
</section>
<div id="modal">
<div id="text-container">
<p id="modal-textbox">
To start playing just click 'Close' below then click the 'Start' button on the main screen.<br>
The Original Simon game was an electronic device created in 1978 by Ralph Baer. Game play consists of watching a sequence of flashing lighted buttons and then repeating back the sequence by pressing the buttons in the same order. The sequence starts as one button and then increases by one every time you correctly repeat the sequence. The object of the game is to remember and correctly repeat the longest sequence you can.<br>
My adaptation increases the number of colored buttons to six and runs in your browser.
Read more about the original Simon game <a href="https://americanhistory.si.edu/collections/search/object/nmah_1302005">here.</a> Thanks for playing!<br>
<span id="textbox-foot"><button id="close">Close</button>
</span>
</p>
</div>
</div>
</main>
<footer class="footer">
<p>Made with Love♥ by JCR <span>2019</span></p>
</footer>
<script src="script.js"></script>
</body>
</html>