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

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

［Ad］

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">１つだけ違う文字を見つけてください<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>