« 2016年7月 | トップページ | 2016年9月 »

2016年8月

2016年8月14日 (日)

選手の配置およびドラッグ

アメリカンフットボールのプレイ図ソフト LongDriver で選手の配置およびドラッグを実装しました。

選手を表す○や▽などを symbol で登録しておき、必要に応じて use で配置します。 symbol 部分は次のようになっています。


<defs>
    <symbol id="QB" viewBox="-10 -10 20 20">
        <circle r="8" stroke="black" />
        <text x="0" y="4" font-size="12" fill="black" text-anchor="middle" font-weight="bold">Q</text>
    </symbol>
    <symbol id="ofnPly2" viewBox="-10 -10 20 20">
        <circle r="8" stroke="black" />
        <text x="0" y="4" font-size="12" fill="black" text-anchor="middle" font-weight="bold">2</text>
    ・・・
    ・・・
</defs>

これを JavaScript から利用するのは次のように行います。


function Diagram(num, code){
    ・・・
    this.g = document.createElementNS(svgns, "g");
    var field = document.getElementById("field");
    field.appendChild(this.g);
    ・・・・
        this.defaultDiagram();
    ・・・
}

Diagram.prototype.defaultDiagram = function(){
    ・・・
    var use;
    for (i = 0; i < 11; i++){
        use = document.createElementNS(svgns, "use");    // (1)
        use.setAttribute("id", this.ofnPly[i] + this.num);
        use.setAttribute("x", this.ofnPos[i].x);
        use.setAttribute("y", this.ofnPos[i].y);
        use.setAttribute("width", 26);
        use.setAttribute("height", 26);
        use.setAttribute("fill", "white");
        use.setAttributeNS(xlinkns, "href", "#" + this.ofnPly[i]);    // (2)
        this.g.appendChild(use);    // (3)
    }
    ・・・
(1) で use 要素を生成し、必要な属性を設定します。 (2) での参照先の指定では setAttributeNS を使用します。そして、(3) で画像として追加します。 JavaScript での use の使い方は はらぺこ日誌 が参考になりました。

生成した選手のポジションを変更するには次のようにします。画面の上下に選手を表す○や▽が並んでいますが、これをクリックすると、フィールド前面に薄い網が掛かります。これを仮想マウスパッドと呼んでいます。この上でマウスボタンを押し、押したままマウスを動かすと、先にクリックしておいた選手に対応したフィールド内の選手が移動します。画面の左右に茶色のバーが有りますが、ここをクリックすると仮想マウスパッドが消え、選手の指定もキャンセルされます。

« 2016年7月 | トップページ | 2016年9月 »