JavaScriptで初めてOOPを試したところうまくいきません。どこ
JavaScriptで初めてOOPを試したところうまくいきません。どこがおかしいのでしょうか?
img要素をアニメーション的に移動させたいと思っており、次のようにコンストラクタとprototypeを使ってクラスを作成し、インスタンスを生成して最下部の関数をイベントハンドラで呼び出してみるのですが実行されません。
//コンストラクタ
function Box(emID,targetX,targetY,speed,timer){
this.element=getElementById("emID");
this.targetX=targetX; //移動先の座標
this.targetY=targetY;
this.speed=speed;
this.timer=timer*1000;
}
//現在の座標取得
Box.prototype.currentXY=function(){
this.currentX=eval(this.element.style.left.replace("px",""));
this.currentY=eval(this.element.style.top.replace("px",""));
}
//移動先までのXY値を徐々に加算
Box.prototype.loopContents=function(){
if(this.currentX<=targetX-0.3 || this.currentY<=targetY-0.3){
this.currentX += (targetX-currentX)/speed;
this.element.style.left = this.currentX+"px";
this.currentY += (targetY-currentY)/speed;
this.element.style.top = this.currentY+"px";
}
else{
clearTimeout();
}
}
//加算を繰り返す
Box.prototype.runLoop=function(){
setTimeout(this.loopContents(),10);
}
//実行関数
function move(emID,targetX,targetY,speed,timer){
alert(emID+"and"+targetX+"and"+targetY+"and"+speed+"and"+timer); //(1)
var mover = new Box(emID,targetX,targetY,speed,timer);
window.alert("check"); //(2)
mover.currentXY(); //現在のXYを取得
setInterval(mover.runLoop(),mover.timer);
}
alertで検査してみるのですが(1)ではemIDの箇所は[object HTMLImageElement]と表示されます。これは問題ないのでしょうか?
また(2)のalertは機能しないようです。
どこがどう設計ミスなのか全くわからず困っています。
お礼
比較級のひとつだったのですね。 ご回答ありがとうございました。