您的位置：首页 > 其它

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

2008-12-12 15:09 501 查看

<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 eventevent=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 speedspeedNum=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属性
        mxmx=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";
            mxmx=mx-m;
        }
        //由于网页上top属性改变量小于1的时候，按1改变，所以计算出当移动量大于1时才改变top属性
        mymy=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";
            mymy=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>

http://blog.csdn.net/lip009/archive/2007/11/15/1887357.aspx

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 游戏 null function

相关文章推荐

新的分享

章节导航