nariakiiwatani/SimpleReversi.html

## SimpleReversi.html
<html lang="ja">
<head>
	<title>othello</title>
	<style type="text/css">
		.cell {
			margin: 0 -1px -1px 0;
			position: relative;
			display: inline-block;
			width:30px;
			height:30px;
			background:#00ee00;
			border: solid 1px black;
		}
		.cell div {
			position: absolute;
			width: 26px;
			height: 26px;
			left: 2px;
			top: 2px;
			border-radius: 13px;
		}
		.black {
			background: #000000;
		}
		.white {
			background: #ffffff;
		}
	</style>
</head>
<body>
	<div id="board"></div>
	<div id="message"></div>
	<script>
	(function() {
		var board_size = 8;
		var classNames = ["","black","white"];
		var cell_elem;
		var board_data;
		var turn;
		var computer = 2;
		var me = function(turn) { return turn; }
		var other = function(turn) { return 3-turn; }
		var initBoard = function() {
			cell_elem = [];
			board_data = [];
			var board = document.getElementById("board");
			for(var y = 0; y < board_size; ++y) {
				var line = [];
				var line_data = [];
				for(var x = 0; x < board_size; ++x) {
					var cell = document.createElement("div");
					cell.className = "cell";
					(function(x,y) {
						cell.addEventListener("click", () => {
							if(put(x,y,turn)) {
								if(!changeTurn()) {
									finishGame();
								}
								else {
									while(turn === computer && aiMove()) {
										if(!changeTurn()) {
											finishGame();
											break;
										}
									}
								}
								refreshBoard();
							}
						});
					})(x,y);
					var color = document.createElement("div");
					cell.appendChild(color);
					board.appendChild(cell);
					line.push(color);
					line_data.push(0);
				}
				cell_elem.push(line);
				board_data.push(line_data);
				board.appendChild(document.createElement("div"));
			}
		}
		var refreshBoard = function() {
			for(var y = 0; y < board_size; ++y) {
				for(var x = 0; x < board_size; ++x) {
					cell_elem[y][x].className = classNames[board_data[y][x]];
				}
			}
		}
		var initGame = function() {
			for(var y = 0; y < board_size; ++y) {
				for(var x = 0; x < board_size; ++x) {
					board_data[y][x] = 0;
				}
			}
			board_data[3][3] =
			board_data[4][4] = 2;
			board_data[3][4] =
			board_data[4][3] = 1;
			turn = 2;
			changeTurn();
		}
		var sanity = function(x,y) {
			return x >= 0 && x < board_size && y >= 0 && y < board_size;
		}
		var canPut = function(x,y,turn) {
			var ret = [];
			if(board_data[y][x] !== 0) return ret;
			for(var dy = -1; dy <= 1; ++dy) {
				for(var dx = -1; dx <= 1; ++dx) {
					if(dy === 0 && dx === 0) continue;
					var yy = y+dy;
					var xx = x+dx;
					var candidates = [];
					if(!sanity(xx,yy)) continue;
					while(board_data[yy][xx] === other(turn)) {
						candidates.push({"x":xx,"y":yy});
						yy += dy; xx += dx;
						if(!sanity(xx,yy) || board_data[yy][xx] === 0) {
							candidates = [];
							break;
						}
					}
					ret = ret.concat(candidates);
				}
			}
			if(ret.length) {
				ret.push({"x":x,"y":y});
			}
			return ret;
		}
		var put = function(x,y,turn) {
			var result = canPut(x,y,turn);
			if(result.length) {
				for(var i = 0; i < result.length; ++i) {
					board_data[result[i].y][result[i].x] = me(turn);
				}
				return true;
			}
			return false;
		}
		var changeTurn = function() {
			var canPutAny = function(turn) {
				for(var y = 0; y < board_size; ++y) {
					for(var x = 0; x < board_size; ++x) {
						if(canPut(x,y,turn).length) return true;
					}
				}
				return false;
			};
			var message = "";
			var finish = false;
			turn = other(turn);
			if(!canPutAny(turn)) {
				turn = other(turn);
				if(!canPutAny(turn)) {
					return false;
				}
			}
			message = (turn === 1 ? "black":"white") + "'s move";
			document.getElementById("message").innerHTML = message;
			return true;
		}
		var finishGame = function() {
			var count = [0,0,0];
			for(var y = 0; y < board_size; ++y) {
				for(var x = 0; x < board_size; ++x) {
					++count[board_data[y][x]];
				}
			}
			if(count[1] > count[2]) {
				message = "black won";
			}
			else if(count[1] < count[2]) {
				message = "white won";
			}
			else {
				message = "draw";
			}
			document.getElementById("message").innerHTML = message;
		}
		var aiMove = function() {
			for(var y = 0; y < board_size; ++y) {
				for(var x = 0; x < board_size; ++x) {
					if(put(x,y,turn)) {
						return true;
					}
				}
			}
			return false;
		}
		initBoard();
		initGame();
		refreshBoard();
	})();
	</script>
</body>
</html>
	<html lang="ja">
	<head>
	<title>othello</title>
	<style type="text/css">
	.cell {
	margin: 0 -1px -1px 0;
	position: relative;
	display: inline-block;
	width:30px;
	height:30px;
	background:#00ee00;
	border: solid 1px black;
	}
	.cell div {
	position: absolute;
	width: 26px;
	height: 26px;
	left: 2px;
	top: 2px;
	border-radius: 13px;
	}
	.black {
	background: #000000;
	}
	.white {
	background: #ffffff;
	}
	</style>
	</head>
	<body>
	<div id="board"></div>
	<div id="message"></div>
	<script>
	(function() {
	var board_size = 8;
	var classNames = ["","black","white"];
	var cell_elem;
	var board_data;
	var turn;
	var computer = 2;
	var me = function(turn) { return turn; }
	var other = function(turn) { return 3-turn; }
	var initBoard = function() {
	cell_elem = [];
	board_data = [];
	var board = document.getElementById("board");
	for(var y = 0; y < board_size; ++y) {
	var line = [];
	var line_data = [];
	for(var x = 0; x < board_size; ++x) {
	var cell = document.createElement("div");
	cell.className = "cell";
	(function(x,y) {
	cell.addEventListener("click", () => {
	if(put(x,y,turn)) {
	if(!changeTurn()) {
	finishGame();
	}
	else {
	while(turn === computer && aiMove()) {
	if(!changeTurn()) {
	finishGame();
	break;
	}
	}
	}
	refreshBoard();
	}
	});
	})(x,y);
	var color = document.createElement("div");
	cell.appendChild(color);
	board.appendChild(cell);
	line.push(color);
	line_data.push(0);
	}
	cell_elem.push(line);
	board_data.push(line_data);
	board.appendChild(document.createElement("div"));
	}
	}
	var refreshBoard = function() {
	for(var y = 0; y < board_size; ++y) {
	for(var x = 0; x < board_size; ++x) {
	cell_elem[y][x].className = classNames[board_data[y][x]];
	}
	}
	}
	var initGame = function() {
	for(var y = 0; y < board_size; ++y) {
	for(var x = 0; x < board_size; ++x) {
	board_data[y][x] = 0;
	}
	}
	board_data[3][3] =
	board_data[4][4] = 2;
	board_data[3][4] =
	board_data[4][3] = 1;
	turn = 2;
	changeTurn();
	}
	var sanity = function(x,y) {
	return x >= 0 && x < board_size && y >= 0 && y < board_size;
	}
	var canPut = function(x,y,turn) {
	var ret = [];
	if(board_data[y][x] !== 0) return ret;
	for(var dy = -1; dy <= 1; ++dy) {
	for(var dx = -1; dx <= 1; ++dx) {
	if(dy === 0 && dx === 0) continue;
	var yy = y+dy;
	var xx = x+dx;
	var candidates = [];
	if(!sanity(xx,yy)) continue;
	while(board_data[yy][xx] === other(turn)) {
	candidates.push({"x":xx,"y":yy});
	yy += dy; xx += dx;
	if(!sanity(xx,yy) \|\| board_data[yy][xx] === 0) {
	candidates = [];
	break;
	}
	}
	ret = ret.concat(candidates);
	}
	}
	if(ret.length) {
	ret.push({"x":x,"y":y});
	}
	return ret;
	}
	var put = function(x,y,turn) {
	var result = canPut(x,y,turn);
	if(result.length) {
	for(var i = 0; i < result.length; ++i) {
	board_data[result[i].y][result[i].x] = me(turn);
	}
	return true;
	}
	return false;
	}
	var changeTurn = function() {
	var canPutAny = function(turn) {
	for(var y = 0; y < board_size; ++y) {
	for(var x = 0; x < board_size; ++x) {
	if(canPut(x,y,turn).length) return true;
	}
	}
	return false;
	};
	var message = "";
	var finish = false;
	turn = other(turn);
	if(!canPutAny(turn)) {
	turn = other(turn);
	if(!canPutAny(turn)) {
	return false;
	}
	}
	message = (turn === 1 ? "black":"white") + "'s move";
	document.getElementById("message").innerHTML = message;
	return true;
	}
	var finishGame = function() {
	var count = [0,0,0];
	for(var y = 0; y < board_size; ++y) {
	for(var x = 0; x < board_size; ++x) {
	++count[board_data[y][x]];
	}
	}
	if(count[1] > count[2]) {
	message = "black won";
	}
	else if(count[1] < count[2]) {
	message = "white won";
	}
	else {
	message = "draw";
	}
	document.getElementById("message").innerHTML = message;
	}
	var aiMove = function() {
	for(var y = 0; y < board_size; ++y) {
	for(var x = 0; x < board_size; ++x) {
	if(put(x,y,turn)) {
	return true;
	}
	}
	}
	return false;
	}
	initBoard();
	initGame();
	refreshBoard();
	})();
	</script>
	</body>
	</html>