参考：

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. PHP 程序员面试常问的问题

    1． Include 与 require的区别,require和require_once的效率哪个高? Php在遇到include时就解释一次,如果页面中出现10次include,php就解释10次, ...

  2. Idea定位打开文件在左边工程中的文件路径

    勾选掉Autoscoll from Source

  3. java 环境变量classpath的作用

    http://www.cnblogs.com/xwdreamer/archive/2010/09/08/2297098.html http://www.cnblogs.com/panxuejun/p/ ...

  4. ios消息推送机制原理与实现

    本文转载至 http://hi.baidu.com/yang_qi168/item/480304c542fd246489ad9e91 Push的原理: Push 的工作机制可以简单的概括为下图 图中, ...

  5. django 之 常用命令

    Django 基本命令 本节主要是为了让您了解一些django最基本的命令,请尝试着记住它们,并且多多练习下 1. 新建一个 django project django-admin.py startp ...

  6. activeMQ "HelloWorld"实现

    本文主要介绍activeMQ在应用程序中是如何使用的,同个两个实例进行说明,这两个实例分别针对P2P模式和Pub/Sub模式. 开发环境 操作系统:Ubuntu 16.10 开发平台:Eclipse  ...

  7. Instagram发布动态自动裁剪照片说明

    发布Ins时,照片总是被截取一截,感觉很不爽...然后就仔细了解了Ins是如何限制图片大小的. 官方帮助说的很清楚,https://help.instagram.com/163182164042672 ...

  8. cookies与session

    一.cookies 本质:浏览器端保存的键值对 方便客户按照自己的习惯操作页面或软件,例如:用户验证,登陆界面,右侧菜单隐藏,控制页面列表显示条数... cookies是由服务端写在浏览器端,以后每次 ...

  9. 初识idea

    http://blog.csdn.net/bitcarmanlee/article/details/54951589 http://blog.csdn.net/haishu_zheng/article ...

  10. unity 里调试native code

    因项目需要,需要调试dll工程代码. 把生成的debug dll和pdb拷贝进unity的plugins工程,遇到 断点无法进入,修改下调试信息格式,OK.