読者です 読者をやめる 読者になる 読者になる

C++ ときどき ごはん、わりとてぃーぶれいく☆

Wonder Rabbit Projectのなかのひとのブログ。主にC++。

JavaScript講座第10回: non-WebGL程度のJavaScriptで弾幕シューティングは動くのか?

某校で教えているJavaScript講座も第10回にして漸くウェブブラウザーでのクライアントサイドJavaScript入門へ。Node.jsインタープリターを使ってとりあえずJSに触れてみましょうから、プログラミング言語JavaScriptとしての基礎、前回はHTMLとCSSの入門tips的な。

さて、そんな訳でウェブブラウザーでJavaScriptでにゃんにゃんするを教える教材に東方風味の弾幕シューティングなデモなど作ってみました。操作法などはデモのヘッダー、あれこれについてはフッターをマウスカーソルを当てて表示してご覧下さい・w・

(URLのフラグメント部分でデモの初期設定の3つのパラメーターを指示できる様にしてあります。)

f:id:USAGI-WRP:20120424015611p:plain

当たり判定を実装していないので雰囲気だけ楽しんでね!という程度のデモですが、Phenom2の1コアあたり3GHzなPCでの話ですがChromium19では60-FPS/512-OBJS設定でもまあ遊べるかもくらいには動いてくれます。Firefox-aurora(13.0a2)では8-FPS/32-OBJSでは辛うじてカックカクだけどまあ動くぅぅぅ・・・って程度なのだけど、その程度ではデモとしても弾幕にならなくてニャントモ。

第10回のリアル講座ではこの"Moonlight Barrages"のソースを追いながらウェブブラウザーでのJavaScriptの実装についてTips的に解説する予定です。事後になりますが、どんな事を解説したのか、また面白い質疑応答などあればいつもの講座資料ページの方でもまとめようと思います。第11回もこれの解説の後半って感じにする予定。

なお、今回のデモの制作にあたって、

より使用させて頂きました。

また、ゲームデザインはとっても東方Project風味です(パターンとか実装してないけどね・w・;)
素材や参考とさせて頂きました各位にこの場でも御礼申し上げます。ありがとうございます。

<追記>

ページ背景、ステージ背景、弾、ロゴなどはInkScapeでさらさらっと作って.svgごとソースに放り込んであります。けっこーてけとーだけど何かの参考になりそうでしたならどうぞ。