碰撞运动
撞到目标点，速度反转
无重力的漂浮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. mac下使用brew安装ffmpeg支持x265

    使用brew install ffmpeg 安装ffmpeg默认是没有支持x265的, 使用brew info ffmpeg 获取安装选项帮助, 使用brew reinstall ffmpeg --w ...

  2. Python_Day3_基础3

    python基础之数据类型与变量 字典 字典一种key - value 的数据类型,使用就像我们上学用的字典,通过笔划.字母来查对应页的详细内容. 语法: info = { 'stu1101': &q ...

  3. stm32cube--IWDG使用

    IWDG使用的是32芯片内部的40k独立晶振,该晶振为rtc和iwdg提供时钟,即使是主时钟坏了也不影响它们. 主要用到三个寄存器, IWDG_KR    键值寄存器 IWDG_PR     预分频寄 ...

  4. 获得省市 json 后台代码

    string connString = ConfigurationManager.ConnectionStrings["connStr"].ToString(); SqlConne ...

  5. [转载]【基础篇】不为人知的Maya移动坐标轴

    maya 设置轴向1.将整体模型方向调整到与世界坐标系一致.设置具体模型的轴朝向. 操作:选中模型,按住W键,鼠标左键,在弹出的菜单中选择Axis,比较常用的有Set To Ponit.Set To ...

  6. Android Gradle的使用

    说明: 在Android Studio中的Terminal可以直接使用Gradle命令行,不需要配置环境,而想直接在电脑的命令行使用Gradle命令行, 则需要配置环境,Window下配置Gradle ...

  7. Ubuntu 安装桌面且远程连接

    前言:  一般服务器是不装桌面的,因为会牺牲很多性能,这里就选择很小桌面,牺牲一定性能  这里就采用x2go, 这里是在ubuntu server 14.04 安装成功,其实它是可用于linux所有  ...

  8. PE文件学习系列一为什么是PE

    合肥程序员群:49313181.    合肥实名程序员群:128131462 (不愿透露姓名和信息者勿加入)Q  Q:408365330     E-Mail:egojit@qq.com PE概述: ...

  9. python中元组（tuple）的用法

    t=(1,2,3) t=() t=(1,)#元组中只有一个值,需在值后面加上,不然会当int型识别 te.count(1) te.index(2) te[::-1]#关于切片跟列表一样的 tuple的 ...

  10. Windows Store App 旋转中心

    旋转中心的位置可以通过设置CenterOfRotationX.CenterOfRotationY和CenterOfRotationZ属性来指定.CenterOfRotationX和CenterOfRo ...