みなさんは、フルスクラッチでテトリスを作ることができますか?
プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。
JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。
特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。
そこで、今回ご紹介するのが、教育目的で作られたHTML5製テトリスのプログラミング学習ムービーです。
驚くべきことに、
たったの45分でテトリスが完成!
それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。
Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。
実際に、こちらでテトリスをプレイすることができます。
操作は、カーソルキーの左右でブックを移動、下でブロックを落として、上でブロックの回転ができます。 (あいにくゲーム終了判定は実装されていないようです)
テトリスそのものは、HTML5のキャンバスを使ってとてもシンプルに実装されています。
JavaScriptのコードは、
たったの200行程度です!
これだけ小さなプログラムなのに、キーバインディングからブロックのレンダリング、ライン判定までがきっちりと実装されています。
コードリーディングするだけでも勉強になると思いますよ!
HTML5のテトリスのソースコードは、githubからダウンロードすることができます。(ライセンスは、MIT Licence)
こういった、動くサンプルとシンプルなコードは、コーディングレベルを高めるのにとても役立ちます。
HTML5やJavaScriptのスキルアップを目指している人は、是非、チェックしてみてください。
それでは、また!