-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbounceTouch.html
More file actions
125 lines (120 loc) · 6 KB
/
bounceTouch.html
File metadata and controls
125 lines (120 loc) · 6 KB
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>Bounce (Methodog)</title>
<style type="text/css">
html, body { height:100%; margin:0; width:100%; overflow:hidden; }
body { background:#888; font:40px/1 helvetica,arial,freesans,sans-serif; font-weight:600; }
#cont, #ball, #ball2 { background:#ddd; border:1px solid #333; display:block; height:50%; width:50%; margin:auto; position:relative; }
#ball, #ball2 { background:transparent; border:0; box-shadow:inset 0 0 0.5em #000; -webkit-box-shadow:inset 0 0 0.5em #000; cursor:pointer; border-radius:1em; height:2em; line-height:2em; width:2em; margin:0; text-align:center; position:relative; left:0; top:0; }
#ball { background:#000; box-shadow:inset 0 0 0.2em #fff; -webkit-box-shadow:inset 0 0 0.2em #fff; color:#fff; }
</style>
</head>
<body>
<div id="cont"><div id="ball">❽</div><div id="ball2">☣</div></div>
<script type="text/javascript">
function addHandler(el,evt,fn){ if( el.addEventListener ){ el.addEventListener(evt,fn,false); }else if( el.attachEvent ){ el.attachEvent('on'+evt,fn); } }
function rmHandler(el,evt,fn){ if( el.removeEventListener ){el.removeEventListener(evt,fn,false); }else if( el.detachEvent ){ el.detachEvent('on'+evt,fn); } }
function getComputed(el,style){ if(window.getComputedStyle){ var y=document.defaultView.getComputedStyle(el,null).getPropertyValue(style); }else if(el.currentStyle){ if( style=='width' ){ y=el.getBoundingClientRect().right-el.getBoundingClientRect().left }else if( style=='height' ){ y=el.getBoundingClientRect().bottom-el.getBoundingClientRect().top }else{ var y=el.currentStyle[style] } } return parseFloat(y); }
function getPgOffset(el){ var o=[0,0]; if( el.offsetParent ){ do{ o=[o[0]+el.offsetLeft,o[1]+el.offsetTop]; }while( el=el.offsetParent ) } return [o[0]+document.body.scrollLeft,o[1]+document.body.scrollTop]; }
function getXY(e){ var xy=[]; if( e.touches && e.touches.length ){ if( e.touches.length>1 ){ xy[0] = (e.touches[0].pageX+e.touches[0].pageX)/2; xy[1] = (e.touches[0].pageY+e.touches[0].pageY)/2;}else{ xy[0] = e.touches[0].pageX; xy[1] = e.touches[0].pageY; } }else{ xy[0] = e.pageX; xy[1] = e.pageY; } return xy; }
var dragDrop;
dragDrop = {
el: null, xy0: null, xyT: null,
size: function(el){
el.wh = [getComputed(el,'width'), getComputed(el,'height')];
el.whP = [getComputed(el.P,'width'), getComputed(el.P,'height')];
},
init: function(el, unbound){
if( typeof el==='string' ){ el = document.getElementById(el); } if( !el ){ return; }
el.P = unbound? document.body:el.parentNode;
dragDrop.size(el);
el.xy = [getComputed(el,'left'), getComputed(el,'top')];
el.v = [0,0];
if( !el.move ){
el.onmousedown = dragDrop.touch;
el.ontouchstart = dragDrop.touch;
el.xyO = unbound? getPgOffset(el):[0,0];
el.move = function(xy){
var x=xy[0], y=xy[1], r;
if( x<=0-el.xyO[0] ){ x=0-el.xyO[0]; r=[-1,0]; }
else if( x>=this.whP[0]-this.wh[0]-el.xyO[0] ){ x=this.whP[0]-this.wh[0]-el.xyO[0]; r=[1,0]; }
if( y<=0-el.xyO[1] ){ y=0-el.xyO[1]; r=[0,-1]; }
else if( y>=this.whP[1]-this.wh[1]-el.xyO[1] ){ y=this.whP[1]-this.wh[1]-el.xyO[1]; r=[0,1]; }
this.xy = [x,y];
this.style.left = x+'px';
this.style.top = y+'px';
return r;
};
el.drop = function(){
var g = 1, f = 0.6, r;
this.v = [this.v[0], this.v[1]+g]; //v=u+at
r = this.move([this.xy[0]+this.v[0], this.xy[1]+this.v[1]]);
if( r ){
if( r[0] ){ this.v = [-this.v[0]*f, this.v[1]*f]; }
if( r[1] ){ this.v = [this.v[0]*f, -this.v[1]*f]; }
if( r[1]>0 && Math.abs(this.v[0])+Math.abs(this.v[1]) < 0.5 ){ clearTimeout(this.t); return; }
}
this.t = setTimeout(function(){ el.drop(); }, 23);
return false;
};
}
},
touch: function(e){
e = e || window.event;
dragDrop.el = this;
clearTimeout(dragDrop.el.t);
dragDrop.el.v = [0,0];
dragDrop.xy0 = dragDrop.el.xy;
dragDrop.xyT = getXY(e);
this.className += ' dragged';
if( e.type==='touchstart' ){
dragDrop.el.ontouchmove = dragDrop.drag;
dragDrop.el.onmousedown = null;
dragDrop.el.ontouchend = function(){
dragDrop.el.ontouchmove = null;
dragDrop.el.ontouchend = null;
dragDrop.release();
};
}else{
document.onmousemove = dragDrop.drag;
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
dragDrop.release();
};
}
return false;
},
drag: function(e){
e = e || window.event;
if( e.preventDefault ){ e.preventDefault(); }else{ e.returnValue=false; }
var xyE = getXY(e),
xy = [dragDrop.xy0[0]+xyE[0]-dragDrop.xyT[0], dragDrop.xy0[1]+xyE[1]-dragDrop.xyT[1]];
dragDrop.el.v = [(xy[0]-dragDrop.el.xy[0]),(xy[1]-dragDrop.el.xy[1])];
dragDrop.el.move(xy);
return false;
},
release: function(){
dragDrop.el.className = dragDrop.el.className.replace(/ dragged/,'');
dragDrop.el.drop();
dragDrop.el = null;
}
};
var ball = document.getElementById('ball'),
ball2 = document.getElementById('ball2');
dragDrop.init(ball);
dragDrop.init(ball2, 1);
addHandler(window,'resize',function(){
ball.whP = [getComputed(ball.P,'width'), getComputed(ball.P,'height')];
ball.drop();
ball2.whP = [getComputed(ball2.P,'width'), getComputed(ball2.P,'height')];
ball2.drop();
});
</script>
</body>
</html>