js运动实例-拖拽碰撞

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


<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.οnlοad=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.οnmοusedοwn=function(ev){
                    var ev=ev || window.event;

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

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

                    document.οnmοusemοve=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.οnmοuseup=function(){
                        document.οnmοusemοve=null;
                        document.οnmοuseup=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>

你可能感兴趣的:(JavaScript)