js运动实例-拖拽碰撞

最新推荐文章于 2022-09-14 08:52:20 发布

della_uii

最新推荐文章于 2022-09-14 08:52:20 发布

阅读量426

点赞数

分类专栏： JavaScript 文章标签：拖拽碰撞

本文链接：https://blog.csdn.net/Della_UI/article/details/53205068

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

实现过程：
1.实现拖拽
2.计算速度
3.实现碰撞

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: olive;
                position: absolute;
                cursor: move;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("div1");

                var disX=0;
                var disY=0;

                var prevX=0;
                var prevY=0;
                var iSpeedX=0;
                var iSpeedY=0;

                var iTimer=null;

                oDiv.onmousedown=function(ev){
                    var ev=ev || window.event;

                    prevX=ev.clientX;
                    prevY=ev.clientY;

                    disX=ev.clientX-oDiv.offsetLeft;
                    disY=ev.clientY-oDiv.offsetTop;

                    document.onmousemove=function(ev){
                        var ev=ev || window.event;

                        oDiv.style.left=ev.clientX-disX+'px';
                        oDiv.style.top=ev.clientY-disY+'px';

                        iSpeedX=ev.clientX-prevX;
                        iSpeedY=ev.clientY-prevY;

                        prevX=ev.clientX;
                        prevY=ev.clientY;
                    }

                    document.onmouseup=function(){
                        document.onmousemove=null;
                        document.onmouseup=null;

                        startMove();
                    }
                    return false;

                    function startMove(){
                        clearInterval(iTimer);
                        iTimer=setInterval(function(){

                            iSpeedY+=3;

                            var L=oDiv.offsetLeft+iSpeedX;
                            var T=oDiv.offsetTop+iSpeedY;

                            if (L>document.documentElement.clientWidth-oDiv.offsetWidth) {
                                L=document.documentElement.clientWidth-oDiv.offsetWidth;
                                iSpeedX*=-1;
                                iSpeedX*=0.75;
                            }else if (L<0) {
                                L=0;
                                iSpeedX*=-1
                                iSpeedX*=0.75;
                            }

                            if (T>document.documentElement.clientHeight-oDiv.offsetHeight) {
                                T=document.documentElement.clientHeight-oDiv.offsetHeight;
                                iSpeedY*=-1;
                                iSpeedY*=0.75;
                                iSpeedX*=0.75;
                            }else if (T<0) {
                                T=0;
                                iSpeedY*=-1;
                                iSpeedY*=0.75;
                            }

                            oDiv.style.left=L+'px';
                            oDiv.style.top=T+'px';


                        },30)
                    }
                }

            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>