4-6.スマートフォン対応版15パズル

対応すればスマートフォンでの操作性は改善される

samplejpg

本章では作成したゲームをスマートフォンに対応させる方法を説明してきました。

その最後として、本節では、3章で作成した15パズルに本章で説明してきた手法を適用したサンプルページを掲載しておきます。

スマートフォン対応の15パズル

サンプルページを見る

上記のサンプルは、3章のサンプルに対して、次のような最適化が追加されています。

  • 1.viewportの追加
  • 2.タップ時のハイライト表示を禁止
  • 3.タッチイベントに対応
  • 4.タイマーイベントタイミングへの依存度を軽減

1.を追加してことにより、スマートフォンでページを開いた場合にも、ページが縮小表示されることが無くなっています。 2.を追加したことにより、パズル画面をタップした場合にも、不必要なフォーカス表示が行われることが無くなっています。 3.を追加したことにより、タップに対する反応速度が向上しています。 4.を追加したことにより、ピースのアニメーション表示の動作速度が改善されています。