Vue.jsでテトリス風ゲームを作ったよ

タイトルの通り、Vue.jsでテトリス風のゲームを作りました。

http://kmaebashi.com/programmer/vuetetris/index.html

ゲーム画面はこんな感じ。

遊び方やゲーム本体のページへのリンク、ソースプログラム一式は上記のページに記載しています。

見た目、前回のCanvasを使ったJavaScriptテトリスReact.js版テトリスと何が違うんだ、と言われそうですが、中身は結構違うのです。いやほんと。

React.js版と同様、ゲーム画面はtableで組んでいます。React.jsに比べると、Vue.jsはアプリそのものの作り方がまるっきり変わってしまう、というわけではなくてよいですね。

しかしVue.js、「splice()とかpush()を使わず、配列の要素に直接代入すると、それを検知してくれないのでDOMが更新されない」ってのは落とし穴ですな。みんなはまっているようですが私もはまりました……