最終更新日:2014年8月21日
サイト開設日:2014年8月21日

HTML5とJavaScriptのテトリス風ゲーム

実際にプレイできるテトリス風ゲーム

ネット上に公開されていたソースコードを利用してテトリス風ゲームを設置してみました。
操作方法としては、キーボードのカーソルキー左右でブロックを左右に移動し、カーソルキー下でブロックを下に落とし、カーソルキー上でブロックが回転するのですが、カーソルキーの上下を押すとこのページが上下にスクロールしてしまうので、少しばかり遊びにくいかもしれません。

テトリス風ゲームをプログラミングしている学習動画

上のテトリス風ゲームはjQueryなどのライブラリを一切使わずにフルスクラッチで作られているのですが、その制作する様子を紹介しているのが下の動画です。しかもたった45分で制作しています。
この動画を見るだけでも十二分に勉強になりますが、この動画を見た後に上のテトリス風ゲームを操作してみて、さらにJavaScriptのコードを解析しながらじっくりと眺めると、とても良いプログラミングの勉強になります。

ソースコードなどのファイル一式をgithubからダウンロード可能

このテトリス風ゲームのソースコードはgithubに公開されていてダウンロードすることができますので、ダウンロードして各ファイルの中身(コード)をじっくりと見ましょう。
ちなみにこのファイルのライセンスはMIT Licenceなので自由に改変することができます。(著作権表示などの必要あり)

JavaScriptのコードは約200行

このテトリス風ゲームはJavaScriptのコードでたった200行で作られています。とてもシンプルで短いプログラムです。
ちなみに下の画像はメインのプログラムが入っている「tetris.js」というファイルの中のソースコードです。
この短いコードの中にいろいろな機能が実装されていますので、じっくりと解析してプログラミングの勉強をしましょう。。

stone:blog stone:blog stone:blog stone:blog

このページの先頭へ