philippeantoine/pacman.html

## pacman.html
<!doctype html><html><head><meta charset=UTF-8><title>pcmn</title>
<script src="http://code.jquery.com/qunit/git/qunit.js"></script></head><body>


<pre id='game'></pre>

<script>


String.prototype.replaceAt=function(index, char) {
  return this.substr(0, index) + char + this.substr(index+char.length);
}


var game = {
  debug:false,
  board:0,
  pac:{},
  init: function(){
    this.board = ['   ','  •','   '];
    this.pac.x =0;
    this.pac.y =0;
    return this;
  },
  showpac: function(){
    var line = this.board[this.pac.y];
    this.board[this.pac.y]=line.replaceAt(this.pac.x,'☺');
    this.render();
    return this.board;
  },
  cleanpac: function(){
    for(var i = 0; i < this.board.length; i++){
      var line =  this.board[i];
      this.board[i] = line.replace('☺',' ');
    }
  },
  render: function(){
    var out = '';
    for(var i = 0; i < this.board.length; i++) {
      var line = this.board[i];
      for (var j = 0; j < line.length; j++) {
        out += line[j];
      }
      out += '\n';
    }
    document.getElementById('game').innerHTML = out;
    return out;
  },
  down: function(){
    this.pac.y++;
    return this.pac.y;
  },
  right: function(){
    this.pac.x++;
    return this.pac.x;
  },
  up: function(){
    this.pac.y--;
    return this.pac.y;
  },
  left: function(){
    this.pac.x--;
    return this.pac.x;
  },
  key: function(e){
    //
    switch (e.keyCode){
      case 40: game.down(); break;
      case 39: game.right();break;
      case 38: game.up();break;
      case 37: game.left();break;
    }
    game.cleanpac();
    game.render();
    game.showpac();
  },
  log: function(){if(this.debug)console.dir(this);}
};

onkeydown= game.key;

</script>

<script>

test('warmup', function(){
  equal(true,true,'equal');
});

test('show board', function(){
  var g = game.init();
  deepEqual(g.board,['   ','  •','   '],'board');
  var expected = document.querySelectorAll('pre')[1].innerHTML;
  g.render();
  var result = document.getElementById('game').innerHTML;
  deepEqual(result,expected,'display result');
});


test('show pacman', function(){
  var g = game.init();
  equal(g.pac.x,0,'pacman is at x=0');
  equal(g.pac.y,0,'pacman is at y=0');
  g.showpac();
  var expected = document.querySelectorAll('pre')[2].innerHTML;
  var result = document.getElementById('game').innerHTML;
  deepEqual(result,expected,'display pacman');
});

test('move pacman', function(){
  var g = game.init();
  g.down();
  equal(g.pac.y,1,'pacman is at y=1');
  g.cleanpac();
  g.render();
  g.showpac();
  var expected = document.querySelectorAll('pre')[3].innerHTML;
  var result = document.getElementById('game').innerHTML;
  deepEqual(result,expected,'display pacman one line under');

  g.right();
  equal(g.pac.x,1,'pacman is at x=1');
  g.cleanpac();
  g.render();
  g.showpac();
  var expected = document.querySelectorAll('pre')[4].innerHTML;
  var result = document.getElementById('game').innerHTML;
  deepEqual(result,expected,'display pacman one step on the right');


  g.up();
  equal(g.pac.y,0,'pacman is at y=0');
  g.cleanpac();
  g.render();
  g.showpac();
  var expected = document.querySelectorAll('pre')[5].innerHTML;
  var result = document.getElementById('game').innerHTML;
  deepEqual(result,expected,'display pacman one step up');


  g.left();
  equal(g.pac.x,0,'pacman is at x=0');
  g.cleanpac();
  g.render();
  g.showpac();
  var expected = document.querySelectorAll('pre')[2].innerHTML;
  var result = document.getElementById('game').innerHTML;
  deepEqual(result,expected,'display pacman at the initial place');

});


</script>

<ol id="qunit-tests"></ol>

<pre>
  •

</pre>
<pre>☺
  •

</pre>
<pre>
☺ •

</pre>
<pre>
 ☺•

</pre>
<pre> ☺
  •

</pre>
<style>*{font:12px monospace}th{text-align:left}
pre{margin:0;border:1px solid grey;display:inline-block;font:20px monospace}a{display:none}
.passed{color:green;font-weight:bold}.failed{color:red;font-weight:bold}
</style></body></html><!--<script src="http://code.jquery.com/qunit/git/qunit.js"></script>-->
	<!doctype html><html><head><meta charset=UTF-8><title>pcmn</title>
	<script src="http://code.jquery.com/qunit/git/qunit.js"></script></head><body>


	<pre id='game'></pre>

	<script>


	String.prototype.replaceAt=function(index, char) {
	return this.substr(0, index) + char + this.substr(index+char.length);
	}



	var game = {
	debug:false,
	board:0,
	pac:{},
	init: function(){
	this.board = [' ',' •',' '];
	this.pac.x =0;
	this.pac.y =0;
	return this;
	},
	showpac: function(){
	var line = this.board[this.pac.y];
	this.board[this.pac.y]=line.replaceAt(this.pac.x,'☺');
	this.render();
	return this.board;
	},
	cleanpac: function(){
	for(var i = 0; i < this.board.length; i++){
	var line = this.board[i];
	this.board[i] = line.replace('☺',' ');
	}
	},
	render: function(){
	var out = '';
	for(var i = 0; i < this.board.length; i++) {
	var line = this.board[i];
	for (var j = 0; j < line.length; j++) {
	out += line[j];
	}
	out += '\n';
	}
	document.getElementById('game').innerHTML = out;
	return out;
	},
	down: function(){
	this.pac.y++;
	return this.pac.y;
	},
	right: function(){
	this.pac.x++;
	return this.pac.x;
	},
	up: function(){
	this.pac.y--;
	return this.pac.y;
	},
	left: function(){
	this.pac.x--;
	return this.pac.x;
	},
	key: function(e){
	//
	switch (e.keyCode){
	case 40: game.down(); break;
	case 39: game.right();break;
	case 38: game.up();break;
	case 37: game.left();break;
	}
	game.cleanpac();
	game.render();
	game.showpac();
	},
	log: function(){if(this.debug)console.dir(this);}
	};

	onkeydown= game.key;

	</script>

	<script>

	test('warmup', function(){
	equal(true,true,'equal');
	});

	test('show board', function(){
	var g = game.init();
	deepEqual(g.board,[' ',' •',' '],'board');
	var expected = document.querySelectorAll('pre')[1].innerHTML;
	g.render();
	var result = document.getElementById('game').innerHTML;
	deepEqual(result,expected,'display result');
	});


	test('show pacman', function(){
	var g = game.init();
	equal(g.pac.x,0,'pacman is at x=0');
	equal(g.pac.y,0,'pacman is at y=0');
	g.showpac();
	var expected = document.querySelectorAll('pre')[2].innerHTML;
	var result = document.getElementById('game').innerHTML;
	deepEqual(result,expected,'display pacman');
	});

	test('move pacman', function(){
	var g = game.init();
	g.down();
	equal(g.pac.y,1,'pacman is at y=1');
	g.cleanpac();
	g.render();
	g.showpac();
	var expected = document.querySelectorAll('pre')[3].innerHTML;
	var result = document.getElementById('game').innerHTML;
	deepEqual(result,expected,'display pacman one line under');

	g.right();
	equal(g.pac.x,1,'pacman is at x=1');
	g.cleanpac();
	g.render();
	g.showpac();
	var expected = document.querySelectorAll('pre')[4].innerHTML;
	var result = document.getElementById('game').innerHTML;
	deepEqual(result,expected,'display pacman one step on the right');


	g.up();
	equal(g.pac.y,0,'pacman is at y=0');
	g.cleanpac();
	g.render();
	g.showpac();
	var expected = document.querySelectorAll('pre')[5].innerHTML;
	var result = document.getElementById('game').innerHTML;
	deepEqual(result,expected,'display pacman one step up');


	g.left();
	equal(g.pac.x,0,'pacman is at x=0');
	g.cleanpac();
	g.render();
	g.showpac();
	var expected = document.querySelectorAll('pre')[2].innerHTML;
	var result = document.getElementById('game').innerHTML;
	deepEqual(result,expected,'display pacman at the initial place');

	});


	</script>

	<ol id="qunit-tests"></ol>

	<pre>
	•

	</pre>
	<pre>☺
	•

	</pre>
	<pre>
	☺ •

	</pre>
	<pre>
	☺•

	</pre>
	<pre> ☺
	•

	</pre>
	<style>*{font:12px monospace}th{text-align:left}
	pre{margin:0;border:1px solid grey;display:inline-block;font:20px monospace}a{display:none}
	.passed{color:green;font-weight:bold}.failed{color:red;font-weight:bold}
	</style></body></html><!--<script src="http://code.jquery.com/qunit/git/qunit.js"></script>-->