您的位置：首页 > Web前端 > JavaScript

JS写真人行走

2014-05-13 02:14 302 查看

那天在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(http://p.blog.csdn.net/images/p_blog_csdn_net/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.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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航