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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>碰撞+重力运动</title>

    <style>

        #div1

        {

            width:100px;

            height:100px;

            background:red;

            position:absolute;

        }

    </style>

    <script type="text/javascript">

        window.onload = function(){

            var oBtn = document.getElementById("btn");

            oBtn.onclick = function(){

                move();

            }

        }

        //碰撞+重力 运动（计算空气阻力）

        var timer = null;

        //横向初速度

        var speedX = 6;

        //竖向初速度速度

        var speedY = 8;

        function move(){

            clearInterval(timer);

            timer = setInterval(function(){

                var oDiv = document.getElementById("div1");

                //类似重力加速度 : g = 3;

                //竖向加速度:3

                speedY+=3;

                var l = oDiv.offsetLeft + speedX ;

                var t = oDiv.offsetTop + speedY;

                if(t >= document.documentElement.clientHeight-oDiv.offsetHeight)

                {

                    //竖向空气阻力

                    speedY*=-0.8;

                    //横向空气阻力

                    speedX*=0.8;

                    //将top设置为(document.documentElement.clientHeight - oDiv.offsetHeight)px

                    t = document.documentElement.clientHeight - oDiv.offsetHeight;

                }

                else if(t<=0)

                {

                    //竖向空气阻力

                    speedY*=-0.8;

                    //横向空气阻力

                    speedX*=0.8;

                    //将top设置为0px

                    t=0;

                }

                if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)

                {

                    //横向空气阻力

                    speedX*=-0.8;

                    //将left设置为(document.documentElement.clientWidth - oDiv.offsetWidth)px

                    l = document.documentElement.clientWidth - oDiv.offsetWidth;

                }

                else if(l<=0)

                {

                    //横向空气阻力

                    speedX*=-0.8;

                    //将left设置为0px

                    l = 0;

                }

                //将横向速度设置为0

                if(Math.abs(speedX)<1)

                {

                    speedX = 0;

                }

                //将竖向速度设置为0

                if(Math.abs(speedY)<1)

                {

                    speedY = 0;

                }

                //关闭定时器

                //横、竖速度都为空及物体距顶部高度为(可视窗口高度 - 物体高度)

                if(speedX==0 && speedY==0 && t==document.documentElement.clientHeight-oDiv.offsetHeight)

                {

                    clearInterval(timer);

                }

                else

                {

                    oDiv.style.left = l+'px';

                    oDiv.style.top = t +'px';

                }           

            },30);

        }

    </script>

</head>

<body>

   <input type="button" id="btn" value="运动" />

   <div id="div1">

    </div>

    <span style="width:1px;height:300px;background:black;left:300px"></span>

</body>

</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. Lodop打印条码二维码的一些设置

    Lodop绘制条码图功能让条码打印变得很简单,客户端不用安装专门的条码字库,该函数格式如下:ADD_PRINT_BARCODE(Top,Left,Width,Height,BarCodeType,Ba ...

  2. 一本通1609【例 4】Cats Transport

    1609:[例 4]Cats Transport 时间限制: 1000 ms         内存限制: 524288 KB sol:非常偷懒的截图了事 注意:只能猫等人,不能人等猫 对于每只猫,我们 ...

  3. Spark_RDD之基本RDD操作

    1.基本转化操作    1.1最常用的两个转化操作时map()和filter(). map()接收一个函数,把这个函数用于RDD中的每个元素,将函数作用之后的结果作为结果RDD中元素的值. filte ...

  4. Java生成多数值二元运算结果集

    看之前大学写过的24点程序中用到的核心计算算法——计算四个值能否计算出24,当时用的c++写的,现用Java重写一遍 程序实现了多个数值(可重复),每个数值只能运算一次,二元运算的条件下获得所有结果集 ...

  5. （转）poj算法做题顺序

    初期: 一.基本算法: (1)枚举. (poj1753,poj2965) (2)贪心(poj1328,poj2109,poj2586) (3)递归和分治法. (4)递推. (5)构造法.(poj329 ...

  6. 【luogu4320】道路相遇 (圆方树 + LCA)

    Description ​ 给你一张\(~n~\)个点\(~m~\)条边的无向图,保证无重边无自环, 共\(~q~\)组询问求\(~x~\)到\(~y~\)的路径上必经的点数. Solution ​ ...

  7. 自学Python5.1-面向对象与面向过程

    自学Python之路 自学Python5.1-面向对象与面向过程 面向过程:根据业务逻辑从上到下写代码. 优点:性能比面向对象高,因为类调用时需要实例化,开销比较大,比较消耗资源;比如单片机.嵌入式开 ...

  8. 【BZOJ2227】[ZJOI2011]看电影（组合数学，高精度）

    [BZOJ2227][ZJOI2011]看电影(组合数学,高精度) 题面 BZOJ 洛谷 题解 这题太神仙了. 首先\(K<N\)则必定无解,直接特判解决. 现在只考虑\(K\ge N\)的情况 ...

  9. 洛谷 P2887 [USACO07NOV]防晒霜Sunscreen 解题报告

    P2887 [USACO07NOV]防晒霜Sunscreen 题目描述 To avoid unsightly burns while tanning, each of the C (1 ≤ C ≤ 2 ...

  10. docker存储与网络

    目录 Docker存储 挂载主机目录 创建一个数据卷 挂载一个宿主机目录作为数据卷 数据卷容器 创建一个数据卷容器 利用数据卷容器迁移数据 删除数据盘 Docker网络 简介 bridge网络 bri ...