forked from crispmark/JSbot
-
Notifications
You must be signed in to change notification settings - Fork 0
/
joystick.html
82 lines (80 loc) · 2.1 KB
/
joystick.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
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
overflow : hidden;
padding : 0;
margin : 0;
background-color: #BBB;
}
#info {
position : absolute;
top : 0px;
width : 100%;
padding : 5px;
text-align : center;
}
#info a {
color : #66F;
text-decoration : none;
}
#info a:hover {
text-decoration : underline;
}
#container {
width : 100%;
height : 100%;
overflow : hidden;
padding : 0;
margin : 0;
-webkit-user-select : none;
-moz-user-select : none;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://learningthreejs.com/blog/2011/12/26/let-s-make-a-3d-game-virtual-joystick/" target="_blank">VirtualJoystick.js</a>
A library javascript to provide a virtual joystick on touchscreen.
-
inspired by this
<a href="http://sebleedelisle.com/2011/04/multi-touch-game-controller-in-javascripthtml5-for-ipad/">post</a>
from
<a href="http://sebleedelisle.com/">seb.ly</a>
<br/>
Touch the screen and move
-
works with mouse too as debug
<br/>
<span id="result"></span>
</div>
<script src="/compiled/app-bundle.js"></script>
<script src="/joystick.js"></script>
<script>
console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available");
var joystick = new VirtualJoystick({
container : document.getElementById('container'),
mouseSupport : true,
});
joystick.addEventListener('touchStart', function(){
console.log('down')
})
joystick.addEventListener('touchEnd', function(){
console.log('up')
})
setInterval(function(){
var outputEl = document.getElementById('result');
outputEl.innerHTML = '<b>Result:</b> '
+ ' dx:'+joystick.deltaX()
+ ' dy:'+joystick.deltaY()
+ (joystick.right() ? ' right' : '')
+ (joystick.up() ? ' up' : '')
+ (joystick.left() ? ' left' : '')
+ (joystick.down() ? ' down' : '')
}, 1/30 * 1000);
</script>
</body>
</html>