<!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.id="xx";
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);
}
/*
if(document.getElementById("btn").attachEvent){
 this.document.getElementById("btn").attachEvent('onclick',setpos);
}else
{
this.document.getElementById("btn").attachEvent('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>
这是一个完整的一个人物移动的例子!
  如果我想在其他地方调用如何调用?
例如 我自己写了个方法function xx(){}
我想在里面调用 让对象移动!由于我对上面js代码很多都是匿名方法 本人不是理解 也试图去改成常规方法但是都是失败了!
 或是高手自己写一段通俗易懂的关于对象移动的方法 8个方向 并有图像动态效果!不要用别人girl,man哪些例子我都看了man是有BUG的 gril就是我上面贴出来的 很多看不明白希望高手帮帮我!另外有些高手看我结贴率低 其实不是我结贴 可以去看我其他问问题的帖子 要就没人回答要就是没任何启示!没办法结贴!

解决方案 »

  1.   

    想写游戏啊?现在照量太早了,在CSDN多混一两年再说吧。
    凡事不能一口吃个胖子,拿书一点点看。
      

  2.   


    人物移动主要是这段代码:
    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;
    }至于调用就是这个:
    <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>
    其他地方要用 new 一个就可以了
      

  3.   

    也许吧!不过哪些问题我自己通过实验,找资料最终还是解决了!也许分太低了!比如Silverlight 那个listbox 样式问题 我自己研究了1天 它里面的模板由于 我英文不好 都是一个一个自己测试出来的!也许有高手知道 但他们懒得说 毕竟很花时间 而且分也不多!我也能理解!