まちがい探しゲームを作ってみた

最近は育児系の記事にアクセスが増えてますが、web系の勉強もちゃんとやってますよ！
というわけで、jQueryで簡単なゲームを作ってみましたので、そのお話です。

Contents

作ったもの

「Find the Other」

パネルに書かれた文字の中から一文字だけちがう文字を見つけていくゲームです。

Twitterでちょっと話題になってた「看你有多色﹣暴走微遊戲」の文字バージョン、という感じです。
このゲーム、すごくシンプルだったので、JavaScriptで出来そうだなーと勉強ついでに考えてみました。

今回はHTMLに書かれたspanのクラスをクリックで変えていくやり方で実装しました。

最初はspanを非表示にしておき、クリックする度にcreateBox()で必要な数のspanを表示＆サイズ調整をし、ランダムにanser.jsから問題を取得＆配置してます。
setIntervalで1秒ごとにカウントダウンし、カウントがゼロになったらspanを全て非表示にしてます。

問題を表示させる部分を調整すれば、色々なまちがい探しが作れると思います。

テキストの代わりに色を表示させれば「看你有多色﹣暴走微遊戲」と同じようなものが作れると思いますし、キャラクター画像なんかで作っても面白いんじゃないかなーと思います。

サイトにちょっとしたゲームコンテンツを追加したい時などにどうぞ。

クリックやホバーが多いとclearIntervalが効かないことがあるそうなので、こちらを参考に対策しました。