nazomikan/index.html

## index.html
<html>
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<style type="text/css">
#field td{
    width:100px;
    height:100px;
    border:1px solid #333;
    text-align:center;
}

#msg{
    color:red;
}
</style>
<script type="text/javascript" src="touch.js"></script>
</head>
<body>
<h1>touch the Number</h1><br />
<input type="button" value="start" id="start" />
<div id="field"></div><br />
<span id="msg"></span><br />
<span id="result"></span>
</body>
</html>

## touch.js
/*global window, document, setInterval, clearInterval */
(function (win, doc, setInterval) {
    Array.prototype.shuffle = function () {
        var i = this.length, j, t;
        while (i) {
            j = Math.floor(Math.random() * i);
            t = this[--i];
            this[i] = this[j];
            this[j] = t;
        }
        return this;
    };

    var touchNumber = function () {
        var _start  = doc.getElementById('start'),
            _msgBox = doc.getElementById('msg'),
            _count      = 1,
            _isComplete = false,
            _borderTime = 25, //bad or good ?
            _fieldSet   = 25, //square
            _stime      = null,
            _timer      = null;

        function timerAnim() {
            var now   = Date.now(),
                stime = _stime;
            doc.getElementById('result').innerHTML = (now - stime) / 1000;
        }

        function completeAnim(table) {
            var resultField = doc.getElementById('result'),
                score       = resultField.innerHTML,
                borderTime  = _borderTime,
                allCell     = doc.getElementsByTagName('td'),
                cells       = null,
                image       = (+score < borderTime) ? "url(img/good.jpg)" : "url(img/bad.jpg)";

            clearInterval(_timer);
            resultField.innerHTML = score + "s";
            cells = Array.prototype.slice.call(allCell);
            cells.forEach(function (cell, index) {
                cell.style.backgroundColor = null;
                cell.style.border = "0px";
                cell.innerHTML    = "";
            });

            table.style.backgroundImage = image;
            table.style.backgroundRepeat = "no-repeat";
        }

        var Cell = function (num, field) {
            var elm    =  doc.createElement('td'),
                msgBox = _msgBox;

            this.elm   = elm;
            this.num   = num;
            this.field = field;

            elm.innerHTML = num;
            elm.addEventListener('click', function (evt) {
                if (num === _count && !_isComplete) {
                    if (_count === _fieldSet) {
                        msgBox.innerHTML = "complete!!";
                        _isComplete = true;
                        this.style.backgroundColor = "#333";
                        completeAnim(field);
                    } else {
                        _count++;
                        msgBox.innerHTML = "";
                        this.style.backgroundColor = "#333";
                    }
                } else if (!_isComplete) {
                    msgBox.innerHTML = "next is <b>" + _count + "</b>";
                }
            }, false);
        };

        _start.addEventListener('click', function (e) {
            var fieldSet = _fieldSet,
                field    = doc.getElementById('field'),
                fieldLen = Math.sqrt(fieldSet),
                cells    = [],
                tr       = null,
                table    = doc.createElement('table'),
                oldField = doc.getElementById('old'),
                i = 0;

            //init
            if (oldField) {
                field.removeChild(oldField);
                _msgBox.innerHTML = "";
                _count = 1;
                _isComplete = false;
            }

            table.id = "old";
            _start.value = "reset";
            _stime = Date.now();
            _timer = setInterval(timerAnim, 10);

            for (i = 0; i < fieldSet; i++) {
                cells[i] = new Cell(i + 1, table);
            }

            cells.shuffle();

            for (i = 0; i < fieldSet; i++) {
                if (i % fieldLen === 0) {
                    tr = doc.createElement('tr');
                    table.appendChild(tr);
                }
                tr.appendChild(cells[i].elm);
            }
            field.appendChild(table);
        }, false);
    };

    // run
    doc.addEventListener('DOMContentLoaded', touchNumber, false);

}(window, document, setInterval));
	<html>
	<head>
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<style type="text/css">
	#field td{
	width:100px;
	height:100px;
	border:1px solid #333;
	text-align:center;
	}

	#msg{
	color:red;
	}
	</style>
	<script type="text/javascript" src="touch.js"></script>
	</head>
	<body>
	<h1>touch the Number</h1><br />
	<input type="button" value="start" id="start" />
	<div id="field"></div><br />
	<span id="msg"></span><br />
	<span id="result"></span>
	</body>
	</html>
	/global window, document, setInterval, clearInterval /
	(function (win, doc, setInterval) {
	Array.prototype.shuffle = function () {
	var i = this.length, j, t;
	while (i) {
	j = Math.floor(Math.random() * i);
	t = this[--i];
	this[i] = this[j];
	this[j] = t;
	}
	return this;
	};

	var touchNumber = function () {
	var _start = doc.getElementById('start'),
	_msgBox = doc.getElementById('msg'),
	_count = 1,
	_isComplete = false,
	_borderTime = 25, //bad or good ?
	_fieldSet = 25, //square
	_stime = null,
	_timer = null;

	function timerAnim() {
	var now = Date.now(),
	stime = _stime;
	doc.getElementById('result').innerHTML = (now - stime) / 1000;
	}

	function completeAnim(table) {
	var resultField = doc.getElementById('result'),
	score = resultField.innerHTML,
	borderTime = _borderTime,
	allCell = doc.getElementsByTagName('td'),
	cells = null,
	image = (+score < borderTime) ? "url(img/good.jpg)" : "url(img/bad.jpg)";

	clearInterval(_timer);
	resultField.innerHTML = score + "s";
	cells = Array.prototype.slice.call(allCell);
	cells.forEach(function (cell, index) {
	cell.style.backgroundColor = null;
	cell.style.border = "0px";
	cell.innerHTML = "";
	});

	table.style.backgroundImage = image;
	table.style.backgroundRepeat = "no-repeat";
	}

	var Cell = function (num, field) {
	var elm = doc.createElement('td'),
	msgBox = _msgBox;

	this.elm = elm;
	this.num = num;
	this.field = field;

	elm.innerHTML = num;
	elm.addEventListener('click', function (evt) {
	if (num === _count && !_isComplete) {
	if (_count === _fieldSet) {
	msgBox.innerHTML = "complete!!";
	_isComplete = true;
	this.style.backgroundColor = "#333";
	completeAnim(field);
	} else {
	_count++;
	msgBox.innerHTML = "";
	this.style.backgroundColor = "#333";
	}
	} else if (!_isComplete) {
	msgBox.innerHTML = "next is <b>" + _count + "</b>";
	}
	}, false);
	};

	_start.addEventListener('click', function (e) {
	var fieldSet = _fieldSet,
	field = doc.getElementById('field'),
	fieldLen = Math.sqrt(fieldSet),
	cells = [],
	tr = null,
	table = doc.createElement('table'),
	oldField = doc.getElementById('old'),
	i = 0;

	//init
	if (oldField) {
	field.removeChild(oldField);
	_msgBox.innerHTML = "";
	_count = 1;
	_isComplete = false;
	}

	table.id = "old";
	_start.value = "reset";
	_stime = Date.now();
	_timer = setInterval(timerAnim, 10);

	for (i = 0; i < fieldSet; i++) {
	cells[i] = new Cell(i + 1, table);
	}

	cells.shuffle();

	for (i = 0; i < fieldSet; i++) {
	if (i % fieldLen === 0) {
	tr = doc.createElement('tr');
	table.appendChild(tr);
	}
	tr.appendChild(cells[i].elm);
	}
	field.appendChild(table);
	}, false);
	};

	// run
	doc.addEventListener('DOMContentLoaded', touchNumber, false);

	}(window, document, setInterval));