philippeantoine/tetris.html

## tetris.html
<!doctype html><html>
<head><meta charset="UTF-8"><title>Tetris</title></head>
<body>
<pre id='game'></pre>
<script>
var tetris = {
	empty:0,board:0,block:0,position:0,offset:0,
	init: function(){
		this.empty = 1<<30;
		this.board = this.empty;
		this.block = 3;
		this.position = 32;
		this.offset = -5;
		return this;
	},
	binary: function(i){
		return i.toString(2);
	},
	render: function(board){
		var result = '';
		var binary = this.binary(board);
		for (var i = 1; i < binary.length; i++) {
			if (binary[i] === '0'){
				result += '.';
			} else {
				result += '#';
			}
			if (i%5==0){
				result +='\n';
			}
		};
		return result;
	},
	merge: function(){
		return this.board | this.block << this.position;
	},
	play: function(){
		var out = '';
		if (this.position + this.offset < 0){
			this.board = this.merge();
			out = this.render(this.board);
			this.block = new Date%2?1:3;
			this.position = 32;
			if (this.board.toString(32).indexOf('v')>0){
				out = 'WIN';
			}
		} else {
			this.position += this.offset;
			out = this.render(this.merge());
		}
		return out;
	},
	key: function(e){
		switch (e.keyCode){
			case 37: tetris.offset =  1; break; //left
			case 39: tetris.offset = -1; break; //right
			case 40: tetris.offset = -5; break; //down
		}
		document.getElementById('game').innerHTML = tetris.play();
	}
}
onkeydown = tetris.key;
</script>

<ol id="qunit-tests"></ol>
<pre class='test'>.....
.....
.....
.....
.....
.....
</pre><pre class='test'>.....
.....
.....
.....
.....
...##
</pre><pre class='test'>.##..
.....
.....
.....
.....
.....
</pre><pre class='test'>.....
.....
.....
.....
.....
#####
</pre>
<script src="qunit.js"></script>
<script>
function grid(i){return document.querySelectorAll('.test')[i].innerHTML;}

test('init', function(){
  var t = tetris.init();
  equal(t.empty,1<<30);
  equal(t.binary(t.empty),"1000000000000000000000000000000");

});

test('render', function(){
  var t = tetris.init();
  equal(t.render(t.empty),grid(0));
});

test('merge', function(){
  var t = tetris.init();
  equal(t.render(t.merge()),grid(1));
});

test('play', function(){
  var t = tetris.init();
  equal(t.play(),grid(2));
});

test('bottom', function(){
  var t = tetris.init();
  t.position =0;
  equal(t.play(),grid(1));
});

test('win', function(){
  var t = tetris.init();
  t.board=1073741855;
  t.position=0;
  equal(t.play(),'WIN');
});
</script>
<style>pre{border:1px solid;display:inline-block;padding:10px;}
.passed{color:green;font-weight:bold;}th{text-align:left;}
.failed{color:red;font-weight:bold;}a{display:none}
*{font:18px monospace;}body{padding-left:300px;}
#game{margin-left:-200px;float:left;}</style></body></html>
	<!doctype html><html>
	<head><meta charset="UTF-8"><title>Tetris</title></head>
	<body>
	<pre id='game'></pre>
	<script>
	var tetris = {
	empty:0,board:0,block:0,position:0,offset:0,
	init: function(){
	this.empty = 1<<30;
	this.board = this.empty;
	this.block = 3;
	this.position = 32;
	this.offset = -5;
	return this;
	},
	binary: function(i){
	return i.toString(2);
	},
	render: function(board){
	var result = '';
	var binary = this.binary(board);
	for (var i = 1; i < binary.length; i++) {
	if (binary[i] === '0'){
	result += '.';
	} else {
	result += '#';
	}
	if (i%5==0){
	result +='\n';
	}
	};
	return result;
	},
	merge: function(){
	return this.board \| this.block << this.position;
	},
	play: function(){
	var out = '';
	if (this.position + this.offset < 0){
	this.board = this.merge();
	out = this.render(this.board);
	this.block = new Date%2?1:3;
	this.position = 32;
	if (this.board.toString(32).indexOf('v')>0){
	out = 'WIN';
	}
	} else {
	this.position += this.offset;
	out = this.render(this.merge());
	}
	return out;
	},
	key: function(e){
	switch (e.keyCode){
	case 37: tetris.offset = 1; break; //left
	case 39: tetris.offset = -1; break; //right
	case 40: tetris.offset = -5; break; //down
	}
	document.getElementById('game').innerHTML = tetris.play();
	}
	}
	onkeydown = tetris.key;
	</script>

	<ol id="qunit-tests"></ol>
	<pre class='test'>.....
	.....
	.....
	.....
	.....
	.....
	</pre><pre class='test'>.....
	.....
	.....
	.....
	.....
	...##
	</pre><pre class='test'>.##..
	.....
	.....
	.....
	.....
	.....
	</pre><pre class='test'>.....
	.....
	.....
	.....
	.....
	#####
	</pre>
	<script src="qunit.js"></script>
	<script>
	function grid(i){return document.querySelectorAll('.test')[i].innerHTML;}

	test('init', function(){
	var t = tetris.init();
	equal(t.empty,1<<30);
	equal(t.binary(t.empty),"1000000000000000000000000000000");

	});

	test('render', function(){
	var t = tetris.init();
	equal(t.render(t.empty),grid(0));
	});

	test('merge', function(){
	var t = tetris.init();
	equal(t.render(t.merge()),grid(1));
	});

	test('play', function(){
	var t = tetris.init();
	equal(t.play(),grid(2));
	});

	test('bottom', function(){
	var t = tetris.init();
	t.position =0;
	equal(t.play(),grid(1));
	});

	test('win', function(){
	var t = tetris.init();
	t.board=1073741855;
	t.position=0;
	equal(t.play(),'WIN');
	});
	</script>
	<style>pre{border:1px solid;display:inline-block;padding:10px;}
	.passed{color:green;font-weight:bold;}th{text-align:left;}
	.failed{color:red;font-weight:bold;}a{display:none}
	*{font:18px monospace;}body{padding-left:300px;}
	#game{margin-left:-200px;float:left;}</style></body></html>