06-08-2012, 15:29
Witam. Mam następujący problem: Utworzyłem konstruktor odpowiedzialny za ruch animowanego ptaka na stronie. tworzę obiekt 'sparrow' z tego konstruktora i wszystko pięknie gra:ptaszek fruwa sobie po stronie. Chcę utworzyć kolejny obiekt aby zachowywał sie tak jak pierwszy. I gdy tworzę 'sparrow1', pierwszy obiekt przestaje fruwać, a zaczyna drugi. i Tak gdy utworzę pięć obiektów z konstruktora, tylko ostatnio utworzony działa. a chciałbym żeby wszystkie fruwały. Pytanie brzmi, jak osiągnąć taki efekt??
oto kod:
oto kod:
Kod:
function spriteAnimation(elementId,pxjumpY,spriteNumber,movePx, moveSpeed){
ths=this;
this.element=document.getElementById(elementId);
// -funkcja jump start
this.jump=pxjumpY;
this.spriteNumber=spriteNumber;
this.spriteJump=0;
this.jumpCounter=0;
// -funkcja jump end
// -funkcja getParentInfo start
this.parentWidth;
this.parentHeight;
// -funkcja getParentInfo end
// -funkcja getElementPosition start
this.elementPositionX;
this.elementPositionY;
// -funkcja getElementPosition end
// -funkcja getDirection start
this.birdAtBottom=false;
this.birdAtTop=false;
this.birdAtLeft=true;
this.birdAtRight=false;
// -funkcja getDirection end
// -funkcja getElementPosition i move start
this.moveY=10;
this.moveX=10;
// -funkcja getElementPosition i move end
// -funkcja randomValue start
this.randValue;
// -funkcja randomValue end
// -funkcja getElementPosition i move<--
this.isFlying=false;
this.Height;
this.Width;
this.movePx=movePx;
this.moveSpeed=moveSpeed;
this.directionCounter=0;
this.getElementInfo=function(){
ths.Width=parseFloat(window.getComputedStyle(ths.element, null).getPropertyValue("width"));
ths.Height=parseFloat(window.getComputedStyle(ths.element, null).getPropertyValue("height"));
}();
this.getParentInfo=function(){
var parentElement=ths.element.parentNode;
ths.parentWidth=parseFloat(window.getComputedStyle(parentElement, null).getPropertyValue("width"));
ths.parentHeight=parseFloat(window.getComputedStyle(parentElement, null).getPropertyValue("height"));
}();
this.fly=function(){//podmiana sprite'a
if(ths.birdAtLeft){
ths.element.style.backgroundPosition="0px "+ths.spriteJump+"px";
}else if(ths.birdAtRight){
ths.element.style.backgroundPosition="75px "+ths.spriteJump+"px";
}
ths.spriteJump+=54;
ths.jumpCounter++;
if(ths.jumpCounter==ths.spriteNumber){
ths.spriteJump=0;
ths.jumpCounter=0;
}
setTimeout(arguments.callee, 80);
}
this.getElementPosition=function(){
ths.elementPositionX=parseFloat(window.getComputedStyle(ths.element, null).getPropertyValue("left"));
ths.elementPositionY=parseFloat(window.getComputedStyle(ths.element, null).getPropertyValue("top"));
};
this.getDirection=function(){
ths.getElementPosition();
//gdy ptaszek sięgnął dołu
if(ths.elementPositionY>ths.parentHeight-ths.Height-5){
ths.birdAtBottom=true;
ths.birdAtTop=false;
}
//gdy ptaszek sięgnął góry
if(ths.elementPositionY<0){
ths.birdAtTop=true;
ths.birdAtBottom=false;
}
//gdy ptaszek sięgnął lewej
if(ths.elementPositionX<0){
ths.birdAtLeft=true;
ths.birdAtRight=false;
}
//gdy ptaszek sięgnął prawej
if(ths.elementPositionX>ths.parentWidth-ths.Width-5){
ths.birdAtRight=true;
ths.birdAtLeft=false;
}
};
this.setDirection=function(){
if(ths.birdAtTop){
ths.moveY=ths.movePx;
}
if(ths.birdAtBottom){
ths.moveY=-ths.movePx;
}
if(ths.birdAtLeft){
ths.moveX=ths.movePx;
}
if(ths.birdAtRight){
ths.moveX=-ths.movePx;
};
};
this.randomValue=function(){
if(Math.floor(Math.random()*10)>5){
ths.randValue=ths.movePx;
}else{
ths.randValue=-ths.movePx;
};
}
this.move=function(){
ths.getElementPosition();
ths.getDirection();
ths.setDirection();
ths.randomValue();
ths.element.style.top=ths.elementPositionY+ths.moveY+"px";
ths.element.style.left=ths.elementPositionX+ths.moveX+"px";
setTimeout(arguments.callee, ths.moveSpeed);
}
}
$(function(){
var sparrow=new spriteAnimation('sparrow', 54,6,5,60);
sparrow.fly();
sparrow.move();
var sparrow1=new spriteAnimation('sparrow1', 54,6,5,100);
sparrow1.fly();
sparrow1.move();
})
. Popracuje jeszcze nad kodem, dzięki wielkie za wskazówki.
