Memo

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

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

作ったもの

findOther-ss1

「Find the Other」

findOther-ss2

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

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

仕組み解説

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

JavaScript

html

解説

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

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

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

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

2017.11.14追記

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

Find the Other

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください