<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
       <meta http-equiv="content-type" content="text/html;charset=utf-8">
       <meta http-equiv="content-script-type" content="text/javascript">
       <meta http-equiv="content-style-type" content="text/css">
       <title>ラングトンの蟻</title>
<style type="text/css">
#canvas{
       border: 1px solid #999;
       width: 300px;
       height: 300px;
}
#canvas div{
       width: 3px;
       height: 3px;
       float: left;
}
</style>
<script>
var earth = [];
var WORLD_SIZE = 100;
var lang_ant;

function Ant(){}
Ant.prototype = {
	age : 0,
	ageDisplay : undefined,
	id : undefined,
	speed: 200,
	direction: [0,-1],//向き。x軸 y軸。最初は上に動く
	position: [60,40],//初期位置
	world: [],
	start: function(){
		var self = this;
		this.id = setInterval(function(){self.move()}, 1000/this.speed);
	},
	move: function(){
		this.ageDisplay.innerHTML = ++this.age;
		this.moveNextCell();
		var cell = this.getCellInfo();
		var color = cell.getAndToggleColor();
		this.setNextDirection(color);
	},
	moveNextCell: function(){
		this.position[0] += this.direction[0];
		this.position[1] += this.direction[1];
		if(this.position[0] < 0 || this.position[1] < 0 ||
		   this.position[0] >= WORLD_SIZE || this.position[1] >= WORLD_SIZE){
			clearInterval(this.id);
			this.die();
		}
	},
	getCellInfo: function(){
		var idx = this.position[0] + this.position[1] * WORLD_SIZE;
		return this.world[idx];
	},
	setNextDirection: function(bool){//colorがfalse(白)なら右へ、true(黒)なら左へ転回
		if(bool){//黒
			var tmp = this.direction[0];
			this.direction[0] = this.direction[1];
			this.direction[1] = -tmp;
		}
		else{//白
			var tmp = this.direction[0];
			this.direction[0] = -this.direction[1];
			this.direction[1] = tmp;
		}
	},
	die: function(){
		alert('Langton\'s ant is dead.');
		throw true;
	}
};

function Cell(elm){
	this.elm = elm;
}
Cell.prototype = {
	elm: undefined,
	color: false, //colorは2値なのでbooleanで表す
	colorList: ['#FFF','#000'],
	getAndToggleColor: function(){
		this.color = !this.color;
		var i = this.color ? 1 : 0;
		this.elm.style.backgroundColor = this.colorList[i];
		return !this.color;
	}
}
window.onload = function(){
	var canvas = document.getElementById('canvas');
	var div = '<div></div>';
	var inner_canvas = "";
	for(var i=0; i< WORLD_SIZE*WORLD_SIZE; i++){
		inner_canvas += div;
	}
	canvas.innerHTML = inner_canvas;
	
	var cells = canvas.childNodes;
	for(var i=0; i<cells.length; i++){//世界の誕生
		earth[i] = new Cell(cells[i]);
	}
	lang_ant = new Ant();//蟻の誕生
	lang_ant.world = earth;//地球に降り立つ
	lang_ant.ageDisplay = document.getElementById('step');
	
	document.getElementById('run').disabled = false;
}
</script>
</head>
<body>
<p><input type="button" value="run" onclick="lang_ant.start();this.disabled=true;" id="run" disabled="disabled">　<span id="step"></span>
　<input type="button" value="stop &amp; refresh" onclick="location.reload();"></p>
<div id="canvas"></div>
