前回作成したDHTMLSpriteクラスを継承した、bouncySpriteクラスを作成する。
関数を用いたクラス生成方式の場合、継承は以下のとおりとてもわかりやすい。
var bouncySprite=function(params){ var x=params.x; var y=params.y; var xDir=params.xDir; var yDir=params.yDir; var maxX=params.maxX; var maxY=params.maxY; var animIndex=0; var that=DHTMLSprite(params); that.moveAndDraw=function(){ x+=xDir; y+=yDir; animIndex+=xDir>0 ? 1:-1; //進行方向に合わせて歯車の回転も変える。 animIndex%=5; //1行4列 5の余りをx軸(列数)とする animIndex+=animIndex0 && x>=maxX)){ xDir=-xDir; } if( (yDir0 && y>=maxY)){ yDir=-yDir; } that.changeImage(animIndex); that.draw(x , y); } return that; }
使うプロパティと追加のプロパティを自分で引き受け、thatとしてDHTMLSpriteのインスタンスをthatとして生成する。そして、そのthatに新たなメソッドを付け加える。
一方、パターン2の教科書的方法は少々ややこしい(まだバグ無くならず)。こちらを参照。
2012.9.12 バグ解消。全文記載
function BouncySprite(params){ //新たに追加されたプロパティを記述する this.x=params.x; this.y=params.y; this.xDir=params.xDir; this.yDir=params.yDir; this.maxX=params.maxX; this.maxY=params.maxY; this.animIndex=0; DHTMLSprite.call(this , params); //親のオブジェクトのコンストラクタを呼び出す } BouncySprite.prototype=new DHTMLSprite(); BouncySprite.prototype.moveAndDraw=function(xPos , yPos){ with(this){ xPos+=xDir; yPos+=yDir; animIndex+=xDir>0 ? 1:-1 ; //進行方向に合わせて歯車の回転方向を変える animIndex%5; //1行4列 5の余りをx軸(列数とする) animIndex+=animIndex0 && xPos>maxX)){ xDir=-xDir; } if( (yDir0 && yPos>=maxY) ){ yDir=-yDir; } changeImage(animIndex) ; draw(xPos, yPos); } }
継承は関数形式の方がはるかに使いやすそう。