plunkerでオセロビュアー

# 概要
plunkerでオセロビュアー、作ってみた。

# 参考にしたページ

https://qiita.com/y-tetsu/items/2a32a157567655fa12ac

# 写真

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/18104/faa50c5d-8a9a-87d3-96c2-fceb9635a3b3.png)


# サンプルコード

```

var coma = 'http://camo.qiitausercontent.com/7873b55118f9bac84a20de35c02770aac1d1f02a/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f31383130342f33656230653537342d643430362d326537342d663238312d3561663132396130353834362e706e67';
var flg = 0;
var game = new Game();
game.fps(5);
game.preload([coma]);
game.start();
var ban = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 2, 1, 1, 1, 1, 1, 1, 2, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var field = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var fu = document.getElementById('fu');
var kifu = [];
var n = 0;

function check(put, d) {
		var x = put % 8; 
		var y = Math.floor(put / 8);
		var res = 0;
		if (x == 0 && (d == -9 || d == -1 || d ==  7)) 
			res = 1;
		if (x == 7 && (d == -7 || d ==  1 || d ==  9)) 
			res = 1;
		if (y == 0 && (d == -9 || d == -8 || d == -7)) 
			res = 1;
		if (y == 7 && (d ==  7 || d ==  8 || d ==  9)) 
			res = 1;
		return res;
}
function oku(put, iro) {
		var res = 0;
		var turn = 0;
		if (iro == 0) turn = 2;
		var dir = new Array(-9, -8, -7, -1, 1, 7, 8, 9);
		var tugi;
		var i;
		var count;
		if (ban[put] == 1)
		{
			for (i = 0; i < 8; i++)
			{
				count = 0;
				tugi = put;
				do
				{
					if (check(tugi, dir[i]) == 1) 
						break;
					count++;
					tugi += dir[i];
				} 
				while (ban[tugi] == turn);
				if ((count > 1) && (ban[tugi] == iro))
				{
					res = -1;
					tugi = put;
					do
					{
						ban[tugi] = iro;
						tugi += dir[i];
					}
					while (ban[tugi] == turn);
				}
			}
		}
		return res;
}
function main() {
		setTimeout(function() {
			var put;
			var res;
			var end = -1;
			if (flg > 1) 
			{
				put = kifu[n];
				n++;
				res = oku(put, 2);
				for (var i = 0; i < 64; i++)
				{
					field[i].frame(ban[i]);
					if (ban[i] == 1) 
						end = 0;
				}
				if (end == -1) 
					alert("game over");
				put = kifu[n];
				n++;
				res = oku(put, 0);
				end = -1;
				for (var i = 0; i < 64; i++)
				{
					field[i].frame(ban[i]);
					if (ban[i] == 1) 
						end = 0;
				}
				if (end == -1) 
					alert("game over");
				else
					main();
			}
		}, 1000);
}
function go() {
	for (var i = 0; i < fu.value.length; i++)
	{
		var d = 0;
		switch(fu.value[i])
		{
			case 'A':
			case 'a':
				d = 0;
			break;
			case 'B':
			case 'b':
				d = 1;
			break;
			case 'C':
			case 'c':
				d = 2;
			break;
			case 'D':
			case 'd':
				d = 3;
			break;
			case 'E':
			case 'e':
				d = 4;
			break;
			case 'F':
			case 'f':
				d = 5;
			break;
			case 'G':
			case 'g':
				d = 6;
			break;
			case 'H':
			case 'h':
				d = 7;
			break;
		}
		i++;
		var e = Number(fu.value[i]);
		d = e * 8 + d - 8;
		kifu.push(d);
	}
	//alert(kifu);
	var aLabel = new Label('先手：白 ', 50, 330);
	aLabel.size(20);
	for (var i = 0; i < 64; i++)
	{
		field[i] = new Sprite(40, 40, coma, 4, 1);
		field[i].frame(ban[i]);
		field[i].x((i % 8) * 40);
		field[i].y(Math.floor(i / 8) * 40);
	}
	flg = 2;
	main();
}




```

# 成果物

https://embed.plnkr.co/plunk/1u4XqSzuo7o5h72l


以上。