-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
77 lines (74 loc) · 2.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<style>
#game-canvas {
padding: 0;
margin: auto;
width: 960px;
height: 600px;
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#low-res {
display:none;
}
@media (min-width: 0px) and (max-width: 959px), (max-height: 599px) {
body {
background-color: lightgreen;
}
#game-canvas {
display: none;
}
#low-res {
display: block;
}
}
</style>
<title>Retro Learn Touch Typing Free</title>
</head>
<body>
<div style='text-align:center'>
<h1 style='margin-bottom: 0.4em; font-family: courier'><a href='https://github.com/krutisfood/retro-touch-type'>Retro Touch Type</a></h1>
</div>
<script src="jsfx.js"></script>
<script>
var library = {
"pewpew":{
"Frequency": {"Start":1100.0445498526096,"Min":0.09264093050733209,"Slide":-0.5299713624175639},
"Generator":{"Func":"sine","A":0.2510009810794145,"ASlide":0.020514403143897655},
"Filter":{"HP":0.1695386455161497},"Volume":{"Sustain":0.1978937237057835,"Decay":0.0017689055763185026}
},
"destroyed":{
"Frequency":{"Start":385.3802798874676,"Slide":-0.6181004933081568},
"Generator":{"Func":"square","A":0.11476959167048334,"ASlide":-0.29058131389319897},
"Filter":{"HP":0.21182643806096166},"Volume":{"Sustain":0.08737127098720521,"Decay":0.23490780140273274}
},
"hit":{
"Frequency":{"Start":361.2735885940492,"Slide":-0.6045785060152411},
"Generator":{"Func":"saw","A":0.29831282976083456,"ASlide":-0.31553542031906545},
"Filter":{"HP":0.058810981130227445},"Volume":{"Sustain":0.03811421436257661,"Decay":0.2474651860073209}
}
};
var sfx = jsfx.Live(library);
</script>
<canvas id='game-canvas' width="640" height="400"></canvas>
<div id='low-res'>
<p>Sorry, this game is designed for higher resolution devices.</p>
<p>If you're trying to play this game on a lower res device which has a keyboard, e.g. a convertible tablet, let me know and I'll see what I can do.</p>
</div>
<script src="touch.js"></script>
<script>
function load() {
touch.start(document.getElementById('game-canvas'));
}
window.onload = load;
</script>
</body>
</html>