M.
ゲーム Web

Huh Cat Clicker

クリックするたびに「Huh?」と反応するネコのWebクリッカーゲーム。スコアはローカル保存。

Huh Cat Clicker

ネットミームとして話題になった「Huh?」ネコを、ひたすらクリックして出現させるだけのWebゲーム。画面のどこかをクリックするたびに、首をかしげて「Huh?」と鳴くネコの動画が飛び出してくる。目標もゲームオーバーもなく、ただクリックするほどネコが増えていく。ひたすらバカバカしいことを全力でやり切った作品だ。

こんな人に向いている

  • 「Huh?」ネコのミームが好きな人
  • 仕事や勉強の合間に、何も考えずに気分転換したい人
  • 連打系のクリッカーゲームが好きな人
  • 友達と「何回クリックしたか」で張り合いたい人

遊び方

  1. ページを開き、画面の好きな場所をクリック(スマートフォンならタップ)する。
  2. クリックするたびに、画面のどこかに「Huh?」ネコが現れる。
  3. ひたすらクリックを続けて、ネコを増やしていく。
  4. たまに出てくるレアなネコを狙う。
  5. クリック数が増えたら、Xでシェアして自慢する。

主な機能

  • ランダムな出現: ネコは毎回ランダムな位置・大きさ・角度で出現するので、画面がどんどんにぎやかになっていく。
  • 毎回ちがう鳴き声: 再生速度をランダムに変えることで、「Huh?」の声の高さが毎回変わる。連打すると、高い声と低い声が入り混じった合唱になる。
  • ゴールデンネコ(出現率5%): 金色に輝くネコ。だんだん大きくなりながら、5回繰り返して鳴く。
  • レインボーネコ(出現率5%): 虹色のネコ。超高音で鳴きながら、流れ星のように画面を横切っていく。
  • クリック数の保存: これまでのクリック数はブラウザに保存されるので、ページを閉じても次回に続きから数えられる。
  • Xでシェア: 現在のクリック数をワンタップでXに投稿できる。

技術構成

HTML・CSS(Tailwind CSS)・素のJavaScriptで作った静的なWebゲームで、GitHub Pagesから配信している。ネコの映像はWebM動画で、クリックのたびに新しいvideo要素を生成して再生している。声の高さの変化は、動画の再生速度(playbackRate)を1.0〜2.2倍の範囲でランダムに変えて表現した(レインボーネコは3倍速)。クリック数はlocalStorageに保存している。

工夫した点

単純なゲームほど「次は何が起きるか」というちょっとした驚きが大切になる。そこで、位置・大きさ・角度・声の高さをすべてランダムにし、同じネコが二度と同じように出てこないようにした。さらに、それぞれ5%の確率でゴールデンネコとレインボーネコが出現するレア演出を加え、つい何度もクリックしたくなる仕掛けにしている。

よくある質問

無料で遊べますか?

無料で、アカウント登録も不要。ブラウザでページを開けばすぐに遊べる。

音は出ますか?

クリックするたびに「Huh?」の声が鳴る。連打すると声が重なってかなりにぎやかになるので、周りに人がいる場所では音量に気をつけてほしい。

スマートフォンでも遊べますか?

タップで遊べる。動画はインライン再生に対応しているので、全画面に切り替わらずにそのまま画面上にネコが現れる。

クリック数はどこに保存されますか?

ブラウザのlocalStorageに保存され、サーバーには送られない。そのため別の端末や別のブラウザでは0から数え直しになる。ブラウザのサイトデータを消すとクリック数も消える。

レアネコの出現率は?

ゴールデンネコとレインボーネコはそれぞれ5%。つまり、およそ10回に1回はどちらかのレアネコが出る計算だ。

同じカテゴリの制作物

Circle M@ster Momoko
ゲーム Web

Circle M@ster Momoko

描いた円の真円度をスコアリングするWebゲーム。キャラクターがリアクションしてくれる。

  • #JavaScript
  • #Canvas