50ms割込処理

つづいて50ms割込処理です。
ここでは、おもにキャラクターの画像を動かす処理を行います。

cc_huu_tools_bp_20081024.interrupt50ms = function() {

interrupt50msプロパティに50msの割込処理を行う関数リテラルを設定します。

　　var obj = cc_huu_tools_bp_20081024;

オブジェクト名が長いので、obj変数に入れて使用します。

　　if (!obj.buttonOnOffFlag) {
　　　　return;
　　}

Startボタンが押されていない状態では何もしません。

　　if (obj.command != 'move') {
　　　　return;
　　}

キャラクターを動かすモードでなければ、何もしません。
obj.commandは500msの割込処理で更新されます。

　　var x, y;

キャラクター画像の位置。

　　var tempX, tempY;

マウスカーソルとキャラクター画像の位置の差。

　　var angle;

キャラクター画像を動かす角度。

　　x = parseInt(obj.imageImg.style.left.replace('px',''));
　　y = parseInt(obj.imageImg.style.top.replace('px',''));

キャラクター画像のスタイルから現在位置を取得します。

　　tempX = obj.mousePosition.x;
　　tempY = obj.mousePosition.y;

マウスカーソルの位置を取得します。

　　tempX -= x + obj.imageSize.width / 2;
　　tempY -= y + obj.imageSize.height / 2;

マウスカーソルとキャラクター画像の中心との距離を計算します。

　　if (obj.calcDistance(0,0,tempX,tempY) < 4) {

距離が4ピクセル未満なら

　　　　obj.imageImg.style.left = obj.mousePosition.x - obj.imageSize.width / 2 + 'px';
　　　　obj.imageImg.style.top = obj.mousePosition.y - obj.imageSize.height / 2 + 'px';
　　　　return;
　　}

カーソルの位置にキャラクター画像の中心を合わせてリターンします。

距離が4ピクセル以上なら、以降の処理を行います。

　　angle = Math.atan2(tempX,tempY);
　　if (angle < 0) {
　　　　angle = Math.PI + (Math.PI + angle);
　　}

角度を計算します。
X,Y座標の角度を得るためには、Math.atan2メソッドを使用します。
そして、angleが負の場合は調整しています。
この4行は、多分間違えて書いてしまっています。正しくは、

　　angle = Math.atan2(tempY,tempX);

の1行でよいと思います。

　　x += obj.move.step * Math.sin(angle);
　　y += obj.move.step * Math.cos(angle);

角度と1回で進む最大ピクセルからx,y方向の進む量を計算し、現在の位置に足し込みます。

　　x = parseInt(x + 0.5);
　　y = parseInt(y + 0.5);

四捨五入します。

　　obj.imageImg.style.left = x + 'px';
　　obj.imageImg.style.top = y + 'px';
};

キャラクター画像のstyleにセットし、移動させます。

以上が50ms割込処理です。