>  >  >  > 

jQueryでモグラたたきの様なミニゲームを作ってみた

jQueryでモグラたたきの様なミニゲームを作ってみた

こんにちは、稲垣です。

事務所の引っ越しから2週間が経ち、少しずつ片付けは進んでおります。

さて、今回はjQueryでモグラたたきの様なミニゲームを作成してみました!

ただ現実でモグラを叩くことはそう無いだろうと思い、リアリティを求めてちょっとしたアレンジを加えています。

目次

デモ

まずは完成サンプルになります。

背景画像がオフィスになっている事に特に深い意味はありません。新事務所にたくさん出てくるとかそういうわけではありません。

ちなみに自分の最高得点は4700でした。

html、CSS、画像ファイル

htmlとcssになります。

html

#stageに置いたbuttonを複製していく形にします。

.mushiはクリック1回で無効化するためにprop()を使用したかったのでbuttonにしました。

css

画像ファイル

クリック前とクリック後の画像を一枚にまとめて作成しました。

羽の部分が動く簡単なGIFアニメにすることによって、臨場感あふれる仕上がりになります。

動きの実装

それでは動きをつけていきます。

モグラたたきの動作部分には必要ないのですが、jQueryRotateプラグインを導入しています。

jQueryRotateのダウンロードはこちら

まずは必要になる変数を宣言します。

次にプログラム内で使う関数を書いていきます。

一定時間毎に.mushiをランダムな位置に増殖させていくので、0~500px以内のleft値と0~400px以内のtop値をランダムに取得しreturnで返す関数を作成しておきます。

.mushiの角度をランダムに取得する関数です。

先程のjQueryRotateプラグインはこのためだけに導入しました。

作動させると0.5秒ごとに.mushiを増殖させる関数です。

clone()で複製させてからの各動作はメソッドチェーンでつなぎました。

.mushiは常に飛び続けるように作るつもりだったのですが、最初の7秒だけ移動しその後じっとしているのもそれらしいと思い、移動は複製時に一回のみとなっています。

時間経過で複製する.mushi全てにこの処理をかけたいので、クリックイベントは.click()ではなく.on()を使用しましょう。

.click()だと最初に配置されているものにしか処理がかかりません。

最初のスタートボタンを押した時の動作の中に残り時間のカウントと終了時の処理も記述しました。

まとめ

以上で完成になります!最後にコードをまとめて載せます。

0.5秒に1匹増えるこのミニゲームほどではありませんが、現実でもいつの間にかどんどん数が増えていくので今年の夏はしっかり対策したいです。

それではまた。

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング