参考:

1、JS 元素位置 设置元素位置:http://blog.sina.com.cn/s/blog_a2ec891e01011v9f.html

2、用JavaScript修改CSS属性

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 {
width: 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>

【JavaScript】撞墙的小球的更多相关文章

  1. 《转载》三年建站之路走得一事无成 今来A5撞墙反思

    本文转载自A5站的蚕丝被.如果给站长带来不便之处,请联系博主. 时间过得真快,记得上一次在A5写文章已经是一年前的事了,这其中是有原因的,今天就跟大家来聊聊三年来个人失败经历的撞墙反思,也给一些有着同 ...

  2. [TimusACM][1258]程序员撞墙的问题

    (本文是从我的旧博客迁移过来的) 问题地址:http://acm.timus.ru/problem.aspx?space=1&num=1258 前几日在博客园看到这种在线测试的时候,有一种相见 ...

  3. 面向对象原生JavaScript案例炫彩小球

    面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目 面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面 ...

  4. 【JavaScript】动态的小球

    参考: 1.CSS 对比 JavaScript 动画 2.CSS制作水平垂直居中对齐_水平居中, 垂直居中 教程_w3cplus:https://www.w3cplus.com/css/vertica ...

  5. 【JavaScript】键盘控制小球

    参考: 1.Simple Canvas Game 2.javaScript 事件监听 <!DOCTYPE html> <html> <head> <meta ...

  6. JS实现动画方向切换效果(包括:撞墙反弹,暂停继续左右运动等)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. tyflow车撞墙测试

  8. 使用Javascript来编写贪食蛇(零基础)

      引用的东西都很基础,注释也很多,这里就不多说了. <head> <meta http-equiv="Content-Type" content="t ...

  9. JavaScript与html5写的贪吃蛇完整代码

    JavaScript与html5写的贪吃蛇完整代码 查看运行效果可访问http://www.codesocang.com/texiao/youxitexiao/2014/0402/7045.html# ...

随机推荐

  1. 【BZOJ】2015: [Usaco2010 Feb]Chocolate Giving(spfa)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2015 这种水题真没啥好说的.. #include <cstdio> #include & ...

  2. TArray数组

    TArray<int32> arr; arr.Init(,); ; index < arr.Num(); index++) { FString str = FString(" ...

  3. Android版微信小代码(转)

    以下代码仅适用于Android版微信: //switchtabpos:让微信tab更贴合Android Design 如果你并不喜欢微信Android版和iOS端同用一套UI,现在有一个小方法可以实现 ...

  4. redis Could not connect to Redis at 127.0.0.1:6379: Connection refused 问题解决

    1.启动redis 客户端 redis-cli 报错 redis Could not connect to Redis at 127.0.0.1:6379: Connection refused 是因 ...

  5. Android无线测试之—KEYCODE键值对应大全

    KEYCODE列表电话键键名 描述 键值 KEYCODE_CALL 拨号键5    KEYCODE_ENDCALL 挂机键6    KEYCODE_HOME 按键Home3    KEYCODE_ME ...

  6. 判断 null undefined NaN

    1.判断undefined: var tmp = undefined; if (typeof(tmp) == "undefined"){ alert("undefined ...

  7. NET Framework 4.5新特性 (三)64位平台支持大于2 GB大小的数组

    64位平台.NET Framework数组限制不能超过2GB大小.这种限制对于需要使用到大型矩阵和向量计算的工作人员来说,是一个非常大问题. 无论RAM容量有多大有多少,一旦你使用大型矩阵和向量计算工 ...

  8. Java获取当前服务器IP

    package hope.ipaddress.demo; import java.net.InetAddress; import java.net.NetworkInterface; import j ...

  9. 跳出NSDate

    感觉任何语言关于时间的格式化处理,时区的处理都是多的,最近被NSDate的各种问题坑了好久 先看看关于NSDate自己的问题 1.NSDate NSDate获取当前时间 NSDate *date=[N ...

  10. python array

    python中通常情况下for循环会枚举各个元素不会访问下标,例如: l = [1,2,4,6] for val in l: print l 但是有时候我们会需要在便利数组的同时访问下标,这时候可以借 ...