JavaScriptでMVPパターン（ぷよぷよ編）

せっかくUIパターンについて3つも記事を書いた(UIパターン その1、UIパターン その2、UIパターン その3)ので、自分でもコードを書いて試してみようと思った。

連鎖シミュレーションツール


JavaScriptのコードはこれ(puyopuyo.js)。


モデルは2つ。fieldModel (6x12のフィールド)と、nextModel (次ぷよ)。observersフィールドにビューを追加しておくと、適宜update()関数をキックしてくれる。
fieldModelを書いたときにはgetter/setterをつけてみたのだが、まどろっこしかったのでnextModelではフィールドを直接公開してみた。


ビューも2つ。fieldViewと、nextView。どちらもupdate()関数を持つ。ビューを組み立てるときにはHTML DOMのノードコレクションを渡すようにしている。


プレゼンターは1つ。といってもあまりやることがない。


作ってみて気がついたが、Observerパターンを単純に実装すると困る。何が困るかって、アニメーションだ。
ぷよの落下と消滅はアニメーションするように作らないと、一瞬で終わってしまって何のことやらわからん。
ところが、JavaScriptでアニメーションするときって、完了後の処理はコールバック関数として渡さないといけないわけだ。
今回は手を抜いて、画面を更新するたびにダイアログを表示することにした。結果は情けないことになっているが、本来の目的はMVPのサンプル実装なので、大目に見てくれ。

ちなみに、なぜ「ぷよぷよ連鎖シミュレーション」にしたかというと、ぷよぷよが下手で連鎖を組めないからだ。これでじっくり研究できるぞ。