-
Notifications
You must be signed in to change notification settings - Fork 69
/
joystick-basic.html
63 lines (49 loc) · 1.28 KB
/
joystick-basic.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
<!DOCTYPE html>
<html>
<head>
<title>Joystick Controls</title>
<script src="js/joystick.js"></script>
<style>
body
{
font-family: Courier, monospaced;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
Joystick Controls.
<hr>
<div id="status1" style="color: red;">Joystick 1</div>
<div id="status2" style="color: blue;">Joystick 2</div>
<hr>
<div style="border: 1px solid red; width: 128px; position: absolute; left:10px; top:150px;">
<img src="images/joystick-base.png"/>
<div id="stick1" style="position: absolute; left:32px; top:32px;">
<img src="images/joystick-red.png"/>
</div>
</div>
<div style="border: 1px solid blue; width: 128px; position: absolute; left:210px; top:150px;">
<img src="images/joystick-base.png"/>
<div id="stick2" style="position: absolute; left:32px; top:32px;">
<img src="images/joystick-blue.png"/>
</div>
</div>
<script>
let joystick1 = new Joystick("stick1", 64, 8);
let joystick2 = new Joystick("stick2", 64, 8);
function update()
{
document.getElementById("status1").innerText = "Joystick 1: " + JSON.stringify(joystick1.value);
document.getElementById("status2").innerText = "Joystick 2: " + JSON.stringify(joystick2.value);
}
function loop()
{
requestAnimationFrame(loop);
update();
}
loop();
</script>
</body>
</html>