碰撞运动
撞到目标点，速度反转
无重力的漂浮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. Jquery 复习练习（01）

    Jquery 复习练习 window.onload = function() {} == $(function() {}); 千万注意:js对象和jq对象的区别,这也是常常犯的错误 js对象举例: w ...

  2. oracle在windows下启动时报错ora-28056

    windows下的的oracle ,实例启动时是会向windows操作系统的事件查看器--应用程序 部分写入启动信息的,并且这个写入行为无法用oracle 的参数或者其他手段去禁止. 若是事件查看器- ...

  3. java编写一个可以上、下、左、右移动的坦克

    唉,本人学习进度缓慢,但依然会坚持不懈!有感兴趣的朋友可以在下面留言. 源代码献上: /* * 画出我的坦克,使他可以上下左右移动 */package com.test4; import javax. ...

  4. Quality assessment and quality control of NGS data

    http://www.molecularevolution.org/resources/activities/QC_of_NGS_data_activity_new table of contents ...

  5. SQL语言增加、修改、删除数据的语法

    增加 insert into 表名(字段1,字段2) values ('字段1的值','字段2的值'); 修改 update 表名 set 字段1='赋予字段1的新值',字段2='赋予字段2的新值' ...

  6. Java第一个程序

    public class HelloWorld{ public static void main(String[] args){ System.out.println("七期项目二部&quo ...

  7. angularjs简述

    1.MVC设计模式 MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式 Model(模型)表示应用程序核心(比如数据库记录列表 ...

  8. JavaWeb基础: 获取资源文件

    Web工程在编译构建完毕以后,需要部署到Tomcat上运行,资源的硬盘路径也会随着改变.要想对资源文件进行读写操作需要获取其硬盘地址,在Web工程中通常通过ServletContext/ClassLo ...

  9. JreeeChart入门

    JFreeChart主要用来各种各样的图表,这些图表包括:饼图.柱状图(普通柱状图以及堆栈柱状图).线图.区域图.分布图.混合图.甘特图以及一些仪表盘等等 (源代码下载) 示例程序运用的jar包: j ...

  10. webstorm 注册码，亲测可用

    WebStorm注册码 User Name: EMBRACE License Key: ===== LICENSE BEGIN ===== 24718-12042010 00001h6wzKLpfo3 ...