-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (80 loc) · 2.6 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Simon Game</title>
<link
href="https://fonts.googleapis.com/css?family=Press+Start+2P"
rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1
id="level-title"
class="typed"
data-typed-items="Welcome to the Simon Game, Press A Key to Start"></h1>
<div class="container">
<div lass="row">
<div type="button" id="green" class="btn green"></div>
<div type="button" id="red" class="btn red"></div>
</div>
<div class="row">
<div type="button" id="yellow" class="btn yellow"></div>
<div type="button" id="blue" class="btn blue"></div>
</div>
</div>
<div class="input-div" style="margin-top: 100px; text-align: center">
<button>START</button>
</div>
<div class="description" style="margin-top: 100px">
<h3
style="
font-family: Arial, Helvetica, sans-serif;
font-size: 2rem;
text-align: center;
color: white;
">
Designed by <em>Oyewole Agboola. A</em>
</h3>
</div>
<div class="rules">
<h3>Instructions</h3>
<p>
Objective: The goal of the game is to repeat a sequence of colors and
sounds that the game presents. The sequence gets longer and more
challenging as you progress. How long can you remember and repeat the
pattern?
</p>
<h3>How to Play</h3>
<p>
<b>Start:</b>
Press the "Start" button to begin the game.
</p>
<p>
<b>Watch and Listen:</b>
Pay attention to the sequence of colors and sounds that the game
presents. Each color represents a different sound.
</p>
<p>
<b>Repeat the Sequence:</b>
After the sequence is played, use the corresponding buttons (or
gestures, if applicable) to repeat the exact sequence. Be careful and
accurate!
</p>
<p>
<b>Correct Sequence:</b>
If you successfully repeat the sequence, the game will add another step
to the pattern.
</p>
<p>
<b>Incorrect Sequence:</b>
If you make a mistake, the game will signal that the sequence was
incorrect. Take note of your mistake and try again.
</p>
GOOD LUCK PLAYING THE GAME!
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>