zoukankan      html  css  js  c++  java
  • js 碰撞 + 重力 运动

    <!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="1px;height:300px;background:black;left:300px"></span>
    </body>
    </html>
  • 相关阅读:
    C#下如何用NPlot绘制期货股票K线图(3):设计要显示的股票价格图表窗口并定义相应类的成员及函数
    C#下如何用NPlot绘制期货股票K线图(2):读取数据文件让K线图自动更新
    C#下如何用NPlot绘制期货股票K线图(1)?
    freemarker 常见问题
    关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结
    mybatis 联表查询
    用mysql存储过程代替递归查询
    MYSQL 级联 添加外键
    IntelliJ Idea 常用快捷键列表
    MySQL大数据量分页查询方法及其优化
  • 原文地址:https://www.cnblogs.com/zoro-zero/p/4341798.html
Copyright © 2011-2022 走看看