Javascript でタートルグラフィックス

http://languagegame.org/tmp/jstile/exp/worm.html

RUN ボタンを押すと実行します。

そういえば昔アランさんたちが作った logowiki というウェブブラウザで動く LOGO がありました。残念ながら今はなくなっているのですが、あれどうやって実装していたのだろうと気になって、自分で作ってみる事にしました。LOGO でも無いし、wiki でも無いですが、ウェブブラウザで簡単なタートルグラフィックスが楽しめます。Firefox2 と IE6 で動作確認しています。動く感じは IE の方がお茶目です。色々プログラムを変えて遊んでみてください。

実装上の落とし穴

比較的 SVG の方がすんなり動きました。VML の方は意外な動きが多かったのでかなり悩みました。特に引っかかったのは次の点です。

• VML のオブジェクトをグループ化する時は座標系を明示する事。<v:group> 要素を使う際は、coordsize 属性にグループの "幅, 高さ" を入れないと、デフォルト値が使われるので中身がちっちゃくなってしまいます。
• VML の polyline に点を追加するには element.points.Value = "座標 ..." のようにする。これは目を皿のようにして MSDN を読まないと分からないと思います。なぜか setAttribute で points 要素を書き換える事も出来ませんでした。

追記

インスペクタをつけてみました。こうなるとドラッグアンドドロップも作りたくなってくる。どうしようかなー。