jQueryでモグラ叩きを作ってみた

jQueryでモグラ叩きを作ってみた

こんにちは稲垣です。

以前モグラたたき風のゲームを作ってみたのですが、実際はモグラに何の関係もないゲームだったので、今回は正統派のモグラたたきゲームを作ってみました。

目次

デモ

完成イメージになります。

スタート画面をクリックするとゲーム開始になります。

html、CSS、画像ファイル

html

モグラを乗せる#stageとスタート・タイムオーバーの画面である#gameoverと、残り時間とスコアを表示させる#infoを用意します。

#stage内のdivはすべてモグラになります。

css

#gameoverは#stageの上に被さるように同じサイズと配置で設定します。

表示非表示の切り替えはjavascriptで行います。

画像ファイル

モグラの画像を用意します。

穴から出てきて潜るまでと叩いた時の画像を一枚にまとめ、モグラの状態によってbackground-positionを変化させる形にしました。

動きの実装

それでは動きの部分になります。

まずは必要な変数と配列を用意します。

モグラが土から出てきて潜るまでを作成

最初にモグラの動きの処理をしようと思います。

joutai[]の配列の中から、土に潜った状態・現在動いていないモグラを選択する関数を作成します。

mogSelect()を実行すると潜っているモグラの番号がランダムで1つ返ってくるので、このモグラに飛び出す処理を与えるために下記の関数を作成します。

以上の関数でmogStart(mogSelect(), 1000)の様に引数を与えて実行すると、潜っている状態のモグラからランダムで1匹が飛び出して土に戻るまでの動きができました。

モグラを叩いた時の処理

次にモグラをクリックした時の関数を作成します。

ゲームスタートとカウントダウンの処理

あとはカウントダウンの関数を用意します。

残り時間が25秒、20秒、15秒の時に出現するモグラの数を増やしています。

この辺りの数字は動かしながら適宜調整してください。

これで必要な関数は全て揃ったので、スタート画面をクリックした時の動きをつけたら完成です。

まとめ

最後にコードをまとめて載せます。

叩いた時のモグラのイラストはちょっとお気に入りです。

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