jakewendt.github.com/bounce.html at master · jakewendt/jakewendt.github.com · GitHub

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
<!DOCTYPE html>
<html>
<head>
<title>Bounce</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>
<style>
body{
	position:absolute;
	background-color:red;
	margin:0px auto;
	top: 20px;
	left: 20px;
	bottom: 20px;
	right: 20px;
	border:1px solid black;
}
#ball {
	font-size:24px;
	font-weight:bold;
	position:relative;
}
</style>
<script type="text/javascript">
//<![CDATA[
var ball = {
	x: 0,
	y: 10,
	vx: 0,
	vy: 0,
	ax: 0,
	ay: 0.1
}
var reposition_ball = function(){
	var ball_x = parseInt($('#ball').css('left'),10);
	var ball_y = parseInt($('#ball').css('top'),10);
	var screen_right  = parseInt($('body').width(),10)  - $('#ball').width();
	var screen_bottom = parseInt($('body').height(),10) - $('#ball').height();

	ball.x = ball.x + ball.vx;
	ball.y = ball.y + ball.vy;
	ball.vx = ball.vx + ball.ax;
	ball.vy = ball.vy + ball.ay;
	if(( ( ball_x < 0 ) && ( ball.vx < 0 ) ) ||
		 ( ( ball_x > screen_right ) && ball.vx > 0 ) ){
//		ball.vx = -ball.vx;
		ball.vx = -0.9 * ball.vx;	// with some energy loss
	}
	if(( ( ball_y < 0 ) && ( ball.vy < 0 ) ) ||
		 ( ( ball_y > screen_bottom ) && ball.vy > 0 ) ){
//		ball.vy = -ball.vy;
		ball.vy = -0.9 * ball.vy;	// with some energy loss
	}
	if( ball_x < 0 ) ball.x = 0;
	if( ball_y < 0 ) ball.y = 0;
	if( ball_x > screen_right )  ball.x = screen_right;
	if( ball_y > screen_bottom ) ball.y = screen_bottom;

	$('#ball').css( 'top',ball.y);
	$('#ball').css('left',ball.x);
}
$(function(){
	ball.vx = Math.random() * 10;

	setInterval(reposition_ball,10);

});
//]]>
</script>
</head>
<body>
<span id='ball'>O</span>
</body>
</html>