ラシウラ

ECMAScript5で作ったSameGameの更新

ECMAScript5を使ってSameGameを書いてみた - ラシウラを少しアップデートしました。

エンジン共用でcanvasの他に、CSS3のUIをつくってみました。canvasのない3DSのブラウザでも動くようになったが、アニメーションも入れたので重いけど。

デモ:

• canvas2d: http://dl.dropbox.com/u/14499563/es5samegame/samegame-canvas2d-view.html
• css3: http://dl.dropbox.com/u/14499563/es5samegame/samegame-css3-view.html

SameGameルールエンジン:

• http://dl.dropbox.com/u/14499563/es5samegame/samegame-rules.js

SameGame UI:

• http://dl.dropbox.com/u/14499563/es5samegame/samegame-canvas2d-ui.js
• http://dl.dropbox.com/u/14499563/es5samegame/samegame-css3-ui.js

ES5互換ライブラリ:

• https://gist.github.com/1000718

更新したこと

• canvas2dのほかに、CSS3を使ったUIも用意した
• OperaやSafariのようなES5標準関数が足りない環境でも動くように、ダミー実装ライブラリをいれた
  • CSS3のtransitionで少しアニメーションするようにした(IE9以外)
• boardのcellはcolor値じゃなく、{color: color値}のオブジェクトに変えた
• 多値や複数パラメータを単一オブジェクトにして受け渡しするようにした
  • forEachをArrayと同じインタフェースにした

• 最小チェーン数をルール側に移動し、GameOver判定をいれた
• UIでスコアをつけた
• 更新リスナをいれた
• タブレット対応途中

ツイートする

Permalink | コメント(0) | トラックバック(0) | 20:18