« ページの複製&・・・ | トップページ | 領域表示機能 »

2012年4月12日 (木)

台の回転

FlatTable に台の回転機能を追加しました。回転と言っても、台がぐるぐる回るのではなく、台の向きが入れ替わるということです。

台の画像を回転させること自体は、そんなに難しくはないのですが、それに付随して、球の向きを直したり、場外の StandBy 位置に有る球が台と一緒に移動するのを元に戻したりと、雑用に煩わされることになりました。もっと面倒だったのは、ページ切り替え時にも同様の雑用が付いて回ることでした。

ルーチンは以下の通りです。

// 台の回転
function tableTurn(){
    ・・・
    tableAngle = tableAngle ? 0 : 180;
    document.getElementById("table").setAttribute("transform",
        "rotate(" + tableAngle + "," + centerX + "," + centerY + ")");
    revise(tableAngle);
}

// 球の向き・位置を修正する
function revise(angle){
    var ball;
    var b;
    var arrow;
    for (var i = 0; i < 16; i++){    // 手球から 15 番まで
        ball = curPage.childNodes[i*2 + 1];
        if ((-180 <= ball.y)&&(ball.y <= 180)){    // (1)
            if (arrow = ball.arrow){
                for (b = ball.next; b && (b != arrow); b = b.next){
                    ballRot(b, angle);    // 球の回転
                }
            }
        } else {    // (2)
            if (angle){
                ball.x = -20*i + 288;
                ball.y = -195;
            } else {
                ball.x = 20*i - 288;
                ball.y = 195;
            }
        }
        ballRot(ball, angle);    // 球の回転
    }
}

centerX, centerY は台のセンタースポットです。回転はこのセンタースポットを中心に行われます。

ball.y の絶対値が 180 以内ならば、その球は台の内側に位置していることを意味します(1)。その場合は、ゴーストの向きも修正する必要が有ります。また、ball.y の絶対値が 180 を超えていると、それは場外の StandBy 位置に有ることを意味するので、台の回転による移動を元に戻します(2)。なお、この 180 は回転角度の 180 とは無関係です。

--------
ここまでの動作およびコードは、本ブログのサイドバー「Link」の「SVG+JavaScript 版 FlatTable の試作品」で確認できます。

« ページの複製&・・・ | トップページ | 領域表示機能 »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/54457209

この記事へのトラックバック一覧です: 台の回転:

« ページの複製&・・・ | トップページ | 領域表示機能 »