HTML

HTML5 Canvasでパズルゲーム実装

PC、主要スマホ/タブレットにてプラグインフリーで動作可能なパズルゲーム。

下記jsdo.itのサンプルコードは単純なゲームのみですが

  • 難易度変更オプション
  • 画像変更オプション(File APIで可能?)
  • ゲームクリア後に特典を加える

など、機能追加・工夫する事でよりゲーム性が増すでしょう。

当社オフィシャルサイトTOPのパズルゲームでは
ティザー効果を演出しているスライドギャラリーを、ゲームクリアで全て見える状態にする、といった連携を実装しています。

ユニークなアイデア、よりスマートな実装があれば是非forkしてください!

canvasでパズルゲーム - jsdo.it - share JavaScript, HTML5 and CSS

ポイント(非力なモバイル端末対策)

モバイル(タッチ)端末ではclickイベントではなくtouchイベントを使う
clickでも動作しますが、パフォーマンスが非常に悪くなります(タップから1~2秒後に反応)
ピースの移動アニメーションはrequestAnimationFrame()を使う
従来のsetTimeout()では滑らかな動きが実現できないため、requestAnimationFrame()を利用

今後canvasAPIに期待すること

アニメーションメソッドの追加
現状アニメーションを実現するには、右に5px移動→消す(canvasを塗り潰す)→移動→消すといったことを
繰り返す事でアニメーションを実現しています。そのため処理が重い。
3D対応
CSS3の3D機能は既にWebkit系のブラウザで先行実装されていますが、
同様にcanvasも3Dに対応予定とのこと。

HTML5を導入した制作の依頼・ご質問など、お気軽にお問合せください

※(株)インフォマークのお問合せフォームへ移動します。