-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
98 lines (89 loc) · 2.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Phaser SAT Experiment</title>
<style>
body {
font-family: sans-serif;
}
label {
display: inline-block;
}
label input {
display: block;
width: 125.6px;
}
.controls {
margin-top: 8px;
}
</style>
<script src="vendor/phaser/build/phaser.js"></script>
<script src="vendor/sat-js/SAT.js"></script>
<script src="PhaserSat.js"></script>
<script>
var PhaserGlobal = {hideBanner: true};
var state = new PhaserSat;
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser', state);
// This hooks up our ugly controls to the game state object.
// Thanks to http://youmightnotneedjquery.com for helping me to
// break an unhealthy dependency and keeping me sane here.
var $ = document.querySelectorAll.bind(document);
/**
* Update a feature value according to the value of the given
* <input type="range"> control.
*
* @param {Element} control
*/
var updateValue = function (control) {
var feature = control.getAttribute('data-feature');
var value = parseFloat(control.value);
state.features[feature] = value;
$('.' + feature)[0].innerText = value;
}
document.addEventListener('DOMContentLoaded', function () {
// Update the game state's values with control values
Array.prototype.forEach.call($('.control'), function (control) {
// To begin with
updateValue(control);
// And when they change
control.addEventListener('input', function (event) {
updateValue(event.target);
})
});
});
</script>
</head>
<body>
<div id="phaser">
</div>
<div class="controls">
<label>
Speed: <span class="speed"></span>
<input type="range" class="control" data-feature="speed" value="1000" min="100" max="5000"/>
</label>
<label>
Gravity: <span class="gravity"></span>
<input type="range" class="control" data-feature="gravity" value="500" min="0" max="2000" step="50"/>
</label>
<label>
Bounce: <span class="bounce"></span>
<input type="range" class="control" data-feature="bounce" value="0" min="0" max="1" step="0.05"/>
</label>
<label>
Friction: <span class="friction"></span>
<input type="range" class="control" data-feature="friction" value="0" min="0" max="1" step="0.05"/>
</label>
<label>
Slow motion: <span class="slowMotion"></span>
<input type="range" class="control" data-feature="slowMotion" value="0" min="1" max="16"/>
</label>
<label>
Debug: <span class="debug"></span>
<input type="range" class="control" data-feature="debug" value="0" min="0" max="2"/>
</label>
</div>
<p>
<strong>WASD</strong> to move.
</p>
</body>
</html>