このエントリーをはてなブックマークに追加

Memo

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

2014/10/09
Memo

findOther

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

作ったもの

findOther-ss1

「Find the Other」
http://memo.ark-under.net/find-the-other

findOther-ss2

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

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;

$(function() {
	sizH = $('section.game').width();
	$('section.game').height(sizH);
	
	$(document).on('click', '.find', function(){
		cNum = cNum + 1;
		createBox(cNum);
	});
	$('span.start').click(function(){
		var 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>';
		$('section.game').html(resHtml);
		clearInterval(timer1);
	}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を全て非表示にしてます。

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

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

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

Find the Other

Category : MemoTags : , ,

関連記事

コメントを残す




About

中の人:Mei Koutsuki (@mei331)
神奈川でweb作ったり、お洋服つくったりしてる黒いひつじさん。ロリィタ系webクリエイター。12年9月に一児の母となり、自宅で子育てしながらお仕事してます。
>> もっと詳しく