JS写真人行走

最新推荐文章于 2021-01-03 17:32:59 发布

sunxing007

最新推荐文章于 2021-01-03 17:32:59 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： function timer javascript null border div

本文链接：https://blog.youkuaiyun.com/sunxing007/article/details/4105325

Javascript 专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的人物动态行走效果。通过鼠标点击指定目标位置，人物能够按照8个方向行走，并且在行走过程中展示不同的动画帧，实现流畅的脚步移动效果。此代码适用于IE和Firefox浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

那天在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.youkuaiyun.com/images/p_blog_youkuaiyun.com/sunxing007/EntryImages/20090424/man.gif) 0px 0px; } </style> </head> <body onload="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.youkuaiyun.com/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>