碰撞运动
撞到目标点，速度反转
无重力的漂浮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. HierarchyViewer for iOS 2.0 BETA Introduction

    We know HierarchyViewer is an useful tool in Android SDK. The developer and tester, who haven't the ...

  2. 19.fastDFS集群理解+搭建笔记

    软件架构理解 1FastDFS介绍 1.1什么是FastDFS FastDFS是用c语言编写的一款开源的分布式文件系统.FastDFS为互联网量身定制,充分考虑了冗余备份.负载均衡.线性扩容等机制,并 ...

  3. VPN连接错误800的解决办法

    1,IP填错.2,防火墙太严.3,使用过别的VPN软件.4,服务器上服务里Protected Sqwerrage和Routing and Remote Access这两项是否启动.5,重启电脑,删除原 ...

  4. zookeeper第二课 客户端的简单命令

    zookeeper的每个节点既可以是目录也可以是文件,节点上只存一些协调数据(状态.配置.位置),单位一般是KB,大部分数据用sdfs上 只有持久化的节点才可以有子节点,临时节点不可以有自子节点. 客 ...

  5. python之Excel操作

    #coding:utf-8 __author__ = 'similarface' import xlrd book=xlrd.open_workbook('/Users/similarface/Dow ...

  6. thinkphp下载远程图片到本地

    $url="http://www.test.com/test.jpg";//图片远程地址 $local="./Upload/test/test.jpg";//下 ...

  7. node.js基础 1之基本概念常识

    node.js 好牛逼的样子哦 很火,很腻害~~~~ 有关node.js的版本常识: 一般用最新的稳定版本,非稳定版本用于测试,其中包括api的不稳定等. 起一个web服务器: ndoejs可以自定义 ...

  8. DEV:GridControl 筛选复选框 Checked Dropdown更改数据源

    用了DEV网站给的图: 起初,我并不知道这个圈起来的部分叫做Filter Dropdown,这个List里面的数据默认与GridControl中的数据保持一致的. 现在需要对这个FilterDropd ...

  9. 浅谈 js字符串 trim 方法之正则篇

    关于 trim 其实没啥好说的,无非就是去除首位空格,对于现代浏览器来说只是简单的正则 /^\s+|\s+$/ 就可以搞定了.而且支持中文空格   等等.什么 \s 支持 中文空格?是的. 打开 Re ...

  10. MCU厂家

    新唐(nuvoton):http://www.nuvoton.com/义隆(emc):http://www.emc.com.tw/chs/遠翔(feeling):http://www.feeling- ...