タイトルの通り、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が更新されない」ってのは落とし穴ですな。みんなはまっているようですが私もはまりました……