参考：
1、JS 元素位置 设置元素位置：http://blog.sina.com.cn/s/blog_a2ec891e01011v9f.html
3、使用JavaScript动态更改CSS样式：http://www.jianshu.com/p/0260cddff86a、http://kimi.it/289.html、http://www.jb51.net/article/65625.htm
效果图：
思路：
1、绘制的静态小球。
2、定义小球的四种飞行状态。
3、初始化小球状态，定义切换状态的条件。
代码：
1、初步实现。。。缺点是无法根据屏幕大小调整“墙”的位置。。还需要小改一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dynamic Ball</title>
<style>
html {
background: #F2F2F2;
}
p {
text-align: center;
}
.ball {
100px;
height: 100px;
background: black;
border-radius: 50%;
position: absolute;
left: 100px;
top: 300px;
}
</style>
</head>
<body>
<p>Dynamic Ball</p>
<div class="ball"></div>
<script>
function setPosition(x , y) {
target.style.left = x + "px";
target.style.top = y + "px";
}
var target = document.querySelector('.ball');
// 定义一对变量来管理target的位置
var X = Math.random()*1024;
var Y = Math.random()*768;
// 定义一个变量管理target的飞行状态
var STATE = 1;
function f1() {
X++;
Y++;
STATE = 1;
setPosition(X, Y);
}
function f2() {
X--;
Y++;
STATE = 2;
setPosition(X, Y);
}
function f3() {
X++;
Y--;
STATE = 3;
setPosition(X, Y);
}
function f4() {
X--;
Y--;
STATE = 4;
setPosition(X, Y);
}
function checkDirection() {
if (X > 1024 && STATE == 1) STATE = 2;
if (X > 1024 && STATE == 3) STATE = 4;
if (X < 0 && STATE == 4) STATE = 3;
if (X < 0 && STATE == 2) STATE = 1;
if (Y > 768 && STATE == 1) STATE = 3;
if (Y > 768 && STATE == 2) STATE = 4;
if (Y < 0 && STATE == 4) STATE = 2;
if (Y < 0 && STATE == 3) STATE = 1;
if (STATE == 1) f1();
if (STATE == 2) f2();
if (STATE == 3) f3();
if (STATE == 4) f4();
}
function start() {
setInterval("checkDirection()", 10);
}
setPosition(X, Y);
start();
// target.f1 target.f2 target.f3 target.f4
// target.setPosition(randomX, randomY);
// target.start();
</script>
</body>
</html>
2、改。参考：http://www.cnblogs.com/Henllyee/archive/2008/04/20/1162517.html
<script>
var screenWidth = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;
function setPosition(x , y) {
target.style.left = x + "px";
target.style.top = y + "px";
}
var target = document.querySelector('.ball');
// 定义一对变量来管理target的位置
var X = Math.random()*screenWidth;
var Y = Math.random()*screenHeight;
// 定义一个变量管理target的飞行状态
var STATE = 1;
function f1() {
X++;
Y++;
STATE = 1;
setPosition(X, Y);
}
function f2() {
X--;
Y++;
STATE = 2;
setPosition(X, Y);
}
function f3() {
X++;
Y--;
STATE = 3;
setPosition(X, Y);
}
function f4() {
X--;
Y--;
STATE = 4;
setPosition(X, Y);
}
function checkDirection() {
screenWidth = document.documentElement.clientWidth;
screenHeight = document.documentElement.clientHeight;
if (X > screenWidth && STATE == 1) STATE = 2;
if (X > screenWidth && STATE == 3) STATE = 4;
if (X < 0 && STATE == 4) STATE = 3;
if (X < 0 && STATE == 2) STATE = 1;
if (Y > screenHeight && STATE == 1) STATE = 3;
if (Y > screenHeight && STATE == 2) STATE = 4;
if (Y < 0 && STATE == 4) STATE = 2;
if (Y < 0 && STATE == 3) STATE = 1;
if (STATE == 1) f1();
if (STATE == 2) f2();
if (STATE == 3) f3();
if (STATE == 4) f4();
}
function start() {
setInterval("checkDirection()", 10);
}
setPosition(X, Y);
start();
// target.f1 target.f2 target.f3 target.f4
// target.setPosition(randomX, randomY);
// target.start();
</script>