参考：

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. 邮件正文及其附件的发送的C++实现

     这段代码我花了整整一天来编写,假设转载,请注明出处,谢谢!    前面的一篇文章已经讲了怎样发送邮件正文,原理我就不再叙述了.要了解的同学请到这里查看!    http://blog.csdn.ne ...

  2. 将Centos的yum源更换为国内的阿里云(163)源

    阿里云是最近新出的一个镜像源.得益于阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源.阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ CentOS系统更换软 ...

  3. Sublime Text 加入右键菜单

    Sublime Text 2 是现在很受大家欢迎的编辑器了,不仅是在web前端,在书定简单的php.Js等代码时,也是相当的好用,再配合多种的插件和新颖的界面,更是让人欲罢不能. 在使用时,我们通过喜 ...

  4. RAC集群节点故障模拟测试

    RAC节点故障模拟测试 重启单个RAC 节点模拟测试模拟操作步骤使用shutdown –Fr的方式重启节点,查看系统反应和数据库重新启动的时间.预期测试结果重启单个节点,vip将会切换到另外一个节点. ...

  5. 【Python】求素数-未经过任何优化

    print 'Find prime number smaller then input number \n' print 'Please input a number:' import time nu ...

  6. Android获取 应用程序大小，数据大小，缓存大小

    在项目中创建,android.content.pm 包名.里面创建两个aidl文件.PackageStats.aidl  和 IPackageStatsObserver.aidl. PackageSt ...

  7. DotNet软件开发框架

    这是我4月份发在donews博客上的文章,现在都转到博客园来,风满袖希望进一步阐述你的架构,我就将这篇文章转移到博客园.原文:http://blog.donews.com/shanyou/archiv ...

  8. php 正则表达式三.模式修正

    1.贪婪模式和懒惰模式, 贪婪模式:php中正则默认是贪婪模式,匹配尽可能多 的字符,比如 $pattern='/a+b/'; $subject='aaaaaaaaab,那么可能会preg_match ...

  9. 14.wamp自定义网站根目录

    1.首先打开Apache 中的配置文件httpd.conf crtl+f 搜索  documentroot  ,在找到的目录中将目录修改自己的网站的目录,注意\ 与/ 2.在向下移动,找到<Di ...

  10. table width 决定 td width

    w td width 有无在chrome edge ff 均未影响td实际宽度,td接近等比分配table width. <!doctype html> <html lang=&qu ...