HTML5とjavaScriptで花火っぽいの

あむちょです。

あべっちがかまってくれないので、本日2度目のプログラミング

PR アプリ作ってます

bandicam 2013-03-31 01-06-31-787

相変わらずHTML5とjavaScriptがマイブームです。

今回作ったのは、なんか花火みたいなやつ。以下のリンクで開始。画面をクリックするだけです。

Hanabi

今回は全画面表示にしてみました。色の透明度を0.3にしているので、同じとこを連打すると重なった部分の色が変化しておもしろいよ。消えるまでの時間と色はランダムです。

前回、数式がなんたら言ってましたが、今回も数式により描画しているので、基本的にはクリックした座標と経過時間のみ管理するだけとなってます(実際は消えるまでの時間と色を保持)。

分裂後の描画はこんな感じ。

x=クリックしたx座標+時間経過×sin(360度÷分裂数×n+時間経過)
y=クリックしたy座標+時間経過×cos(360度÷分裂数×n+時間経過)
角度に時間経過を足してるのは回すためです。

<br />
for(var m=0;m&lt;hibanaNum;m++){<br />
    context.beginPath();<br />
    context.fillStyle=&#8217;rgba(&#8216;+struct[n].red+&#8217;,&#8217;+struct[n].green+&#8217;,&#8217;+struct[n].blue+&#8217;,0.3)&#8217;;<br />
    context.arc(struct[n].x+3*(struct[n].cnt-30)*Math.sin(Math.PI*2/hibanaNum*m+struct[n].cnt/50),<br />
        struct[n].y+3*(struct[n].cnt-30)*Math.cos(Math.PI*2/hibanaNum*m+struct[n].cnt/50),<br />
	(struct[n].life-struct[n].cnt)/2,0,Math.PI*2,false);<br />
    context.fill();<br />
}<br />

無理やり日本語にするなら、時間とともに半径が大きくなる円の円周を分裂数で等分する点ってところでしょうか。

判定入れれば、真下に向かって爆弾投下するゲームとか作れそうですね。

javaScriptにはまってるせいで、

ますますiPhoneアプリのリリースは遠のく

 [ad]

「HTML5とjavaScriptで花火っぽいの」への2件のフィードバック

  1. javaScriptちょっと見たけど詰んだ。
    CSSと混ぜるともうアカンヽ( ´ー`)丿

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です