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,
  binary: function(i){
    return (i).toString(2);
  },
  init: function(){
    this.empty = 1<<30;
    this.block = 3;
    this.board = this.empty;
    this.position = 32;
    this.offset = -5;
    return this;
  },
  render: function(board){
    var txt = '';
    var b = this.binary(board);
    for (var i=1; i<31;i++){
      txt += (b[i]=='1'?'#':'.');
      if (i%5==0) txt += '\n';
    }
    return txt;
  },
  merge: function(board, block){
    return board | block ;
  },
  play: function(){
    this.position += this.offset;
    var result = this.merge(this.board,this.block << this.position);
    document.getElementById('game').innerHTML = this.render(result);
    return this.render(result);
  }
};
onkeydown = function(){tetris.play()};
</script>
<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
<script>/* 19:22 */
test('warmup', function(){
  ok(true,'ok');
  equal(true,true,'equal');
});
test('Render', function(){
  var t = tetris.init();
  equal(t.empty,1<<30,'init emtpy');
  equal(t.binary(t.empty), '1000000000000000000000000000000', 'to binary');
  equal(t.render(t.empty),pre(0),'render');
});
test('Merge', function(){
  var t = tetris.init();
  var myboard = t.merge(t.board, t.block);
  equal(t.render(myboard),pre(1),'merge, block + board');
});
test('Game', function(){
  var t = tetris.init();
  equal(t.play(),pre(2),'merge, block + board');
});
function pre(i){
  return document.querySelectorAll('.test')[i].innerHTML
}
</script>
<ol id="qunit-tests"></ol>
<pre class='test'>.....
.....
.....
.....
.....
.....
</pre>
<pre class='test'>.....
.....
.....
.....
.....
...##
</pre>
<pre class='test'>.##..
.....
.....
.....
.....
.....
</pre>
<style>
*{font:12px monospace;}
pre{margin:0;border:1px solid grey;display:inline-block;}
th{text-align:left;}
.passed{color:green;font-weight:bold;}
.failed{color:red;font-weight:bold;}
a{display:none}
</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,
	binary: function(i){
	return (i).toString(2);
	},
	init: function(){
	this.empty = 1<<30;
	this.block = 3;
	this.board = this.empty;
	this.position = 32;
	this.offset = -5;
	return this;
	},
	render: function(board){
	var txt = '';
	var b = this.binary(board);
	for (var i=1; i<31;i++){
	txt += (b[i]=='1'?'#':'.');
	if (i%5==0) txt += '\n';
	}
	return txt;
	},
	merge: function(board, block){
	return board \| block ;
	},
	play: function(){
	this.position += this.offset;
	var result = this.merge(this.board,this.block << this.position);
	document.getElementById('game').innerHTML = this.render(result);
	return this.render(result);
	}
	};
	onkeydown = function(){tetris.play()};
	</script>
	<script src="http://code.jquery.com/qunit/git/qunit.js"></script>
	<script>/* 19:22 */
	test('warmup', function(){
	ok(true,'ok');
	equal(true,true,'equal');
	});
	test('Render', function(){
	var t = tetris.init();
	equal(t.empty,1<<30,'init emtpy');
	equal(t.binary(t.empty), '1000000000000000000000000000000', 'to binary');
	equal(t.render(t.empty),pre(0),'render');
	});
	test('Merge', function(){
	var t = tetris.init();
	var myboard = t.merge(t.board, t.block);
	equal(t.render(myboard),pre(1),'merge, block + board');
	});
	test('Game', function(){
	var t = tetris.init();
	equal(t.play(),pre(2),'merge, block + board');
	});
	function pre(i){
	return document.querySelectorAll('.test')[i].innerHTML
	}
	</script>
	<ol id="qunit-tests"></ol>
	<pre class='test'>.....
	.....
	.....
	.....
	.....
	.....
	</pre>
	<pre class='test'>.....
	.....
	.....
	.....
	.....
	...##
	</pre>
	<pre class='test'>.##..
	.....
	.....
	.....
	.....
	.....
	</pre>
	<style>
	*{font:12px monospace;}
	pre{margin:0;border:1px solid grey;display:inline-block;}
	th{text-align:left;}
	.passed{color:green;font-weight:bold;}
	.failed{color:red;font-weight:bold;}
	a{display:none}
	</style></body></html>