順番に数字を押すやつを作った

テーブルのクリックした行と列を取得してみる - 僕のススメ。を使って、なんか作ろうと思って順番に押すやつを作ってみた。

ルール

1. startボタンでゲーム開始
2. 出てきた数字を1から順番に押す
3. 全部押したら数字が5増える

ソース

var num_cnt;
var num;

function clicked(i, j) {
	if(document.getElementById(i + '-' + j).innerHTML == num_cnt) {
		document.getElementById(i + '-' + j).style.backgroundColor='#FFCCCC';
		num_cnt++;
	}

	if(num_cnt > num) {
		num += 5;
		set_num();
	}
}

function _init() {
	for(var i=0; i<15 ; i++) {
		for(var j=0; j<15; j++) {
			document.getElementById(i + '-' + j).innerHTML = '＿';
			document.getElementById(i + '-' + j).style.backgroundColor = '#FFFFFF';
		}
	}
	num_cnt = 1;
}

function set_num() {

	_init();

	var i = 1;

	while(i <= num) {
		var y = Math.floor(Math.random() * 15);
		var x = Math.floor(Math.random() * 15);
		if(document.getElementById(y + '-' + x).innerHTML == '＿') {
			document.getElementById(y + '-' + x).innerHTML = i;
			i++;
		}
	}

}

function _start() {
	num = 10;
	set_num();
}

function load() {
	document.getElementById("result").innerHTML = "";

	var table = document.createElement('table');
	var tbody = document.createElement('tbody');

	for(var i=0; i<15 ; i++) {
		var tr = document.createElement('tr');
		for(var j=0; j<15; j++) {
			var td = document.createElement('td');
			td.innerHTML = '＿';
			td.onclick = new Function('clicked(' + i + ',' + j + ')');
			td.setAttribute('id', i + '-' + j);
			td.style.textAlign = 'center';
			tr.appendChild(td);
		}
		tbody.appendChild(tr);
	}

	table.appendChild(tbody);
	table.border = '1';
	document.getElementById("result").appendChild(table);
}

出来上がり図

出来上がり図

総評

これぐらいならあっさり出来るなぁ。Timerとか使ってやろうかと思ったけどめんどくさかったから今日はこれで終了。もうちょっとしたら時間制限を作ることにする。