続・２通りの図形の描き方

enchant.js

2通りの図形の描き方 - yamekodevの日記
の続きです。

概要

「ゼロからはじめるenchant.js入門」に載っていたサンプルを用いて、線、円、円のぬりつぶし、四角形、四角形のぬりつぶしをランダムに５つ静的に表示するプログラムを書きました。

図形をランダムかつ静的表示 - jsdo.it - Share JavaScript, HTML5 and CSS※リンク先でソースコードの閲覧と、ブラウザ上での実行結果の確認ができます。

「ゼロからはじめるenchant.js入門」に載っていた、「ランダムに図形を表示し続けて、かつその図形がだんだん縮小して消える」という合わせ技のサンプルであるSurfaceEx - jsdo.it - Share JavaScript, HTML5 and CSSをforkして手を加えたものです。

修正内容は、フレームごとの更新（addEventListener"enterframe"）を行うのではなく、for文を用いて静的に表示するためにシーンに順次追加（game.rootScene.addChild）するだけというものです。

for文を使うのと、単純に表示シーンに追加する、という点は、enchant.js: Step1 – スプライトを表示してみよう! | TM Lifeを参考にしました。

問題点

表示する図形を、game.rootScene.addChildで表示ツリーに順次登録しているため、表示領域が重なってしまう場合がある
（後から登録した図形が最上位に表示される）

次は

enchant.js: Step2 – 表示したスプライトを動かしてみよう! | TM Lifeと同様の動作をするコードを、「ゼロからはじめるenchant.js入門」に載っていたサンプルを用いて書き直してみます。

具体的には、図形をランダムに表示＋動かします。
その後、すべての図形が表示されてから動かすようにする、などちょっとした動作の変化をつけていこうと考えています。