让图片直线移动到鼠标点击位置,类似游戏里的人物走动!

 

< body  onclick ="moveImg(event);" >
< div  style ="position:absolute;left:0px;top:0px;"  id ="img" >< img  src ="img.gif" ></ div >
</ body >
< script > ...
    var img=document.getElementById("img");
    var time=5;//时间,单位毫秒
    var speed=2;//(speed/time)速度,单位象素,起点到终点的直线速度
    var moveObj=null;

    function moveImg(event)...{
        var event=event||window.event;
        if(moveObj!=null)...{
            window.clearInterval(moveObj);
            moveObj=null;
        }
        var imgX=parseInt(img.style.left);
        var imgY=parseInt(img.style.top);
        var moveX=event.clientX;
        var moveY=event.clientY;
        var x=moveX-imgX;
        var y=moveY-imgY;
        //计算速度基数
        var speedNum=speed/Math.sqrt(x*x+y*y);
        //计算X轴速度
        var speedX=speedNum*x;
        //计算Y轴速度
        var speedY=speedNum*y;        
        //alert(speedX+":"+speedY);
        //移动图片
        moveObj=window.setInterval(function()...{moveImage(speedX,speedY,moveX,moveY);},time);
    }
    var mx=0;my=0;
    function moveImage(x,y,endX,endY)...{
        //由于网页上left属性改变量小于1的时候，按1改变，所以计算出当移动量大于1时才改变left属性
        mx=mx+x;
        var m=Math.floor(mx);
        if(m<0)...{
            m++;
        }
        if(m>=1 || m<=-1)...{
            img.style.left=(parseInt(img.style.left)+m)+"px";
            mx=mx-m;
        }
        //由于网页上top属性改变量小于1的时候，按1改变，所以计算出当移动量大于1时才改变top属性
        my=my+y;
        var n=Math.floor(my);
        if(n<0)...{
            n++;
        }
        if(n>=1 || n<=-1)...{
            img.style.top=(parseInt(img.style.top)+n)+"px";
            my=my-n;
        }
        //当移动到指定位置时停止移动
        var xflag=false;
        var yflag=false;
        if(x>=0)...{
            if(parseInt(img.style.left)>=endX)...{
                xflag=true;
            }
        }else...{
            if(parseInt(img.style.left)<=endX)...{
                xflag=true;
            }
        }
        if(y>=0)...{
            if(parseInt(img.style.top)>=endY)...{
                yflag=true;
            }
        }else...{
            if(parseInt(img.style.top)<=endY)...{
                yflag=true;
            }
        }
        if(xflag && yflag)...{
            window.clearInterval(moveObj);
            moveObj=null;
        }
    }
</ script >