HTML5でテトリス

セガのアーケード版を初めて見たときの衝撃は今後も忘れることはないだろうテトリス。
そんなテトリスをHTML5で作ってみようと思い立ちました。
JavaScriptやcanvasをゲーム作成を通して学習するのがその趣旨です。
これからのアプリケーションプラットフォームはHTML5だとかこのあたりで叫びつつも、
実はあまり有用に使ったことがなかったのですが、ちゃんと実行もしておこうかと。

ところでテトリスを作るのはこれが2度目です。
大昔にMSX BASIC(インタープリタ)で作ったことがあるのですが、
Z80 3.58MHzは非力で、遅くてゲームになりませんでした。
これをきっかけにZ80アセンブラを学び、現在へと連綿と続いてきたことを考えると、
その体験は私のエンジニアとしての原点だったのかもしれません。
ハンドアセンブラしていたので今でもRETが0xC9なのは覚えていますね。
そういえばハンドアセンブラが辛くなったので、
BASICでアセンブラ、ディスアセンブラを自作したりもしました。
そのときついでにマシンコードを体系的に理解することができ、
論理回路的にどうすればCPUが作れるのかも想像できるようになって、
当時は効率的なCPUのアーキテクチャについても考えたりしていました。
今思い返せば、発想がRISCにかなり近かったような。
さすが俺様。センスがあります。

まあ冗談はおいといて、いろいろとググりながら3日ほど(実働10時間ぐらい)で
一応ゲームとして遊べるものができました。
ファイルサイズは21127バイト、1504行のHTMLファイルです。
まあ細かく検証してないのでバグはあるかもしれません。
物理キー(方向キーとスペースキー/Enterキー)を使うので
スマートフォンやタブレットでは無理ですが、
Windows+Chromeブラウザ、Mac+Chromeブラウザでしっかり遊べますし、
ウェブサーバにファイルを置けばNintendo3DSやWiiUでも遊べます。
いい世の中になりました。

ところで今回の成果物は版権等も考えると公開はできませんのであしからず。