« 2016年3月 | トップページ | 2016年8月 »

2016年7月

2016年7月14日 (木)

LongDriver でフィールドのスクロール

LongDriver でフィールドのデータ作成およびスクロールの実装をしました。下図で動作確認出来ます。

フィールドのデータはエンドゾーンからエンドゾーンまで用意してあり、 clipPath で覗き見ることでフィールドの一部を表示しています。覗き窓を <defs> 内で clipPath として定義し、フィールドを <g clip-path="url(#frame)">・・・</g> で囲めば clipPah の領域だけが表示されます。


<defs>
・・・
    <clipPath id="frame">
        <rect x="54" y="50" width="720" height="480" />
    </clipPath>
</defs>

<g clip-path="url(#frame)">
<g id="field" >
    <rect x="-66" y="-790" width="960" height="2160" fill="#6c3" />
・・・

clipPath 内に表示されるフィールドをスクロールさせるには茶色のバーを使います。画像の左右および下側に茶色のバーが有りますが、この上をドラッグ(注意)することでフィールドがスクロールします。

コードの概略は次のようになっています。バーの上で mousedown すると startScroll() が実行され、そこで mousemove に対するイベントリスナー hScroll()vScroll() が登録されます。そして mouseup すると endScroll() に制御が移り hScroll()vScroll() が削除されてスクロールは終了します。


function startScroll(evt){
    ・・・
    if (evt.currentTarget.id == "hbar"){
        bar.addEventListener("mousemove", hScroll, false);
    } else {
        bar.addEventListener("mousemove", vScroll, false);
    }
        bar.addEventListener("mouseup", endScroll, false);
    ・・・
}
・・・

function endScroll(evt){
    if (evt.currentTarget.id == "hbar"){
        hBar.removeEventListener("mousemove", hScroll, false);
    } else {
        vBar.removeEventListener("mousemove", vScroll, false);
    }
}

水平スクロールは hScroll() 、垂直スクロールは vScroll() で実行しています。この2つはほぼ同じコードになっているので、1つにまとめたいのですが、良い方法が判らず、別々の関数になっています。

現時点では、コードに問題が有ります。バーの上で mousedown し、そのままバーの外に出てから mouseup してバーの上に戻ると、まだスクロールは有効のままになっています。また、バーの外で mousedown してからバーの上に乗り、 mouseup すると、スクロールモードでもないのに endScroll() が実行されてしまいます。これらは意図しない動作なのですが、良い解決策が判らないので、そのままにしています。

(注意):ここでは、 mousedown した状態でマウスを動かすことをドラッグと呼んでいます。実は ondrag を使おうとしたのですが、うまく行きませんでした。それはそうでしょう。ドラッグは物を移動することですから。バーの上で ondrag すると、それはバーを移動する意味になります。

2016年7月10日 (日)

アメリカンフットボールのプレイ図ソフトの作成指針

アメリカンフットボールのプレイ図ソフトの作成指針を次のように決めました。

  1. 全フィールドを扱う
  2. フィールドの一部を覗き窓に表示し、フィールドをスクロールして任意の位置を表示する
  3. 攻守交代できる
  4. 複数のページを扱う
  5. プレイ図のコード・デコードが可能
  6. フィールドは拡大・縮小できる

a~b

フィールドの任意の位置にプレイ図を展開できるように、フィールド全体のデータを用意します。ただ、フィールド全体を表示するわけにも行かないので、一部を表示するのぞき窓を設けて、その中でフィールドをスクロールするようにします。

c~e

c.~e. は FlatTable でもやったことです。プレイ図は基本的にスクリメージラインの下側が攻撃陣で上側が守備陣ですが、フィールドを 180°回転して攻守入れ替えられるようにします。また、複数のプレイ図を扱えるようにし、それを切り替えて表示できるようにします。そして、プレイ図を文字列にコード化し、それを HTTP のクエリとして送信できるようにします。

f

選手を表す図が小さくて番号が読みづらくなりそうなので、プレイ図を拡大できるようにします。

ところで、今回作成するソフトの名前は LongDriver にしました。 Drive とは一つながりの攻撃を意味し、タッチダウンまでの長い Drive を表示できるソフトが LongDriver ということになります。

2016年7月 3日 (日)

アメリカンフットボールのプレイ図ソフト作成開始

FlatTable の作成が終了して久しいですが、次のターゲットが決まりました。表題にも有るように、アメリカンフットボールのプレイ図ソフトです。プレイ図とは選手の配置や動きを図にしたものです。下の図はソフト作成途中のものを使ってフォーメーションのみを描いたもので、プレイ図はこれに選手の動きを表す線が加わります。

道具は FlatTable の時と同様に SVG+JavaScript です。 JavaScript を使ったのは前回の FlatTable が初めてだったのですが、 JavaScript の作法を知らないため、ひどいコードになっています。

JavaScript では、プロトタイプというものを使って、( JavaScript 風)オブジェクト指向でプログラミングするようなのですが、これが私には分かっていません。かつて C に慣れ親しんだ者としては、オブジェクトを設計するのがまどろっこしくて、思い付くままに動作をコーディングしてしまいます。何十万行というような大規模ソフトなら、オブジェクト指向の方が良いかも知れませんが、私の扱うのはせいぜい数千行です。この程度だと、動作を片っ端からコーディングしたので賄えます。

しかし、 FlatTable ではスパゲッティになってしまったことを反省し、今回は JavaScript の作法に気を付けながらプログラミングを進めて行きたいと思っています。

« 2016年3月 | トップページ | 2016年8月 »