参考：

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. Java WEB 之页面间传递特殊字符

    本文是学习网络上的文章时的总结以及自己的一点实践.感谢大家无私的分享. 昨天在做项目的时候,有一个页面间传递特殊字符的需求,查了一些资料.如今将自己的经验写出来. 首先.在前台编码 var fckPu ...

  2. phpStorm格式化代码快捷键

    Ctrl+Alt+L    

  3. css各居中大法

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  4. MySQL数据库中的存储引擎

    1.认识存储引擎 存储引擎指定了表的类型,即如何存储和索引数据.是否支持事务等,同时存储引擎也决定了表在计算中的存储方式. 存储引擎是以插件的形式被MySQL软件引入的,所以可以根据应用.实际的领域来 ...

  5. java was started but returned exit code=1

    将eclipse.ini文件删掉, 重启eclipse 会自动生成一个eclipse.ini就可以了~

  6. java注解类定时器

    package com.jianwu.task; import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;imp ...

  7. vue+node+mongoDB 火车票H5（四）---完成静态页面

    各项配置都好了,就可以开始写静态页面了,先别急着写,看一下页面又哪些公用的部分可以提取出来的,统一放到components组件文件夹中 header头部文件夹放一些头部常用组件,如首页的banner切 ...

  8. Powershell Function Get-PendingReboot

    获取系统中Restart Pending的计算机 $servers=get-content D:\serverlist.txt Get-PendingReboot -ComputerName $ser ...

  9. 分布式计算 要不要把写日志独立成一个Server Remote Procedure Call Protocol

    w https://en.wikipedia.org/wiki/Remote_procedure_call In distributed computing a remote procedure ca ...

  10. Spring Data 开发环境搭建（二）

    首先咱们先创建一个maven工程 在pom.xml加入以下 依赖 <!--Mysql 驱动包--> <dependency> <groupId>mysql</ ...