-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
147 lines (141 loc) · 6.22 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<html>
<head>
<title>Music score trainer</title>
<meta name="description" content="Learn to read music score with these awesome games!">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta property="og:image" content="http://www.natbrasil.org/wp-content/uploads/2014/05/piano.png" />
<meta property="og:title" content="Music score trainer" />
<meta property="og:description" content="Learn to read music score by playing a fun game!" />
<meta property="og:type" content="website" />
<meta property="fb:app_id" content="343991302439932">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-52254492-1', 'michalpaszkiewicz.co.uk');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="scoreBoard"></div>
<div class="settings-container">
<div class="settings-cover"></div>
<div class="settings-box">
<div class="info-line">You are on level: <div class="level">1</div></div>
<div class="info-line">Clef: <div class="current-clef">Treble</div></div>
<div class="info-lint">Mode: <div class="current-game-mode">Random notes</div></div>
<button onclick="runGame(); toggleMenu();">Start next level!</button>
<button class="switch-mode hidden" onclick="switchMode();">Switch game mode</button>
<button class="switch-clef hidden" onclick="switchClef();">Switch clef</button>
<button class="synth-button hidden" onclick="toggleSynth();">Change synth</button>
<div class="info-line">Coins: <div class="coins">0</div></div>
<button onclick="toggleShop();">Shop</button>
<button onclick="factoryReset();">Reset game</button>
<button onclick="window.location='http://www.michalpaszkiewicz.co.uk/'">By Michal Paszkiewicz</button>
<div class="facebook-container">
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
</div>
</div>
<div class="shop hidden">
Coins: <div class="coins">0</div>
<div class="products">
<div class="product" id="skip-level" title="Cost: 100">Skip level
<div class="product-cost">100</div>
</div>
<div class="product" id="bass-clef" title="Cost: 300">Bass clef
<div class="product-cost">300</div>
</div>
<div class="product" id="synth" title="Cost: 2000">Synth
<div class="product-cost">2000</div>
</div>
<div class="product" id="real-tunes" title="Cost:1000">Real tunes
<div class="product-cost">1000</div>
</div>
</div>
<button onclick="toggleShop();">Close</button>
</div>
</div>
<div id="main-container">
<div class="clef" style=""></div>
<div class="game-container"></div>
<div id="keyboard">
<div class="whitekey key" id="c"></div><div class="blackkey key" id="c#"></div
><div class="whitekey key" id="d"></div><div class="blackkey key" id="d#"></div
><div class="whitekey key" id="e"></div
><div class="whitekey key" id="f"></div><div class="blackkey key" id="f#"></div
><div class="whitekey key" id="g"></div><div class="blackkey key" id="g#"></div
><div class="whitekey key" id="a"></div><div class="blackkey key" id="a#"></div
><div class="whitekey key" id="b"></div>
</div>
<div id="whole-keyboard">
<div class="octave" id="o1">
<div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div>
</div>
<div class="octave" id="o2">
<div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div>
</div>
<div class="octave selected" id="o3">
<div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div>
</div>
<div class="octave" id="o4">
<div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div><div class="blackkey"></div
><div class="whitekey"></div>
</div>
</div>
<button class="toggle-pause" onclick="togglePause()">Pause</button>
<button class="end-game" onclick="stopGame()">Back to menu</button>
<div class="push clearfix"></div>
</div>
<script src="sound.js"></script>
<script src="script.js"></script>
</body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '343991302439932',
xfbml : true,
version : 'v2.1'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</html>