<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head>
<title></title>
<script src=
"jquery-1.7.1.min.js"
type=
"text/javascript"
></script>
<script type=
"text/javascript"
>
var
dim_half_past_PI = dimAngle(Math.PI / 2);
var
lastAngle = dimAngle(Math.PI/8);
var
v = 120;
var
lastPosition = {};
var
lastTime =
""
;
var
lastDirection =
"top"
;
var
horizen = 1;
var
vertical = 1;
var
box = {};
function
dimAngle(angle) {
var
tempAngle = angle +
""
;
return
parseFloat(tempAngle.substring(0, 6));
}
function
getWillDirection(position, box) {
var
direction = lastDirection;
if
(position.x < box.left) {
direction =
"right"
;
}
if
(position.x > box.right) {
direction =
"left"
}
if
(position.y < box.top) {
direction =
"bottom"
;
}
if
(position.y > box.bottom) {
direction =
"top"
;
}
return
direction;
}
function
getScale(direction, angle) {
switch
(direction){
case
"top"
:
vertical = -1;
if
(angle < dim_half_past_PI) {
horizen = 1;
}
if
(angle > dim_half_past_PI) {
horizen = -1;
}
if
(angle == dim_half_past_PI) {
horizen = 0;
}
break
;
case
"left"
:
horizen = -1;
if
(angle > dim_half_past_PI) {
vertical = 1;
}
if
(angle < dim_half_past_PI) {
vertical = -1;
}
if
(angle == dim_half_past_PI) {
vertical = 0;
}
break
;
case
"bottom"
:
vertical = 1;
if
(angle > dim_half_past_PI) {
horizen = 1;
}
if
(angle < dim_half_past_PI) {
horizen = -1;
}
if
(angle == dim_half_past_PI) {
horizen = 0;
}
break
;
case
"right"
:
horizen = 1;
if
(angle > dim_half_past_PI) {
vertical = -1;
}
if
(angle < dim_half_past_PI) {
vertical = 1;
}
if
(angle == dim_half_past_PI) {
vertical = 0;
}
break
;
}
}
function
getOutAngle(inAngle) {
if
(inAngle == dim_half_past_PI || inAngle == 0) {
return
inAngle;
}
else
{
return
dim_half_past_PI - inAngle;
}
}
function
setPosition(obj, position) {
obj.css({
"left"
: position.x +
"px"
,
"top"
: position.y +
"px"
});
}
function
run(obj) {
var
vx = Math.cos(lastAngle) * v;
var
vy = Math.sin(lastAngle) * v;
var
runTime = (
new
Date().getTime() - lastTime) / 1000;
getScale(lastDirection, lastAngle);
var
sx = vx * runTime * horizen;
var
sy = vy * runTime * vertical;
var
position = {
x: lastPosition.x + sx,
y: lastPosition.y + sy
};
setPosition(obj, position);
var
currentDirection = getWillDirection(position, box);
console.log(currentDirection +
":"
+lastDirection+
":"
+vertical+
":"
+horizen+
":"
+lastAngle+
":"
+dim_half_past_PI);
if
(currentDirection != lastDirection) {
lastDirection = currentDirection;
lastPosition = position;
lastTime =
new
Date().getTime();
lastAngle = getOutAngle(lastAngle);
}
setTimeout(
function
() {
run(obj);
}, 30);
}
$(document).ready(
function
() {
var
boxer = $(
"#box"
);
var
x = parseInt(boxer.offset().left);
var
y = parseInt(boxer.offset().top);
box = {
left: x,
top: y,
right: x + boxer.width(),
bottom: y + boxer.height()
};
var
runner = $(
"#runner"
);
lastTime =
new
Date().getTime();
lastPosition = {
x: x,
y: y + boxer.height()
};
run(runner);
});
</script>
<style type=
"text/css"
>
body { margin:0; padding:0; }
#box { margin:0 auto; width:500px; height:500px; border:3px solid #DDDDDD; border-radius:4px; -wekit-border-radius:4px; -moz-border-radius:4px;}
#runner { width:10px; height:10px; font-size:10px; color:black; padding:0; position:absolute; left:100px; top:480px;}
</style>
</head>
<body>
<div id=
"box"
>
<div id=
"runner"
>●</div>
</div>
</body>
</html>