Chrome Life

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

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

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

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

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

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

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

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

YouTube Preview Image

HTML5 tetris – making of

驚くべきことに、

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

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

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

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

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

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

JavaScriptのコードは、

たったの200行程度です!

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

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

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

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

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

それでは、また!

【JavaScriptゲームフレームワーク】
ゲーム開発に必要な機能を兼ね備えたフレームワークです。本当にJavaScriptだけで作っているのか疑いたくなる完成度です。是非、チェックしてみてください。
これはすごい!ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」

【コーディングスピードが一気に加速するHTMLエディタ】
コーディングしながらリアルタイムに結果を確認することができるブラウザ上で動作するHTMLエディタです。とても便利なので是非チェックしてみてください。
HTML5、CSS3、JavaScriptがリアルタイム編集できる!軽量HTMLエディタ「Liveweave」

【近未来的なインターフェースを体験しよう】
パソコンについているウェブカメラを利用して、その映像をブラウザのWebRTC機能を使って取り込み、顔認識で機体を操作するゲームです。面白いので是非チェックしてみてください。
WebRTCを使って顔コントローラーで遊ぶKinect風ゲーム「FaceKat」

【ソースコードをブログで公開している方へ】
ソースコードがメインの記事だとどうしても画像が無いそっけない記事になってしまうため、FacebookやGoogle+でシェアされた時に目立ちにくくなってしまいます。そんな時は、ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」が便利です。
ソースコードからゴージャスなスナップショットが作れるChromeアプリ「Marmoset」

コーディングスキルをアップさせるのに役立つオススメ書籍

タグ: , , , ,

新着記事

この記事の読者におすすめの記事

このブログを購読しませんか?

RSSリーダーを使うと、このブログの更新情報がすぐに入手できるようになります。
このブログのRSSをRSSリーダーに登録すれば、更新されるたびに記事の本文を読むことができます。

Twitterでもこのブログの更新情報や筆者が見つけた情報をつぶやいていますので、@opakenをフォローしていただけるとうれしいです。

Facebookのファンページも用意しています。こちらでも更新情報を配信しています。「いいね!」をクリックしてもらうだけで購読できます。