碰撞运动
撞到目标点，速度反转
无重力的漂浮Div
速度反转
滚动条闪烁的问题
过界后直接拉回来

加入重力
反转速度的同时，减小速度
纵向碰撞，横向速度也减小
横向速度小数问题（负数）

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 #div1{ width:100px; height:100px; background:red; position:absolute;}

 </style>

 <script>

 //碰撞运动 : 首先找到碰撞的临界点 , 再确定运动的方向 , 然后去改对应的速度（速度取反）

 window.onload = function(){

     var oDiv = document.getElementById('div1');

     var iSpeedX = 10;

     var iSpeedY = 10;

     startMove();

     function startMove(){

         setInterval(function(){

             var L = oDiv.offsetLeft + iSpeedX;

             var T = oDiv.offsetTop + iSpeedY;

             if(T>document.documentElement.clientHeight - oDiv.offsetHeight){

                 T = document.documentElement.clientHeight - oDiv.offsetHeight;

                 iSpeedY *= -1;

             }

             else if(T<0){

                 T = 0;

                 iSpeedY *= -1;

             }

             if(L>document.documentElement.clientWidth - oDiv.offsetWidth){

                 L = document.documentElement.clientWidth - oDiv.offsetWidth;

                 iSpeedX *= -1;

             }

             else if(L<0){

                 L = 0;

                 iSpeedX *= -1;

             }

             oDiv.style.left = L + 'px';

             oDiv.style.top = T + 'px';

         },30);

     }

 };

 </script>

 </head>

 <body>

 <div id="div1"></div>

 </body>

 </html>

自由落体 ：

 <!DOCTYPE HTML>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 <title>无标题文档</title>

 <style>

 #div1{ width:100px; height:100px; background:red; position:absolute;}

 </style>

 <script>

 window.onload = function(){

     var oInput = document.getElementById('input1');

     var oDiv = document.getElementById('div1');

     var timer = null;

     var iSpeed = 0;

     oInput.onclick = function(){

         startMove();

     };

     function startMove(){

         clearInterval(timer);

         timer = setInterval(function(){

             iSpeed += 3;

             var T = oDiv.offsetTop + iSpeed;

             if(T > document.documentElement.clientHeight - oDiv.offsetHeight){

                 T = document.documentElement.clientHeight - oDiv.offsetHeight;

                 iSpeed *= -1;

                 iSpeed *= 0.75;

             }

             oDiv.style.top = T + 'px';

         },30);

     }

 };

 </script>

 </head>

 <body>

 <input type="button" value="开始运动" id="input1">

 <div id="div1"></div>

 </body>

 </html>

JS运动基础(四) 碰撞运动的更多相关文章

  1. js运动基础2（运动的封装）

    简单运动的封装 先从最简单的封装开始,慢慢的使其更丰富,更实用. 还是上一篇博文的代码,在此不作细说. 需求:点击按钮,让元素匀速运动. <!DOCTYPE html> <html ...

  2. JS运动---运动基础（缓冲运动）

    (1)手风琴效果 分析: (2)基础缓冲运动 接下来取整 原因: px为计算机识别的最小单位,1px无法再往下拆分.所以css如果取值200.5px,解析时计算机会自动将其改为200px注意:这里的数 ...

  3. JS运动基础(三) 弹性运动

    加减速运动速度不断增加或减少速度减小到负值,会向反方向运动 弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度 带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前 ...

  4. JS运动基础(二) 摩擦运动、缓冲运动

    摩擦运动: 逐渐变慢,最后停止 缓冲运动: 与摩擦力的区别:可以精确的停到指定目标点距离越远速度越大速度由距离决定速度=(目标值-当前值)/缩放系数Bug:速度取整值取整: iSpeed = iSpe ...

  5. Javascript 运动基础 01

    JS运动基础  运动基础   让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快   匀速运动 速度不变 <s ...

  6. 第八节 JS运动基础

    运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...

  7. JS学习-基础运动

    多物体运动 多个物体用同一个函数时,函数里定义的定时器应该要每个物体对应一个定时器名称,不然会导致未完成运动就被关闭了,因为定时器名称一样,而开启定时器前会清除一下. obj.timer 多值同时运动 ...

  8. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  9. JS运动---运动基础（匀速运动）

    [一]运动基础 (2)基础运动案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. file以及文件大小转化问题

    android 获取文件夹.文件的大小 以B.KB.MB.GB 为单位             public class FileSizeUtil { public static final int ...

  2. 教你解决Sublime Text中文乱码问题

    教你解决Sublime Text中文乱码问题[转载自成长的企鹅]       Sublime Text 2是一个非常不错的源代码及文本编辑器,但是不支持GB2312和GBK编码在很多情况下会非常麻烦. ...

  3. macaca运行报错之chrome-driver问题处理，关闭 Chrome 的自动更新

    由于chrome浏览器自动更新,导致 macaca运行报错,重新安装和更新chrome-driver 之后,还需要把chrome浏览器降级到50版本: 但是chrome会自动更新,所以需要禁止.找到这 ...

  4. max-width实现图片的自适应

    在自适应布局中,有时候会让图片随着宽度的变化相应的放大或者缩小,或者说让图片等比缩放,但是每个图片的大小又不一样,这个时候我们就要用到max-width这个属性了. img{ max-width:10 ...

  5. JAVA 列表排序

    以前都通过Comparator进行排序,今天看到个例子,通过apache-common工具包进行排序,实现例子参考下面界面 http://blog.csdn.net/lizeyang/article/ ...

  6. JDK中的native2ascii命令详解

    1.native2ascii简介: native2ascii是sun java sdk提供的一个工具.用来将别的文本类文件(比如*.txt,*.ini,*.properties,*.java等等)编码 ...

  7. fsimage 和 edits log

    standby NN每隔一段时间(由参数dfs.ha.tail-edits.period决定,默认是60s)去检查Journal node上新的Edits log文件. standby NN每隔一段时 ...

  8. shell脚本操作mysql数据库

    shell脚本操作mysql数据库,使用mysql的-e参数可以执行各种sql的(创建,删除,增,删,改.查)等各种操作 mysql  -hhostname -Pport -uusername -pp ...

  9. UIDatePicker的用法

    目录[-] 1.Locale 2.Calendar 3.timeZone 4.date 5.minimumDate 6.maximumDate 7.countDownDuration 8.minute ...

  10. linux笔记：shell基础-概述和脚本执行方式

    什么是shell: linux使用的默认shell是Bash: shell脚本的后缀名为.sh,shell脚本的第一行#!/bin/bash 不是注释,而是标识这是一个shell脚本,因为linux并 ...