Chrome Life

Chrome OS, Chrome Web Store などChrome関連の話題、Google+などの新しいGoogleサービス、HTML5, JavaScript, CSS3によるWebアプリ開発、ChromeBook、MacBook Air、クラウドの活用方法などを紹介

コードリーディングに最適!たった200行で作れるHTML5製テトリスのプログラミング学習ムービー

みなさんは、フルスクラッチテトリスを作ることができますか?

プログラマーといってもゲームを作る機会が少ないと、なかなかすぐには作れないと思います。

JavaScriptでなんとか作れそうな感じもしますが、すんなり実装はできない感じがします。

特にグラフィックやアニメーションをうまく使ったものを作るには、それなりの経験値が必要だと思います。

そこで、今回ご紹介するのが、教育目的で作られたHTML5テトリスのプログラミング学習ムービーです。


HTML5 tetris - making of

HTML5 tetris - making of

驚くべきことに、

たったの45分でテトリスが完成!

それもフルスクラッチで、jQueryなどのライブラリーを一切使っていません。

Youtubeのムービーは早送りしていますが、動きを確認しながら実装しているのが分かります。

実際に、こちらでテトリスをプレイすることができます。

操作は、カーソルキーの左右でブックを移動、下でブロックを落として、上でブロックの回転ができます。 (あいにくゲーム終了判定は実装されていないようです)

テトリスそのものは、HTML5のキャンバスを使ってとてもシンプルに実装されています。

JavaScriptのコードは、

たったの200行程度です!

これだけ小さなプログラムなのに、キーバインディングからブロックのレンダリング、ライン判定までがきっちりと実装されています。

コードリーディングするだけでも勉強になると思いますよ!

HTML5テトリスソースコードは、githubからダウンロードすることができます。(ライセンスは、MIT Licence)

こういった、動くサンプルとシンプルなコードは、コーディングレベルを高めるのにとても役立ちます。

HTML5JavaScriptスキルアップを目指している人は、是非、チェックしてみてください。

それでは、また!