-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcontroller.html
110 lines (93 loc) · 2.45 KB
/
controller.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
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Controller.html</title>
<script type="text/javascript">
var touchable;
var output;
var box;
var result = "No touch";
var counter = 0;
var touches = [];
var startX, startY;
var diffX = 0;
var diffY = 0;
var bTop = 0;
var bLeft = 0;
var SENSITIVITY = 50; //smaller numbers = more sensitive
function init(){
touchable = 'createTouch' in document;
output = document.getElementById("output");
box = document.getElementById("box");
if (touchable){
document.addEventListener('touchstart', onTouchStart, false);
document.addEventListener('touchmove', onTouchMove, false);
document.addEventListener('touchend', onTouchEnd, false);
} // end if
setInterval(update, 10);
} // end init
function onTouchStart(event){
result = "touch";
touches = event.touches;
startX = touches[0].screenX;
startY = touches[0].screenY;
} // end onTouchStart
function onTouchMove(event){
event.preventDefault();
touches = event.touches;
diffX = touches[0].screenX - startX;
diffY = touches[0].screenY - startY;
} // end onTouchMove
function onTouchEnd(event){
result = "no touch";
touches = event.touches;
diffX = 0;
diffY = 0;
} // end onTouchEnd
function update(){
counter++;
output.innerHTML = counter + ": " + result + "<br />";
output.innerHTML += "diff: (" + diffX + ", " + diffY + ") <br />";
//move box according to controller
bTop += (diffY/SENSITIVITY);
bLeft += (diffX /SENSITIVITY);
output.innerHTML += "bTop: " + bTop + ", bLeft: " + bLeft;
box.style.top = bTop + "px";
box.style.left = bLeft + "px";
} // end updata
</script>
<style type="text/css">
#scene {
width: 100px;
height: 100px;
color: white;
background-color: black;
}
#box {
width: 10px;
height: 10px;
background-color: red;
}
/* remove special touch styles */
* {
-webkit-touch-callout: none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
}
</style>
</head>
<body onload = "init()">
<h1>Controller</h1>
<p>
a controller for ipad
</p>
<div id = "box"
style = "position: absolute; left:0px; top: 0px;">
</div>
<div id = "output">
No touch
</div>
</body>
</html>