JS写真人行走

最新推荐文章于 2022-11-08 01:02:11 发布

GuardAngelY

最新推荐文章于 2022-11-08 01:02:11 发布

阅读量535

点赞数 1

那天在http://bbs.51js.com/viewthread.php?tid=83582看到风云舞 (风云舞) 写的js真人行走,粗略读了一下，觉得代码写的不是很清晰，而且没有注释，对象封装也不是很好看，所以就想了想，就自己也写了一个，把行走小人的各种属性和行为都封装在对象Man里面。代码没有优化，不过基本可以运行在ie和ff下. 需要注意的是, 不要手动拷贝下面的代码, 因为下面的代码被csdn蹂躏过了. 请点击copy to clipboard来copy,否则拷贝出来的代码可能出错. 还有要注意的是文件要保存为utf-8格式.

<html>
 <head>
   <title>Walk</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <style>
    body{
     padding: 0px;
     margin: 0px;
    }
    #man{
     position: absolute;
     left: 300px;
     top: 200px;
     border: solid red 0px;
     height: 64px;
     width: 64px;
     background: url(https://p-blog.csdn.net/images/p_blog_csdn_net/sunxing007/EntryImages/20090424/man.gif) 0px 0px;
    }
   </style>
 </head>
 <body οnlοad="Man.init('man',300,200);">  
   <div id="man"></div>
 </body>
 <script language="javascript">
  //构造我们的模特，包含它的八个方位行走的每一步的图像
  var model = [];
  model[0] = [{left:'0px',top:'0px'},{left:'-64px',top:'0px'},{left:'-128px',top:'0px'},{left:'-192px',top:'0px'}];
  model[1] = [{left:'0px',top:'-64px'},{left:'-64px',top:'-64px'},{left:'-128px',top:'-64px'},{left:'-192px',top:'-64px'}];
  model[2] = [{left:'0px',top:'-128px'},{left:'-64px',top:'-128px'},{left:'-128px',top:'-128px'},{left:'-192px',top:'-128px'}];
  model[3] = [{left:'0px',top:'-192px'},{left:'-64px',top:'-192px'},{left:'-128px',top:'-192px'},{left:'-192px',top:'-192px'}];
  model[4] = [{left:'0px',top:'-256px'},{left:'-64px',top:'-256px'},{left:'-128px',top:'-256px'},{left:'-192px',top:'-256px'}];
  model[5] = [{left:'0px',top:'-320px'},{left:'-64px',top:'-320px'},{left:'-128px',top:'-320px'},{left:'-192px',top:'-320px'}];
  model[6] = [{left:'0px',top:'-384px'},{left:'-64px',top:'-384px'},{left:'-128px',top:'-384px'},{left:'-192px',top:'-384px'}];
  model[7] = [{left:'0px',top:'-448px'},{left:'-64px',top:'-448px'},{left:'-128px',top:'-448px'},{left:'-192px',top:'-448px'}];

  /*****************************************************************
  * 作者: sunxing007
  * 转载请注明来自http://blog.csdn.net/sunxing007
  ******************************************************************/
  //人物对象，封装了行走小人的所有行为
  var Man = {
    el: null,
    model: model,
    //第一个定时器，用于移动整个div[@id='man']，呈现人物移动效果
    timer1: null,
    //第二个定时器，用于切换人物图像，呈现脚步移动效果
    timer2: null,
    //小人将要行走到的目标位置x坐标
    targetX: 0,
    //小人将要行走到的目标位置y坐标
    targetY: 0,
    //当前所在位置x坐标
    cx: 0,
    //当前所在位置y坐标
    xy: 0,
    //当前前进的方向
    direct: 0,
    init: function(id,cx,cy){
 
			//alert(1);
      Man.el = document.getElementById(id);
 
      Man.cx = cx;
      Man.cy = cy;
      Man.el.style.left = Man.cx + 'px';
      Man.el.style.top = Man.cy + 'px';
      document.onmousedown = function(event){
        //handle the differences about event between ie and firefox.
       	var evt = event || window.event;
        Man.targetX = evt.x || evt.pageX;
        Man.targetY = evt.y || evt.pageY;
        //for debug
        status = "tx:" + Man.targetX + " ty:" + Man.targetY + "| cx:" + Man.cx + " cy:" + Man.cy;
        if(Man.timer1){
          clearInterval(Man.timer1);
        }
        if(Man.timer2){
          clearInterval(Man.timer2);
        }
        if(!(Man.targetX==Man.cx && Man.targetY==Man.cy)){
          Man.walk();
        }
      };
    },
    //行走
    walk: function(){
      var step = 0;
      var direct = Man.getDirection();
      Man.direct = direct;
      //走竖线
      if(Man.targetX-Man.cx==0){
        Man.timer1 = setInterval(function(){
          //向下
          if(Man.direct==0){
            Man.cy = Man.cy + 1;
          }
          //向上
          else if(Man.direct==3){
            Man.cy = Man.cy - 1;
          }
          Man.el.style.top = Man.cy;
          if(Man.cy==Man.targetY){
            Man.stop();
          }
        },6);
      }
      //走横线
      else if(Man.targetY-Man.cy==0){
        Man.timer1 = setInterval(function(){
          //向左
          if(Man.direct==1){
            Man.cx = Man.cx-1;
          }
          //向右
          else if(Man.direct==2){
            Man.cx = Man.cx+1;
          }
          Man.el.style.left = Man.cx + 'px';
          if(Man.cx==Man.targetX){
            Man.stop();
          }
        },6);
      }
      //走斜线
      else{
        //k=斜率
        var k = (Man.targetY-Man.cy)/(Man.targetX-Man.cx);
        Man.timer1 = setInterval(function(){
          //
          if(Math.abs(k)<=1){
            /********************************************/
            if(Man.targetX>=Man.cx){
              Man.cx = Man.cx + 1;
              Man.cy = k*Man.cx + Man.targetY - k*Man.targetX;
            }
            if(Man.targetX<Man.cx){
              Man.cx = Man.cx - 1;
              Man.cy = k*Man.cx + Man.targetY - k*Man.targetX;
            }
            Man.el.style.left = Man.cx + 'px';
            Man.el.style.top = Man.cy + 'px';
            if(Man.cx==Man.targetX){
              Man.stop();
            }
          }
          else{
            /********************************************/
            if(Man.targetY>=Man.cy){
              Man.cy = Man.cy + 1;
              Man.cx = (Man.cy-Man.targetY+k*Man.targetX)/k;
            }
            if(Man.targetY<Man.cy){
              Man.cy = Man.cy - 1;
              Man.cx = (Man.cy-Man.targetY+k*Man.targetX)/k;
            }
            Man.el.style.left = Man.cx + 'px';
            Man.el.style.top = Man.cy + 'px';
            if(Man.cx==Man.targetX){
              Man.stop();
            }
          }
        },6);
      }
      
      Man.timer2 = setInterval(function(){
      		//handle the differences about the background position in style.
	        if(document.all){
	        	Man.el.style.backgroundPositionX = Man.model[direct][step].left;
	        	Man.el.style.backgroundPositionY = Man.model[direct][step].top;
	        }
	        else{
	        	Man.el.style.backgroundPosition = Man.model[direct][step].left + ' ' + Man.model[direct][step].top;
	        }
	        step = step + 1;
	        if(step == 4){
	         step = 0;
	        } 
      }, 200);
    },
    stop: function(){
      clearInterval(Man.timer1);
      clearInterval(Man.timer2);
    },
    //判断方向，总共有8个方向
    getDirection: function(){
      if(Man.targetX>=Man.cx&&Man.targetX<=Man.cx+64&&Man.targetY>Man.cy){
        return 0;
      }
      if(Man.targetX<Man.cx&&Man.targetY>Man.cy&&Man.targetY<Man.cy+64){
        return 1;
      }
      if(Man.targetX>Man.cx&&Man.targetY>Man.cy&&Man.targetY<Man.cy+64){
        return 2;
      }
      if(Man.targetX>=Man.cx&&Man.targetX<=Man.cx+64&&Man.targetY<Man.cy){
        return 3;
      }
      if(Man.targetX<Man.cx&&Man.targetY>Man.cy){
        return 4;
      }
      if(Man.targetX>Man.cx&&Man.targetY>Man.cy+64){
        return 5;
      }
      if(Man.targetX<Man.cx&&Man.targetY<Man.cy){
        return 6;
      }
      if(Man.targetX>Man.cx&&Man.targetY<Man.cy){
        return 7;
      }
      /**********/
      return 0;
    }
  };
 </script>
</html>

转自: http://blog.csdn.net/sunxing007/article/details/4105325