1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <title>碰撞+重力运动</title>
  6.     <style>
  7.         #div1
  8.         {
  9.             width:100px;
  10.             height:100px;
  11.             background:red;
  12.             position:absolute;
  13.         }
  14.     </style>
  15.  
  16.     <script type="text/javascript">
  17.         window.onload = function(){
  18.             var oBtn = document.getElementById("btn");
  19.  
  20.             oBtn.onclick = function(){
  21.                 move();
  22.             }
  23.  
  24.         }
  25.  
  26.         //碰撞+重力 运动（计算空气阻力）
  27.         var timer = null;
  28.         //横向初速度
  29.         var speedX = 6;
  30.         //竖向初速度速度
  31.         var speedY = 8;
  32.  
  33.         function move(){
  34.  
  35.             clearInterval(timer);
  36.  
  37.             timer = setInterval(function(){
  38.  
  39.                 var oDiv = document.getElementById("div1");
  40.  
  41.                 //类似重力加速度 : g = 3;
  42.                 //竖向加速度:3
  43.                 speedY+=3;
  44.  
  45.                 var l = oDiv.offsetLeft + speedX ;
  46.                 var t = oDiv.offsetTop + speedY;
  47.  
  48.                 if(t >= document.documentElement.clientHeight-oDiv.offsetHeight)
  49.                 {
  50.                     //竖向空气阻力
  51.                     speedY*=-0.8;
  52.                     //横向空气阻力
  53.                     speedX*=0.8;
  54.                     //将top设置为(document.documentElement.clientHeight - oDiv.offsetHeight)px
  55.                     t = document.documentElement.clientHeight - oDiv.offsetHeight;
  56.                 }
  57.                 else if(t<=0)
  58.                 {
  59.                     //竖向空气阻力
  60.                     speedY*=-0.8;
  61.                     //横向空气阻力
  62.                     speedX*=0.8;
  63.                     //将top设置为0px
  64.                     t=0;
  65.                 }
  66.  
  67.                 if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
  68.                 {
  69.                     //横向空气阻力
  70.                     speedX*=-0.8;
  71.                     //将left设置为(document.documentElement.clientWidth - oDiv.offsetWidth)px
  72.                     l = document.documentElement.clientWidth - oDiv.offsetWidth;
  73.                 }
  74.                 else if(l<=0)
  75.                 {
  76.                     //横向空气阻力
  77.                     speedX*=-0.8;
  78.                     //将left设置为0px
  79.                     l = 0;
  80.                 }
  81.  
  82.                 //将横向速度设置为0
  83.                 if(Math.abs(speedX)<1)
  84.                 {
  85.                     speedX = 0;
  86.                 }
  87.                 //将竖向速度设置为0
  88.                 if(Math.abs(speedY)<1)
  89.                 {
  90.                     speedY = 0;
  91.                 }
  92.  
  93.                 //关闭定时器
  94.  
  95.                 //横、竖速度都为空及物体距顶部高度为(可视窗口高度 - 物体高度)
  96.                 if(speedX==0 && speedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)
  97.                 {
  98.                     clearInterval(timer);
  99.                 }
  100.                 else
  101.                 {
  102.                     oDiv.style.left = l+'px';
  103.                     oDiv.style.top = t +'px';
  104.                 }           
  105.  
  106.             },30);
  107.         }
  108.     </script>
  109. </head>
  110. <body>
  111.    <input type="button" id="btn" value="运动" />
  112.    <div id="div1">
  113.     </div>
  114.     <span style="width:1px;height:300px;background:black;left:300px"></span>
  115. </body>
  116. </html>

js 碰撞 + 重力 运动的更多相关文章

  1. js 拖拽 碰撞 + 重力 运动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  3. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

  4. [Js]碰撞运动

    描述:撞到目标点弹回来(速度反转) 一.无重力的漂浮div var div1=document.getElementById("div1"); var iSpeedX=6; var ...

  5. 单Js 的重力游戏开发

    最近在用看cocos的时候萌生的想法,单纯js实现重力原理.然后就做了一个这样的小游戏.姑且命名为<超级玛丽>! 因为之前有人要我做超级玛丽.哈哈哈哈哈哈!这也算完成任务了吧. 先说一下原 ...

  6. js动画 Css提供的运动 js提供的运动

    1.     动画 (1)      Css样式提供了运动 过渡的属性transition  从一种情况到另一种情况叫过渡 Transition:attr  time  linear  delay: ...

  7. JS实现缓存运动

                                                                                                      JS ...

  8. JS学习-基础运动

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

  9. js入门学习~ 运动应用小例

    要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~ --------------------- ...

随机推荐

  1. 借鉴 学习 DELPHI 通用函数 哈哈

    [转]关于Delphi通用涵数 http://m.blog.csdn.net/blog/dragonjiang5460/1196927 2006-9-8阅读2016 评论0 DELPHI程序注册码设计 ...

  2. rabbitmq使用报错总结

    最近公司重构服务器架构,需要用到rabbitmq,在公司搞了一个下午还是连接不上,后来细看了英文说明,测试连接成功,得出如下报错几点. 我用的安装包:otp_win64_21.3.exe(erlang ...

  3. BZOJ3152[Ctsc2013]组合子逻辑——堆+贪心

    题目链接: BZOJ3152 题目大意: 一开始有一个括号包含[1,n],你需要加一些括号,使得每个括号(包括一开始的)所包含的元素个数要<=这个括号左端点那个数的大小,当一个括号包含另一个括号 ...

  4. BZOJ2557[Poi2011]Programming Contest——匈牙利算法+模拟费用流

    题目描述 Bartie and his friends compete in the Team Programming Contest. There are n contestants on each ...

  5. day22 collection 模块 (顺便对比queue也学习了一下队列)

    collection 定义命名元祖,让元祖的每个元素可以通过类似对象属性的方法用".属性"及其方便的取值. 定义可前后拿取值且可迭代的双端队列 定义有顺序的字典 定义有默认值的字典 ...

  6. day9 笔记

    集合 去重 无序 元素不可变类型 可hash 命令 set() 创建可变集合 frozenset() 创建不可变集合 .add() 添加元素,只能放单个值 .update() 添加元素,可以更新多个值 ...

  7. 单片机如何产生PWM信号

    用89C52产生控制二相步进电机的程序,用PWM信号控制步进电机 用普通I/O口采用软件定时器中断可以模拟PWM输出 /*采用6MHz晶振,在P1.0脚上输出周期为2.5s,占空比为20%的脉冲信号* ...

  8. 【洛谷P3586】LOG

    题目大意:维护一个集合,支持单点修改.查询小于 X 的数的个数.查询小于 X 的数的和. 题解:学习到了动态开点线段树.对于一棵未经离散化的权值线段树来说,对于静态开点来说,过大的值域会导致不能承受的 ...

  9. （转）Spring文件上传,包括一次选中多个文件

    背景: http://www.cnblogs.com/lixuwu/p/8495275.html已经实现了单文件的上传和下载,多文件的上传是另一种情景,这里记录下来 实现过程 先说前台. 运行以后就是 ...

  10. 盘点 php 里面那些冷门又实用的小技巧

    1.实用某个字段索引二维数组 取出一个数组的一个字段的值的数组,我们可以使用 array_column, 这个方法还有另外一个用法,如 array_column($array, null, 'key' ...