バーチャルパッドですがtouchしたまま方向を検知するので、なんだか難しく考えていましたがアナログジョイスティックのデジタル変換の様な考えで単純にパッドの領域を９分割して、上下左右に二値化しました。
あと追加するのなら、逆にアナログジョイスティック機能やキーリピートのエミュレーション（連射モード）とかでしょうか。

 var me = this, dir,
    _make_dir = function (e) {
        var dir = 0;
        var dx = e.pageX - pX;
        var dy = e.pageY - pY;
        if (dx <= 35) {
            dir += 1;
        } else if (70 < dx) {
            dir += 2;
        }
        if (dy <= 35) {
            dir += 4;
        } else if (70 < dy) {
            dir += 8;
        }
        return dir;
    },
    touch_start = function (e) {
        $(tt).bind('mousemove', tt, touch_move);
        $(tt).one('mouseup', tt, touch_end);

        if (e.originalEvent.touches && e.originalEvent.touches.length) {
            e = e.originalEvent.touches[0];
        } else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
            e = e.originalEvent.changedTouches[0];
        }
        me.dir = _make_dir(e);
        me.onMousedown && me.onMousedown(me.dir, e);

        return false;
    },
    touch_move = function (e) {
        if (e.originalEvent.touches && e.originalEvent.touches.length) {
            e = e.originalEvent.touches[0];
        } else if (e.originalEvent.changedTouches && e.originalEvent.changedTouches.length) {
            e = e.originalEvent.changedTouches[0];
        }
        var back = me.dir;
        me.dir = _make_dir(e);
        if (back != me.dir) {
            me.onMousedown && me.onMousedown(me.dir, e);
        }
        return false;
    },
    touch_end = function (e) {
        $(tt).unbind('mousemove', touch_move);
        me.onMouseup && me.onMouseup(e);
        me.dir = DQ.DIR.NONE;
        return false;
    }

ナイトリービルドを更新。
RPG 習作
戦闘テスト

先日のデモに反映しました。まだ、ABボタンは機能していません。
shooting.html

  localStorage.setItem(key, value);
  value = localStorage.getItem(key);

また、これに伴ってkeyに名前空間としてプロジェクト名を付与して保存するようにしました。

ナイトリービルドを更新。
RPG 習作(debug)
戦闘テスト

HTML5 canvasの習得のために、canvasとフレームワークを追加しました(IE9,Firefox,Chromeとか)。
shooting.html

まず、JavaScriptの特徴としてシングルスレッドでイベントドリブン型だということ。なので次のような実装(InqueryUserInput()の部分)をすることが出来ない（基本的に）。

while(終了?) {
  var command = InqueryUserInput(); //ユーザーからのコマンド入力を待つ
  battle(command); //ユーザーのコマンドを元に対決
}

代わりにUIの入力完了イベントから戦闘をキックする方法が考えられる

function onClick(e) {  //コマンド入力完了を示すイベントとします。
  //
  var command = generateCommand(); //入力情報からコマンドを生成
  var result = battle(command);
  if(result) { //終了？
     //コマンドの入力画面の再表示
  } else {
     //戦闘の完了処理
  }
}

そのほかにJavaScriptが苦手なのが20msそのまま待機みたいな同期 wait処理です。
よって、インターバルタイマーを使って擬似的なエージェント指向のモデルを採用した方が楽かもしれない。

下図は簡略化したシーケンス図です。:Timerから:Engine、current:Creatureへとupdate()を伝搬させ、それぞれの中で戦闘可能(【myTurn】)ならコマンドの実行を検討します。
この時、自動戦闘ならAIからコマンドを決定し、手動ならユーザーから入力されたコマンドを使用します。
また、ユーザーからのコマンドは非同期でＵＩから入力されるので、update()が呼び出された時点でコマンドが存在しなければ、処理をスルーします。

シーケンス図

ここまで書くとRTSのようなシステムの方が作りやすいことに気づきます。・・・が、あくまでもターン制にこだわるので、状態遷移を導入することになります。
戦術(コマンド入力)と戦闘に状態を分け、戦術状態中はcurrent:Creatureへのupdate()の実行をブロックすることにします。

とりあえず、デモをつくりました。