プロローグ

皆さんは、スマートフォンでモグラたたきをしたいと思ったことはないだろうか？
そして、指で叩いてなんとなく満足してしまってはいないだろうか？
モグラたたきとは、ハンマーで叩くからこそ成立するのである！

しかし！

グーグル先生に聞いてもスマホ用のハンマーは出てこないではないか！
私は、スマホ用のピコピコハンマーの制作を決意したのであった・・・

こだわりや特徴

ピコピコハンマーのような形状でかつ、対象の端末にダメージを極力与えないことをこだわっています。
形状にこだわったことで、叩き心地も、ピコピコハンマーに近いというか似たようなものになったと思います。
できるだけ、手に入りやすいもので作成することをこだわったので、どなたでもスマホ用ピコピコハンマーを作ることが可能だともいます。

アプリ側ですが、実際にダイソーのピコピコハンマーから音をサンプリングしています。
ちゃんと叩けた場合と、叩けなかった場合の2パターンをサンプリングしました。
これにより、対象をちゃんと叩けた場合と叩けなかった場合を音で確認できます。

Webで開発することで、端末に関係なく動作させることが可能です。
(が、今はSafariでWeb Audio API周りでうまくいかなくて悩まされていますが・・・)

自作のPNG画像を扱うプログラムで、背景を風に吹かれた草原をイメージしたパレットアニメーションをさせています。
レトロな感じをだしたく、ドット絵を使用しています。
ゲームボーイアドバンスの解像度の画像をブラウザのサイズに合わせてリサイズして表示しています。
当然、タッチした際の座標も、ゲームボーイアドバンスの解像度に変換しています。
その為、画面サイズにかかわらず、モグラたたきを楽しめるようにしています。

実装が気に入らないので、どこかのタイミングでTypeScriptで書き直したいところです。

ピコピコハンマーの作り方は？

別の動画で紹介しています。
(しまった、ヒーローズ・リーグ用の動画とサムネが同じだった) https://youtu.be/MRr5X9ZEvrA
わかりづらかったらごめんなさい・・・

ピコピコハンマーの材料

• ダイソーのスポイト
• 絶縁電線
• 伝導性ゴム
• アルミホイル

仕組みとしては、スマホ用のタッチペンとおなじ

Webアプリ

• タッチイベントにより対象のあたり判定を行う
• 当たった場合は「ピコッ」という音、外れた場合は、叩き損ねた音。これらの音は実際のピコピコハンマーからサンプリングしたものを発音する
• 10体叩くことに、出現するターゲットを1体追加。それにより難易度を上げる
• 30秒経過したら終了