参考：

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. Python入门（六）：标准库

    操作系统接口 os模块提供了不少与操作系统相关联的函数. import os os.getcwd() # 返回当前的工作目录 os.chdir('d:/') # 修改当前的工作目录 os.system ...

  2. CSS:层叠样式表的冲突处理

    前言 重叠样式表的冲突是通过重叠过程排序,最终确定文档的显示方式的,也就是是说通过重叠排序来处理冲突问题.这过程起决定性作用的是选择器及其相关申明的特殊性,以及继承机制. 基本流程 1.找出所有相关规 ...

  3. SurvivalShooter学习笔记（四.敌人攻击）

    此案例中,敌人始终朝着玩家移动 到达攻击玩家范围时(身上的大的触发器被玩家触发时(敌人靠近玩家,当身上的触发器被触发,且对象是玩家时条件达成)) 隔一个时间端,打击玩家一下,对玩家造成伤害,玩家掉血, ...

  4. 编写高质量代码–改善python程序的建议（五）

    原文发表在我的博客主页,转载请注明出处! 建议二十三:遵循异常处理的几点基本原则 python中常用的异常处理语法是try.except.else.finally,它们可以有多种组合,语法形式如下: ...

  5. dubbo 序列化 问题 属性值 丢失 ArrayList 解决

    参考文章:http://blog.csdn.net/wanyanxgf/article/details/6944733 http://tianya23.blog.51cto.com/1081650/5 ...

  6. sql 存储过程，最简单的添加和修改

    数据库表结构  <1>新增数据,并且按照"name" 字段查询,如果重复返回“error”=-100 ,如果成功返回ID,如果失败ID=0 USE [数据库]GOSET ...

  7. 【BZOJ4382】[POI2015]Podział naszyjnika 堆+并查集+树状数组

    [BZOJ4382][POI2015]Podział naszyjnika Description 长度为n的一串项链,每颗珠子是k种颜色之一. 第i颗与第i-1,i+1颗珠子相邻,第n颗与第1颗也相 ...

  8. 如何使用android studio及夜神模拟器开发调试

    android studio 只安装sdk(不安装自带模拟器)1.下载并安装夜神模拟器 2.先启动夜神模拟器 3.然后运行cmd命令,cd到夜神安装目录(bin目录下),执行命令: nox_adb.e ...

  9. Eclipse MyBatis Generator插件安装

    目录 Eclipse MyBatis Generator插件安装 Eclipse MyBatis Generator插件安装 1.进入Eclipse Marketplace [Help] -> ...

  10. Powershell Exchange Server UP Time

    Server up time Get-ExchangeServer | where{$_.name -like'wendy*'} | %{ if(Test-Connection $_.name -Co ...