js 模拟鼠标控制小人移动

今天写了一个类似于鼠标控制小人移动的JS代码，直线移动的时候还好，斜线移动的时候就会出现转直角的情况。还有，本来想把这个写成插件的形式，但是在div的click事件出现了问题。代码如下：高手们呐，help me!Help Me me me me ........ 代码如下：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>js模拟鼠标控制小人移动</title>
 <script type="text/javascript" language="javascript" src="js/jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
var strObjID,//移动divID
        strFrameID,//外框ID
        moveX,//移动div X轴移动事件
        moveY,//移动div Y轴移动事件
        unitLeft,//移动div  css的Left属性值
        unitTop,//移动div   css的Top属性值
        unitWidth,//移动div的宽
        unitHeight,//移动div的高
        frameWidth//框架div宽
        ,frameHeight,//框架div高
        step;//移动div每次移动的像素
function Unit(objID,objFrameID)
{
          strObjID=objID;
          strFrameID=objFrameID;
          var oUnit=document.getElementById(objID);
         var oFrame= document.getElementById(objFrameID);
   
        if(oUnit.style.left=="")
        {
           unitLeft = 0;
        } 
        else
        {
          unitLeft = parseInt(oUnit.style.left);
        }
          
        if(oUnit.style.top=="") 
        {
                      unitTop= 0;
        }
        else
        {
                      unitTops= parseInt(oUnit.style.top);
        }
          
          unitWidth=parseInt(oUnit.style.width);
         unitHeight= parseInt(oUnit.style.height);
                    frameWidth=parseInt(oFrame.style.width);
           frameHeight=parseInt(oFrame.style.height);
           step=3;
}
 function getEventPosition(e,container) //构造对象
{ 
       var rect = container.getBoundingClientRect(); 
       this.x=e.clientX-rect.left;
       this.y=e.clientY-rect.top;} 
function FrameClick(e)//Click调用函数
{
     clearInterval(moveX);
    clearInterval(moveY); 
      var positoin =new getEventPosition(e,document.getElementById(strFrameID));
        
    var positionMaxX= frameWidth-parseInt(document.getElementById(strObjID).style.width); 
     var actualrangeX = positoin.x-unitWidth/2;//X轴实际移动距离
     if(actualrangeX>positionMaxX)
    {
       actualrangeX=positionMaxX;
    }
    
     var positionMaxY= frameHeight-parseInt(document.getElementById(strObjID).style.height);
        var actualrangeY = positoin.y-unitHeight/2;//Y轴实际移动距离
       if(actualrangeY>positionMaxY)
    {
       actualrangeY=positionMaxY;
    }
         moveX =  setInterval("xMove("+actualrangeX+")",10);
     moveY= setInterval("yMove("+actualrangeY+")",10);
}function Actualrange(Positoin)
{
 return  Positoin-unitHeight/2;
}function xMove(positoinX)//X轴移动
{
          if(unitLeft<positoinX)//向右
          {
              unitLeft+=step;
              if(unitLeft>frameWidth)
              {
                 unitLeft=positoinX;
              }
              if(unitLeft>positoinX)
              {
                unitLeft=positoinX;
              }
              document.getElementById(strObjID).style.left=unitLeft+"px";
          }
          if(unitLeft==positoinX)
          {
              clearInterval(moveX);
          }
          if(unitLeft>positoinX)
        {                unitLeft-=step;
              if(unitLeft<0)
              {
                 unitLeft=0;
              }
              if(unitLeft<positoinX)
              {
                unitLeft=positoinX;
              }
                document.getElementById(strObjID).style.left=unitLeft+"px";        }  
}
function yMove(positoinY)//Y轴移动
{
           
          if(unitTop<positoinY)//向下
          {
              unitTop+=step;
              if(unitTop>frameHeight)
              {
                 unitTop=positoinY;
              }
              if(unitTop>positoinY)
              {
                unitTop=positoinY;
              }
              document.getElementById(strObjID).style.top=unitTop+"px";
          }
          if(unitTop==positoinY)
          {
              clearInterval(moveY);
          }
          if(unitTop>positoinY)
        {                unitTop-=step;
              if(unitTop<0)
              {
                 unitTop=0;
              }
              if(unitTop<positoinY)
              {
              unitTop=positoinY;
              }
                document.getElementById(strObjID).style.top=unitTop+"px";        }      
}</script>
<script  type="text/javascript" language="javascript">
$(document).ready(function(){
Unit("divCar","testDiv"); });  
</script>
</head><body>
<div  onclick="FrameClick(event)"  id="testDiv" style="width:800px;height:800px;border:solid 1px #000000; margin-left:100px; position:relative " > 
        <div id="divCar" style=" background-color:Gray; width:50px; height:50px; overflow :hidden; position:absolute;"></div>
</div>
</body>
</html>

解决方案 »

  1.   

    把所有的封装到一个id的标签中，值控制那个id的就可以了，如果你分开处理的话，会很麻烦，在那个标签中全部用margin-left,margin-top 来控制相对位置
      

  2.   

    “斜线移动的时候就会出现转直角的情况...”可以算倾斜的角度，再选择用什么图片,left和top同时加减...
      

  3.   

    又一个杯具！我跟你一样！当时我是这样想的 都取50分之一 这样同步加想x，y因为可以到达效果 结果 我那个有时还会跳动！
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    　　<head>
    <style type="text/css">
    </style>
    　　<title>JavaScript Motion Sample</title>　　<script language="JavaScript">
    　　var movingID = null;
    　　var scrolling = false;
    var mx,my;
    var ss=true;
    function xy()
    {
      ss=false;
      mx=event.clientX;//获得鼠标坐标，并记录当前坐标给变量
          my=event.clientY;//获得鼠标坐标，并记录当前坐标给变量，以便后面计算
    }

    　　function startMove()
    　　{
         if(ss)
     {
      xy();
     }
        
    　　 var left = eval(div1.style.left.replace("px", ""));
         var top =  eval(div1.style.top.replace("px", ""));   /* if(left<mX)
    {
      div1.style.left = left + (mX)/50;
    }
    if(left>mX)
    {
     div1.style.left = left - (mX)/50;
    }
    if(top<mY)
    {
      div1.style.top=top+(mY-24)/50;
    }
    if(top>mY)
    {
    div1.style.top=top-(mY-24)/50;
    }if(left==mx||top==my)
    {
     stopMove();
         }*/
     

    if(left==mx&&top>my)
    {
      div1.style.top=top-my/50;
    }
    if(left==mx&&top<my)
    {
      div1.style.top=top+my/50;
    }
    if(top==my&&left>mx)
    {
    div1.style.left=left-mx/50;
    }
    if(top==my&&left<mx)
    {
    div1.style.left=left+mx/50;
    }
        if(left>mx&&top>my)
    {
    div1.style.left=left-mx/50;
    div1.style.top=top-my/50;
    }
    if(left<mx&&top>my)
    {
     div1.style.left=left+mx/50;
     div1.style.top=top-my/50;
    }
    if(left<mx&&top<my)
    {
    div1.style.left=left+mx/50;
    div1.style.top=top+my/50;
    }
    if(left>mx&&top<my)
    {
    div1.style.left=left-mx/50;
    div1.style.top=top+my/50;
    }
    　　 movingID = setTimeout("startMove()", 100);
      
    　　}　　function stopMove()
    　　{
    　　 clearTimeout(movingID);
    　　}
        function up()
    {
      xy();
    }
    function onload()
    {
      div1.style.left = 0;
          div1.style.top=0;
    }
    function mmove()
    {
      
     document.getElementById("lb1").innerText=event.clientX+","+event.clientY
      //
    }
    　　</script>　　</head>
    　　<body onload="onload()" style="margin:0px;"><div style="width:1000px; margin-top:-24px; height:500px; background-color:#FFFFCC" onmousedown="startMove()" onmouseup="up()" onmousemove="mmove()" >
    　　<div id="div1" style="position:absolute; width: 24px; height:24px; background-color:#00CCFF; left: 0px;">
    　　</div>
      <label id="lb1">10,10</label>
    　　<br><br>
    　　</div>
    　　　</body>
    　　</html>
      

  4.   

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>my girl - dh20156风之石</title>
    <script type="text/javascript">function game(_desk,_map,_mapImage){//游戏容器，地图对象，地图图片 var dh = this;
    this.desk = _desk;
    this.map = _map;
    this.map.style.background = "url("+_mapImage+") left top"; this.girls = [];
    this.indexgirl = 0; this.addgirl = function(_src,_width,_height,_x,_y,_speed,_anidelay){
    var newgirl = new girl(_src,_width,_height,_x,_y,_speed,_anidelay);
    this.girls.push(newgirl);
    this.map.appendChild(newgirl.human);
    } function girl(_src,_width,_height,_x,_y,_speed,_anidelay){//人物图片，宽，高，起始X坐标，起始Y坐标，移动速度，动画效果间隔时间 this.speed = _speed;
    this.anidelay = _anidelay;
    this.width = _width;
    this.height = _height;
    this.x = _x;
    this.y = _y;
    this.direction = 0;
    this.timer = null;
    this.timer2 = null;
    var index = (dh.girls.length>0)?dh.girls.length:0;
    var newgirl = document.createElement("DIV"); newgirl.setAttribute("oname","mygirl");
    newgirl.setAttribute("index",index);
    newgirl.setAttribute("title","点我进行控制！");
    newgirl.style.position = "absolute";
    newgirl.style.zIndex = 100;
    newgirl.style.left = _x+'px';
    newgirl.style.top = _y+'px';
    newgirl.style.width = _width+'px';
    newgirl.style.height = _height+'px';
    newgirl.style.background = "url("+_src+") 0 bottom no-repeat";
    newgirl.style.overflow = "hidden"; this.human = newgirl;
    return this;
    } //执行移动
    girl.prototype.moveGirl = function(x1,y1){
    this.stop();
    this.getdir(x1,y1);
    this.gotopos(x1,y1);
    } //获取方向
    girl.prototype.getdir = function(x1,y1){
    var x0 = this.x;
    var y0 = this.y;
    var _angle = Math.ceil(angle(x0,y0,x1,y1)); if(255<_angle && _angle<285){
    this.direction = 0;//6点钟方向
    }
    if(195<_angle && _angle<255){
    this.direction = 1;//7、8点钟方向
    }
    if(165<_angle && _angle<195){
    this.direction = 2;//9点钟方向
    }
    if(105<_angle && _angle<165){
    this.direction = 3;//10、11点钟方向
    }
    if(75<_angle && _angle<105){
    this.direction = 4;//12点钟方向
    }
    if(15<_angle && _angle<75){
    this.direction = 5;//1、2点钟方向
    }
    if(_angle<15 || _angle>345){
    this.direction = 6;//3点钟方向
    }
    if(285<_angle && _angle<345){
    this.direction = 7;//4、5点钟方向
    }
    } //求倾斜角
    function angle(x0,y0,x1,y1){
    var x = x1-x0;
    var y = y0-y1;
    var _angle = Math.atan(y/x)*(180/Math.PI);
    if(x<0){
    return _angle + 180;
    }else if(y<0){
    return _angle + 360;
    }
    return _angle;
    } //获取动画贴图Y坐标
    girl.prototype.getposY = function(){
    var _y;
    switch(this.direction){
    case 0:_y=this.height*-7;break;
    case 1:_y=0;break;
    case 2:_y=this.height*-4;break;
    case 3:_y=this.height*-2;break;
    case 4:_y=this.height*-6;break;
    case 5:_y=this.height*-1;break;
    case 6:_y=this.height*-5;break;
    default:_y=this.height*-3;break;
    }
    return _y;
    } //动画效果
    function moveani(obj,x1,y1){
    this.moveobj = obj;
    this.gmx = 0;
    this.gmy = this.moveobj.getposY(); //人物动画
    this.ani = function(){
    if(Math.abs(this.gmx)>=obj.width*3){
    this.gmx = 0;
    }else{
    this.gmx -= obj.width;
    }
    this.moveobj.human.style.backgroundPosition = this.gmx+"px "+this.gmy+"px";
    } this.x0 = this.moveobj.x;
    this.y0 = this.moveobj.y;
    this.tx = (x1-this.x0);
    this.ty = (y1-this.y0); //当前步进
    this.curStep = 0;
    //距离
    this.steps = Math.abs(this.tx)>Math.abs(this.ty)?Math.abs(this.tx):Math.abs(this.ty);
    //时间
    this.times = Math.ceil(this.steps/this.moveobj.speed); //人物移动
    this.move = function(){
    this.curStep++;
    if(this.curStep>this.steps){
    this.moveobj.stop();
    }
    var x2 = this.tx*this.curStep/this.steps+this.x0;
    var y2 = this.ty*this.curStep/this.steps+this.y0; this.moveobj.human.style.left = x2+"px";
    this.moveobj.human.style.top = y2+"px";
    this.moveobj.x = x2;
    this.moveobj.y = y2;
    }
    } //两点间移动
    girl.prototype.gotopos = function(x1,y1){
    var gm = new moveani(this,x1,y1);
    function playani(){
    gm.ani();
    gm.moveobj.timer1 = window.setTimeout(playani,gm.moveobj.anidelay);
    }
    function movepos(){
    gm.move();
    }
    playani();
    this.timer2 = window.setInterval(movepos,gm.times);
    } //停止
    girl.prototype.stop = function(){
    window.clearTimeout(this.timer1);
    this.timer1 = null;
    window.clearInterval(this.timer2);
    this.timer2 = null;
    var _y = this.getposY();
    this.human.style.backgroundPosition = "0px "+_y+"px";
    return;
    } function setpos(e){
    e = e||window.event;
    var obj = e.srcElement||e.target;
    if(obj.tagName=="DIV" && obj.getAttribute("oname")=="mygirl"){
    dh.indexgirl = obj.getAttribute("index");
    }else{
    var x = e.clientX||e.pageX;
    var y = e.clientY||e.pageY;
    dh.girls[dh.indexgirl].moveGirl(x-Math.floor(dh.girls[dh.indexgirl].width/2),y-Math.floor(dh.girls[dh.indexgirl].height/2));
    }
    } if(document.attachEvent){
    this.desk.attachEvent('onclick',setpos);
    }else{
    this.desk.addEventListener('click',setpos,true);
    }
    }
    </script>
    </head>
    <body><script type="text/javascript">
    var mygame = new game(document.documentElement,document.body,"map.gif");
    mygame.addgirl("girl.gif",60,65,400,150,20,150);
    </script>
    </body>
    </html>