Backbone.jsとAngularでパズルゲーム作ってコード比較
ふと以前自分が勉強しながら書いたコードを見返すと、今ならもっと上手く処理が書けただろうになと思う日々でございます。
そんな訳で今回は、Backbone.jsを勉強していた当時に作成したパズルゲームをAngular6(typescript)を使用して書き直してみました。
ゴール
目標としましては、コードの比較がしやすいように、最低限同じ機能を搭載したものを作成することです。
ゲーム内容
20年ほど前でしょうか、「ライツアウト」というパズルゲームがあったのですが皆さん御存じありますか？
ブロックを押すと隣接したブロックの色も変わり、光っているブロックをすべて消せたらクリアというものです。
wikipediaにも解説が載っています。
私は幼い頃にこれでよく遊んでおりまして、唐突にそれを思い出してBackbone.jsで作成していました。（今思えば何故…）
ゲーム
CodePenで公開しておりますのでまずは少し遊んでみてください。
一番簡単な3×3面ですので初めての方でもクリアできると思います。
コードの書き味
Backbone.js
1年ほど前に作成したため、まだまだ書き方が甘い部分はありますが大目に見ていただけると幸いです。
コード内容を見て頂ければ分かると思いますが、見た目が生のjs感が強いです。
それでも割とコードは見やすく簡潔に処理がかけるといった印象です。
ただbackbone=背骨というだけあって骨組みしか用意されていないので、
underscore.jsやjQueryと一緒に使用することがほぼ必須です。
Angular
typescriptの方は現在個人的に書き慣れている面もあってか、非常に書きやすいです。
今回はCodePenに移したので少し読み難いかもしれませんが、それぞれブロックの処理をcomponentごとで分担しています。
ブロックの処理という面だけ見ると、コード量もbackboneと同じか短いでしょうか。
jsに苦手意識を感じる方でも、typescriptは馴染みやすいと思います。（私もその一人です）
まとめ
同じjsでもフレームワークやライブラリなどの使用で書き味の違いは結構あると思います。
使いやすさはそれぞれですが、作成物などにあったものを選定するということにおいても、いろいろ触ってみるのはいいことではないでしょうか。
少し自己満足な感じにはなってしまいましたが、ほんの退屈しのぎのパズルゲーム、コードの比較ついでに遊んでみたり、
書き足して自分なりに追加機能（タイマーなど）を搭載してみたりしてはいかがでしょうか。
参考
