-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
124 lines (122 loc) · 5.57 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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!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">
<script type="text/javascript" src="dist/main.js" charset="utf-8" defer></script>
<link rel="stylesheet" href="assets/stylesheets/style.css">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/31386d0461.js" crossorigin="anonymous"></script>
<audio id="sword-sound" src="./assets/audio/sword-unsheathe.m4a"></audio>
<audio id="tile-sound" src="./assets/audio/click-sound.m4a"></audio>
<audio id="button-sound" src="./assets/audio/button-hover.wav"></audio>
<audio id="gong-sound" src="./assets/audio/gong-sound.mp3"></audio>
<audio id="music" src="./assets/audio/music.mp3"></audio>
<title>Ken Ken Showdown</title>
</head>
<body>
<header>
<img src="https://fontmeme.com/permalink/200130/76e9fc5809979417edd57a42944ebadf.png" alt="brush-fonts" border="0">
</header>
<section id="body">
<ul id="buttons">
<li><img id="practice" src="./assets/images/practice-button.png"></li>
<li><img id="solo-button" src="./assets/images/solo-button.png"></li>
<li><img id="vs-button" src="./assets/images/versus-button.png"></li>
<li><img id="how-to-play" src="./assets/images/how-to-play-button.png"></li>
</ul>
<div id="game" class="hidden">
<div class="player-info">Player 1</div>
<div id="grid">
</div>
</div>
<div id="game2" class="hidden">
<div class="player-info">Player 2</div>
<div id="grid2">
</div>
</div>
<div id="volume-button">
<i class="fas fa-volume-up"></i>
</div>
<div id="new-game-button" class="hidden" >
<img src="./assets/images/new-game-button.png">
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div>
<div>
<h2>Instructions</h2>
Welcome to Ken Ken Showdown, a competitive math puzzle game!
Each row and column must only have one of each number.
Tiles within bolded lines must mathemetically equal the shown result.
Use hotkeys or click on tile to move tiles.
<div class="row-instructions">
<div>
<i class="fas fa-check"></i>
</div>
<div>
<i class="fas fa-times"></i>
</div>
<div>
<img src="./assets/images/row-good.png">
<p>All unique numbers</p>
</div>
<div>
<img src="./assets/images/row-bad.png">
<p>Repeating numbers</p>
</div>
<div>
<img src="./assets/images/box-good.png">
<p>Numbers add up to 3</p>
</div>
<div>
<img src="./assets/images/box-error.png">
<p>Numbers don't add up to 3</p>
</div>
</div>
</div>
<div id="key-instructions">
<div class="player-instructions">
<div>Player 1</div>
<img src="./assets/images/wasd.gif">
</div>
<div class="player-instructions">
<img src="./assets/images/ken-ken-guide.gif">
</div>
<div class="player-instructions">
<div>Player 2</div>
<img src="./assets/images/arrow-keys.gif">
</div>
</div>
<div>
<h2>Modes</h2>
<p><strong>Practice:</strong> Practice solving Ken-Ken Puzzles</p>
<p><strong>Solo:</strong> Race against a computer player!</p>
<p><strong>Versus:</strong> Race against your friend!</p>
</div>
</div>
</div>
</div>
<div id="player-1-win" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img class="victory" src="./assets/images/player-1-win.jpeg">
</div>
</div>
<div id="player-2-win" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img class="victory" src="./assets/images/player-2-win.jpeg">
</div>
</div>
</section>
<footer>
<a href="https://github.com/shaoevans"><i class="fab fa-github"></i></a>
<a href="https://www.linkedin.com/in/evans-shao-b76201139/"><i class="fab fa-linkedin-in"></i></a>
<a href="https://angel.co/evans-shao"><i class="fab fa-angellist"></i></a>
</footer>
</body>
</html>