メメメモモ

プログラミング、筋トレ、ゲーム、etc

canvasとinterpreterパターンを使った描画

増補改訂版Java言語で学ぶデザインパターン入門

増補改訂版Java言語で学ぶデザインパターン入門


こちらのInterpreterパターンの章で紹介されている例をjavascriptcanvasで書いてみました。
本ではJavaで書かれているものです。


下記のようなスクリプトで「車」を操作します。

program
    repeat
         4
         go
         right
    end
end


「go」で車が進み、「left」「right」で車が回転します。
「repeat 数字」で、その後のコマンドが繰り返し実行されます。
BNFで表すと下記のようになります。

::= program
::= * end
::= |
::= repeat
::= go | right | left


例のプログラムでは、このスクリプトをパースして実行するものです。
今回は、このスクリプトのインタプリター部分をjavascriptで記述し、
描画の部分ではcanvasを用いました。


http://github.com/memememomo/interpreter_canvas


実行結果の様子は下記のようになります。
f:id:memememomo:20100513115733p:image
f:id:memememomo:20100513115732p:image




点が車が止まった地点、線が車が通った道です。
とりあえず例と同じ結果が得られるようになりました。

TODO

  • 車の移動の様子をアニメーションで表示
  • ステップステップで実行できるようにする