前回作成した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列 ５の余りを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に新たなメソッドを付け加える。
一方、パターン２の教科書的方法は少々ややこしい（まだバグ無くならず）。こちらを参照。
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;
//１行４列 ５の余りをx軸（列数とする）
animIndex+=animIndex0 && xPos>maxX)){
xDir=-xDir;
}
if( (yDir0 && yPos>=maxY) ){
yDir=-yDir;
}
changeImage(animIndex) ;
draw(xPos, yPos);
}
}
継承は関数形式の方がはるかに使いやすそう。
