makotom/bingo.html

## bingo.html
<!doctype html>
<meta charset="UTF-8">
<title>Numbers</title>

<style>
#hitbox{
	font-size: 400px;
	text-align: center;
}
#stackbox{
	font-size: 24px;
}
</style>

<script>
window.addEventListener("DOMContentLoaded", function(){
	"use strict";

	var RANGE = 75, WAIT = 5, EXCLUDE = [],

	pool = [], stack = [],

	hitBox = document.getElementById("hitbox"),
	stackBox = document.getElementById("stackbox"),

	getNextHit = function(){
		var hit = pool.splice(Math.floor(Math.random() * pool.length), 1);

		HTMLDivElement.prototype.updateDOMText = function(strToWrite){
			while(this.firstChild){
				this.removeChild(this.firstChild);
			}
			this.appendChild(document.createTextNode(strToWrite));
		};

		stackBox.updateDOMText(stack.join(", "));

		(function(){
			var i = 0, dots = "";

			for(i = 0; i < WAIT; i += 1){
				setTimeout(function(){
					hitBox.updateDOMText((dots += "."));
				}, i * 1000);
			}

			setTimeout(function(){
				hitBox.updateDOMText(hit);

				if(pool.length > 0){
					document.documentElement.addEventListener("click", getNextHit);
				}
			}, i * 1000);
		})();

		stack.unshift(hit);
		document.documentElement.removeEventListener("click", getNextHit);

		return;
	};

	(function(){
		var i = 0;

		for(i = 0; i < RANGE; i += 1){
			if(EXCLUDE.indexOf(i + 1) === -1){
				pool.push((i + 1).toString());
			}
		}
	})();

	document.documentElement.addEventListener("click", getNextHit);

	return;
}, false);
</script>

<div id="hitbox"></div>
<div id="stackbox"></div>
	<!doctype html>
	<meta charset="UTF-8">
	<title>Numbers</title>

	<style>
	#hitbox{
	font-size: 400px;
	text-align: center;
	}
	#stackbox{
	font-size: 24px;
	}
	</style>

	<script>
	window.addEventListener("DOMContentLoaded", function(){
	"use strict";

	var RANGE = 75, WAIT = 5, EXCLUDE = [],

	pool = [], stack = [],

	hitBox = document.getElementById("hitbox"),
	stackBox = document.getElementById("stackbox"),

	getNextHit = function(){
	var hit = pool.splice(Math.floor(Math.random() * pool.length), 1);

	HTMLDivElement.prototype.updateDOMText = function(strToWrite){
	while(this.firstChild){
	this.removeChild(this.firstChild);
	}
	this.appendChild(document.createTextNode(strToWrite));
	};

	stackBox.updateDOMText(stack.join(", "));

	(function(){
	var i = 0, dots = "";

	for(i = 0; i < WAIT; i += 1){
	setTimeout(function(){
	hitBox.updateDOMText((dots += "."));
	}, i * 1000);
	}

	setTimeout(function(){
	hitBox.updateDOMText(hit);

	if(pool.length > 0){
	document.documentElement.addEventListener("click", getNextHit);
	}
	}, i * 1000);
	})();

	stack.unshift(hit);
	document.documentElement.removeEventListener("click", getNextHit);

	return;
	};

	(function(){
	var i = 0;

	for(i = 0; i < RANGE; i += 1){
	if(EXCLUDE.indexOf(i + 1) === -1){
	pool.push((i + 1).toString());
	}
	}
	})();

	document.documentElement.addEventListener("click", getNextHit);

	return;
	}, false);
	</script>

	<div id="hitbox"></div>
	<div id="stackbox"></div>