碰撞运动
撞到目标点，速度反转
无重力的漂浮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. HDU 4048 Zhuge Liang's Stone Sentinel Maze

    Zhuge Liang's Stone Sentinel Maze Time Limit: 10000/4000 MS (Java/Others)    Memory Limit: 32768/327 ...

  2. FIFO页面置换算法

    本文以序列长度20的{ 7,0,1,2,0,3,0,4,2,3,0,3,2,1,2,0,1,7,0,1};以及页面4:为例: #include <stdio.h> #define Init ...

  3. Zip it

    https://www.codewars.com/kata/zip-it/train/csharp using System; using System.Collections.Generic; us ...

  4. Winform中checklistbox控件的常用方法

    Winform中checklistbox控件的常用方法最近用到checklistbox控件,在使用其过程中,收集了其相关的代码段1.添加项checkedListBox1.Items.Add(" ...

  5. poj 3321 Apple Tree dfs序+线段树

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K       Description There is an apple tree outsid ...

  6. Linux基础※※※※如何使用Git in Linux（二）

    参考资料: 1. http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 2. Git-简 ...

  7. （一）kafka修改topic分区的位置

    (一)kafka修改topic分区的位置 环境:kafka_2.10-0.8.2.1 + JDK1.7.0_80 1. 查看分区topic的分区分布 $ le-kafka-topics.sh --de ...

  8. cocos2d-x lua绑定解析

    花了几天时间看了下cocos2d-x lua绑定那块,总算是基本搞明白了,下面分三部分解析lua绑定: 一.lua绑定主要用到的底层函数 lua绑定其本质就是有一个公用的lua_Stack来进行C和L ...

  9. python中main()函数写法

    顶顶大名的Guido van Rossum(Python之父)推荐的main写法: #!/usr/bin/python import sys import getopt class Usage(Exc ...

  10. 樱花漫地集于我心，蝶舞纷飞祈愿相随---总结 顕出：void-sampling 显示：void-sampling

    知识点: 分支语句,四则运算,(￣y▽￣)~* 实验过程中遇到的问题及解决方法: 忘记换行,忘记代码,输入法切换(´∀｀*) 暂时还得照书写,*★,°*:.☆\(￣▽￣)/$:*.°★* 实验心得体会 ...