JS编写鼠标操作

通过上一篇博文《JS编写键盘操作&禁用键盘》，我们可以用键盘的方向键来操控动画人物行走。光用键盘操作还不过瘾？那就再加一个鼠标操作吧。鼠标操作的目标有两个：1、可以抓取动画人物并移动；2、单击鼠标左键，让动画人物上下左右行走。先来实现第一个目标，代码如下：

function mouse_ctrl(){ //鼠标控制
var obj=document.getElementById("ai");
document.onmousedown=function(ev){ //定位人物
var event=ev||window.event;
x=event.x;
y=event.y;
x0=obj.offsetLeft;
y0=obj.offsetTop;
xt=x-x0;
yt=y-y0;
if(xt<64 && yt<64 && yt>=0 && xt>=0){ //鼠标在人物范围内
document.onmousemove=move; //定义鼠标移动时的操作
document.onmouseup=release; //定义手指离开鼠标左键时的操作
}
else{ //鼠标超出人物范围
mouse_direct(); //单击左键时的人物位移函数
}
}
}

如上代码，要捕获动画人物，需要用到document.onmousedown，要实现动画人物的移动，则要用到document.onmousemove，要结束动画人物随鼠标移动，则要用到document.onmouseup。另外，if语句是用来判断单击鼠标时是否正好在动画人物范围内？若是在范围之外，则会启动让动画人物走动的指令。

鼠标移动动画人物的代码如下：

function move(){ //鼠标移动人物
var obj=document.getElementById("ai");
var event=event||window.event;
x1=event.x-(x-x0);
y1=event.y-(y-y0);
obj.style.left=x1+"px";
obj.style.top=y1+"px";
}

请注意，如果动画人物本身是在行走的情况下移动它，整个过程动画人物还是走动状态，可以在上述代码添加stop()函数（参看《JS编写人物行走动画》一文），若要限制动画人物不出浏览器框架范围，则还需要限制x1和y1的最大最小坐标范围。

释放鼠标移动的代码如下：

function release(){ //释放鼠标移动
var obj=document.getElementById("ai");
var event=event||window.event;
document.onmousemove=document.onmouseup=null;
}

如果动画人物本身是在行走的状态下被鼠标捕获移动，释放后想要保持继续行走的状态，就需要计算下未走完的距离，再调用walk(_direct,_step)函数实现继续行走。

至此，鼠标操作的第一个目标达成。第二个目标的实现其实就是计算鼠标点击处和动画人物所在距离，然后转换成行走的步数以及相对方向。代码如下：

function mouse_direct(){ //根据鼠标位置选择移动方向
if(yt<=64 && xt>=64 && yt>=0){ //右
num=0;
step=Math.abs(xt/25);
}
else if(yt<=64 && xt<0 && yt>=0){ //左
num=1;
step=Math.abs(xt/25);
}
else if(yt>=64 && xt<=64 && xt>=0){ //下
num=2;
step=Math.abs(yt/25);
}
else if(yt<0 && xt<=64 && xt>=0){ //上
num=3;
step=Math.abs(yt/25);
}
walk(num,step);
}

JS编写并操控人物行走动画至此告一段落，喜欢这三篇博文的，请记得给我点赞哦！