任意サイズテトリスを JS / HTML Canvas に移植した

こちらから遊べます → dotris

昔Flash で作ったもの (なんと最初のバージョンは 5 年も前らしい) を JS / HTML Canvas に移植しました. 最新の Firefox か Chrome ならとりあえず動くと思います.

2016年7月31日追記: たぶん flag 変更しなくても大丈夫になりました. Chrome で動作が重い場合は chrome://flags から #disable-accelerated-2d-canvas を無効にしてみてください (自己責任で). Firefox でも何かした方が良かったかもしれませんが忘れました.

不具合や改善すべき点などがありましたらお気軽に @susisu2413 をつっついてください. ただ異なる環境への対応なんかは (古いブラウザでも新しいブラウザでも) 基本的にしないと思います.

ソースコードなど諸々は GitHub に置いてあります. github.com

特徴

• 好きなだけステージを大きくできる
  • 最大でブラウザの表示領域のサイズまで
  • Retina Mac のような高 DPI 環境ではサブピクセル単位で描画できるのでその n 倍とか
  • 某フルHDテトリスは甘え
• スーパーローテーションシステム搭載
  • T-Spin Triple も好きなだけ連発できる
  • インターネッツに山程転がっているテトリスだけど, これを搭載しているのは珍しいはず

既知の問題点

Safari で描画とかがバグる

あまりちゃんと確認していませんが, Safari の drawImage() がバグっていて, 自分自身に描画するときに事前にソース領域をコピーしていないせいだと思われます.

HTML Canvas 2D Context

Chromeで境界付近が欠けたりする

Chrome (Blink), Retina Mac, High resolution mode でステージの大きさを最大にすると境界付近が 1 サブピクセル欠けたり外側が表示されることがあります. よくわかりませんが Chrome の描画が微妙にずれるようです. おそらくフルスクリーンでは問題ないようなので, 気になる場合はフルスクリーンをお試しください.