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ルールエンジン:
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互換ライブラリ:
更新したこと
- canvas2dのほかに、CSS3を使ったUIも用意した
- OperaやSafariのようなES5標準関数が足りない環境でも動くように、ダミー実装ライブラリをいれた
- CSS3のtransitionで少しアニメーションするようにした(IE9以外)
- boardのcellはcolor値じゃなく、{color: color値}のオブジェクトに変えた
- 多値や複数パラメータを単一オブジェクトにして受け渡しするようにした
- forEachをArrayと同じインタフェースにした
- 最小チェーン数をルール側に移動し、GameOver判定をいれた
- UIでスコアをつけた
- 更新リスナをいれた
- タブレット対応途中