Tagged ‘canvas’

イカよけダンスをぱくった「しらす[よけ]ゲーム」

Julian Frostさんが作った日清食品のカップヌードル「イカよけダンス 篇」に衝撃を受けてスマホ用のWEBゲーム「しらす[よけ]ゲーム」を作りました。
イカだと日清さんに怒られるのでしらすにしました。
ゲーム内容は2本指でしらすをよけつつ指の間に張られた網で捕獲し、一定数しらすを捕獲すると現れるレアもん(しらすと同じサイズの生物)を捕獲するとクリアになります。
しらすやちりめんじゃこに紛れる生物はチリメンモンスター(チリモン)とかいう名称があるそうなのですが一般的な名称でなく商標を取られてるので避けてレアもんとしてます。

(さらに…)

Pixi.jsで千切りした画像を動かしてみる

Pixi.js
ブラウザでゲームとか作ったりアニメーションさせる時に便利なcanvas系のJavaScriptライブラリはいくつかあるが最速の描画JavaScriptライブラリは!? パフォーマンスの検証 – ICS LABによるとPixi.jsはWebGLを使ってFlashよりも速いらしい。

以前揺れるキリンで高さ1pxの要素(li)の背景にしてjQueryで動かしてみたがとても遅かった。
そこで、このpixi.jsを使えば早くなるかもと考えやってみた。
kirin wave by Pixi.js

前回同様、高さ1pxにスライスするが今回は要素では無くスプライトに貼り付ける感じだ。
作ったはいいが、WebGLを有効にするとFirefoxでは動かず(参考にしたPixi.jsを初めて触って簡単にアニメーションを作成してみた話(その3) | 株式会社LIGも動いてない)
Google Chromeは動くけどWebGLを有効・無効にかかわらず以前より重くなってしまった。

720個のスプライトを描画させるのは難しいのかもしれない。