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

来源：互联网发布：软件人员外包编辑：程序博客网时间：2024/04/28 01:02

</body>

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>