Works

桜前線 on Google Map

Google Maps APIを使った桜前線MAP。 Google Map(ルートDiv)とCanvas(花びらエフェクト)を兄弟関係で重ねるとMapが操作不能に陥ってしまうため、MapへオーバーレイヤーでCanvasを重ねています。 ◆特長 ・Mapをスクロールorズームイン・アウトするとビューポートにCanvasが追従します。 ・PanoramioAPIを使って各地に桜写真を埋め込んでいます。 ・アクセス日で開花状況(桜の木アイコン)変化します。 ◆開花状況(桜の木アイコン)の表示仕様 予め設定した満開日とアクセス日を比較してアイコンを切り替えています。 開花状況は厳密なものではなく参考情報となりますので、これから花見に出掛けられる方は鵜呑みにされないよう十分にご注意ください。 満開日±4日以内:満開 ±7日以内:7分咲き ±10日以内:4分咲き -11日以上:つぼみ それ以外:枝

  • 18573
  • 21

enchant.jsでもぐら叩き

enchant.js でシンプルなもぐら叩き。 iPhone、iPadで2本指プレイしたら楽にクリア出来たりします。 今回使っていないMap()で背景(穴)を作ったり、色違いのもぐらを出現させて○○などゲーム要素を追加するのも割と簡単に出来そう。 <このゲームの仕様> ・出現位置 茶色の領域内でランダムにもぐらが出現 ・出現速度 ゲーム開始直後は1秒間隔で出現し、以降5体叩く毎に0.1秒短縮(加速) ・クリア条件 SCORE10000以上 ・ゲームオーバー条件 もぐら5体以上生存 ・enchant.js http://enchantjs.com/ja/ ・対応ブラウザ IE 9.0+ Chrome Safari Firefox iOS (iPhone / iPad) Android 2.1+

  • 15421
  • 1

canvasでパズルゲーム

1枚の画像からcanvasでパズルゲーム。 このコードは単純なゲームのみですが、 ・難易度変更オプション ・画像変更オプション(File APIで可能?) ・ゲームクリア後に特典を加える など、工夫すればよりゲーム性が増します。 アニメーションはsetTimeout()だとスマホでカクカクになるので、requestAnimationFrame()を利用。 ユニークなアイデアやcanvasのアニメーションで、もっとスマートな実装があれば是非forkしてください!

  • 10696
  • 4

Skills

Awards

Hot tags

Categories

HTML / CSS / JavaScript