Hatena::ブログ(Diary)

言語ゲーム このページをアンテナに追加 RSSフィード Twitter

とあるエンジニアが嘘ばかり書く日記
ホームページ | blog | twitter

2007-12-27

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

f:id:propella:20071227140455p:image

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 要素を書き換える事も出来ませんでした。

追記

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

thoruthoru 2007/12/27 15:22 Safariでもうごいたよ〜ん

propellapropella 2007/12/27 15:40 おー。チェックありがとうございます!


カレンダー
<< 2007/12 >>
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
最新コメント一覧