WebGLベースのゲーム画面（マップ）描画テストです。

WebGLのテクスチャに作成した地形パーツをcanvas上に描画します。テクスチャには、「サイズ」メニューで指定した大きさの地形パーツを8*8作成し、乱数で作成したマップで画面上に描画します。

画面上に表示する地形パーツの数は、「表示」メニューで設定します。

描画を行うcanvas要素の大きさは「描画」「表示」メニューで変更可能です。「描画」メニューがcanvas要素のwidth/heightプロパティに、「表示」メニューがcssのwidth/height（画面上に表示される際のcssピクセル数）に対応します。

スマートフォンなどディスプレイのピクセルとcssピクセルが一致しない環境では、「devicePixelRatio」の値に応じて「描画」メニューの値を大きくすることでより高精細な描画を実現できます。

「マップ作成」ボタンでテスト開始です。マップ画面が表示されたら、「上」「下」「左」「右」ボタンを押すとその方向に移動します。移動の速度は「速度」メニューで変更してください。

速度メニューの数値は、一度の描画で移動する量（パーツ単位）です。60FPS前後の状況下だと、「1/32」で1パーツ分の移動に2秒程度かかることになります。

現状では、ほとんどスマートフォンがWebGLに対応しています。特に描画性能がいまいちな低価格スマートフォン向けにWebゲームを開発するなら、多数の画像（テクスチャ）を描画しても性能を維持しやすいWebGLの利点を活かしたいところです。