最近は育児系の記事にアクセスが増えてますが、web系の勉強もちゃんとやってますよ!
というわけで、jQueryで簡単なゲームを作ってみましたので、そのお話です。
Contents
作ったもの
「Find the Other」
https://memo.ark-under.net/find-the-other
パネルに書かれた文字の中から一文字だけちがう文字を見つけていくゲームです。
Twitterでちょっと話題になってた「看你有多色﹣暴走微遊戲」の文字バージョン、という感じです。
このゲーム、すごくシンプルだったので、JavaScriptで出来そうだなーと勉強ついでに考えてみました。
仕組み解説
今回はHTMLに書かれたspanのクラスをクリックで変えていくやり方で実装しました。
JavaScript
<script type="text/JavaScript" src="js/jquery-1.11.1.min.js"></script> <script type="text/JavaScript" src="js/anser.js"></script> <script type="text/javascript"> var minNum = 2; var maxNum = 8; var cNum = -1; var boxNum = 0; var arrChangeCnt = new Array(); $(function() { sizH = $('section.game').width(); $('section.game').height(sizH); $(document).on('click', '.find', function(){ cNum = cNum + 1; createBox(cNum); }); $('span.start').click(function(){ arrChangeCnt.push(timer1 = setInterval("countDown()",1000)); }); $(document).on('click', '.reset', function(){ location.reload(); }); }); function createBox(cum){ $('.game p.start').css('display','none'); sizW = $('section.game').width(); if(cum+minNum >= maxNum){ boxNum = maxNum * maxNum; sizW = Math.floor(sizW / maxNum)+'px'; }else{ boxNum = (cum + minNum) * (cum + minNum); sizW = Math.floor(sizW / (cum+minNum))+'px'; } $('span.box').css('width',sizW).css('height',sizW).css('line-height',sizW); var ranNum = Math.floor(Math.random()*boxNum); var ans = Math.floor(Math.random()*asTable.length); for(i=0; boxNum > i;i++){ if(i == ranNum){ $('span.box').eq(i).addClass('find'); $('span.box').eq(i).css('display','inline-block').text(asTable[ans][0]); }else{ $('span.box').eq(i).removeClass('find'); $('span.box').eq(i).css('display','inline-block').text(asTable[ans][1]); } } } function countDown(){ var countNum = $('.cn').text(); int = countNum-1; if(int < 0){ resHtml = '<p class="result">正解レベル【'+cNum+'】</p>'; resHtml += '<p><span class="start find reset">もう一度?</span></p>'; resHtml += '<p><a href="https://twitter.com/intent/tweet?text=正解レベル【'+cNum+'】でした!%0aFind the Other&url=https://memo.ark-under.net/find-the-other" rel="nofollow" class="twitter-link">結果をツイート</a></p>' $('section.game').html(resHtml); if (arrChangeCnt.length > 0) { clearInterval(arrChangeCnt.shift()); } }else{ $('.cn').text(int); } } </script>
// // anser.js // // 間違い探しの問題と答え // asTable[n] = Array(答え, 間違い); var asTable = new Array(); asTable[0] = Array('め','ぬ'); asTable[1] = Array('ろ','る'); asTable[2] = Array('わ','れ'); asTable[3] = Array('ぷ','ぶ'); asTable[4] = Array('ぴ','び'); asTable[5] = Array('子','了'); asTable[6] = Array('夭','天'); asTable[7] = Array('日','曰'); :
html
<section class="count"> <p>残り <span class="cn">60</span> 秒</p> </section> <section class="game"> <p class="start">1つだけ違う文字を見つけてください<br /> 制限時間は60秒です<span class="start find">start!</span> </p> <p><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span><span class="box"></span></p> </section>
解説
最初はspanを非表示にしておき、クリックする度にcreateBox()で必要な数のspanを表示&サイズ調整をし、ランダムにanser.jsから問題を取得&配置してます。
setIntervalで1秒ごとにカウントダウンし、カウントがゼロになったらspanを全て非表示にしてます。
問題を表示させる部分を調整すれば、色々なまちがい探しが作れると思います。
テキストの代わりに色を表示させれば「看你有多色﹣暴走微遊戲」と同じようなものが作れると思いますし、キャラクター画像なんかで作っても面白いんじゃないかなーと思います。
サイトにちょっとしたゲームコンテンツを追加したい時などにどうぞ。
2017.11.14追記
クリックやホバーが多いとclearIntervalが効かないことがあるそうなので、こちらを参考に対策しました。