オセロのプログラムを初めて作ってみたのですがうまくいきません

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
オセロプログラムの添削をお願いします。
aiも作りたいのですがどのようにやればできますか
置く場所のアシスト機能も付けたいです。
###発生している問題・エラーメッセージ
どこでエラーが起きて表示できないのかわかりません。
###該当のソースコード

<html lang="ja"> <head> <meta charset="utf-8"> <title>othello</title> <script>



//盤面を生成（8×8)する処理
(function(){
  var Piece;
  var showboard=function(){
    var b=document.getElementById("board");
    while(b.firstChild){
      b.removeChild(b.firstChild);
    }
    for(var y=1;y<=8;y++){//番兵があるから1から
    for(var x=1;x<=8;x++){//番兵があるから1から
//32ピクセルずつ作っていく
    var c=Piece[board[x][y]].cloneNode(true);
    c.style.left=((x-1)*32)+"px";
    c.style.top=((y-1)*32)+"px";
    b.appendChild(c);
    if(board[x][y]==0){
      (function(){
        var t=x;
        var m=y;
      c.onclick=function(){
        if((Direction conversion)t,m,true){
      skip();
//手番交代
        Change=3-Change;
              }
            };
          })();
        }
      }
    }
  };

//スペースの確保する処理
  var board = [];
  onload=fanction(){
    Change=2;
    Piece=[document.getElementById("cell")];
    for(var i=0;i<10;i++){
        board[i]=[];
          for(var j=0;j<10;j++){
            board[i][j]=0;
          }
        }
//初期配置
        board[4][5]=1;//黒
        board[5][4]=1;//黒
        board[4][4]=2;//白
        board[5][5]=2;//白
        showboard();
      };
var Change;

var Direction conversion=function(x,y,Inside out){
//周囲8箇所が壁,自分の石,空白の場合以降の処理を行わない
for(var fx=-1;fx<=1;fx++){
for(var fy=-1;fy<=1;fy++){
if(dx==0&&dy==0){continue;}
var s=x+dx;
var z=y+dy;
var l=0;
//相手の石を挟んで自分の石がある場合、間の相手の石をひっくり返す
while(board[s][z]==3-Change)[l++;s+=dx;z+=dy;]
if(n>0&&board[s][z]==Change){
return+=l;
if(Inside out){
s=x+dx;
z=y+dy;
while(board[s][z]==3-Change){
board[s][z]=Change;
s+=dx;
z+=dy;
}
bord[x][y]=Change;
}
}
}
}
};
})();


    </script>
    </head>
    <body>
    <div style="display:none">
      <div id="cell" style="position:absolute;width:33px;height:33px;background-color:#000">
        <div style="position:relative;top1px;left:1px;width:31px;height:31px;background-color:#00ee00">
        </div>
      </div>
      <div id="white" style="position:absolute;width:33px;height:33px;background-color:#000">
        <img style="display:block;position:relative;top:1px;left:1px;width:31px;height:31px" src="white.png">
      </div>
      <div id="black" style="position:absolute;width:33px;height:33px;background-color:#000">
          <img style="display:block;position:relative;top:1px;left:1px;width:31px;height:31px" src="black.png">
      </div>
    </div>
  <div id ="board" style="position:absolute;width250px;height:250px;"></div>
    </body>
    </html>

kei344

2016/12/05 02:24

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

kei344

2016/12/05 06:18 編集

「------------------------------」ではなく「```」（バッククオート3つ）でお願いします。（追記：）コードブロックに入れるのはHTMLを含めコード全体でお願いします。

naomi3

2016/12/05 15:17

「return+=l;」は何をしたいのか教えてください。

hamesurodorige

2016/12/06 09:15

inside outがtrueだったらひっくり返すためのもの

行動規範の内容に同意します

回答2件

ベストアンサー

まずは、わかりやすく、そして若干の修正をしました。
これを参考に直してみてしてください。

JavaScript
1//盤面を生成（8×8)する処理
2(function()
3{
4	// 定数
5	var NO_STONE = 0; //なし
6	var KURO = 1; //黒
7	var SIRO = 2; //白
8	var KURO_SIRO = KURO + SIRO;
9
10	var moveInGame;
11
12	var cells;
13	var showBoard = function()
14	{
15		var boardElement = document.getElementById("board");
16
17		while (boardElement.firstChild)
18		{
19			boardElement.removeChild(boardElement.firstChild);
20		}
21
22		for (var y = 1; y <= 8; y++)
23		{//番兵があるから1から
24			for (var x = 1; x <= 8; x++)
25			{//番兵があるから1から
26				//32ピクセルずつ作っていく
27				var cloneOfCells = cells[board[x][y]].cloneNode(true);
28
29				cloneOfCells.style.left = ((x - 1) * 32) + "px";
30				cloneOfCells.style.top  = ((y - 1) * 32) + "px";
31				boardElement.appendChild(cloneOfCells);
32
33				if (board[x][y] == 0) {
34
35					(function(t, m)
36					{
37						cloneOfCells.onclick = function()
38						{
39							if (Direction_conversion(t, m, true))
40							{
41								skip();
42								//手番交代
43								moveInGame = KURO_SIRO - moveInGame;
44							}
45						};
46					})(x, y);
47				}
48			}
49		}
50	};
51
52
53	//スペースの確保する処理
54	var board = [];
55	onload = function()
56	{
57		moveInGame = SIRO;
58		cells = [document.getElementById("cell")];
59		for (var i = 0; i < 10 ; i++)
60		{
61			board[i] = [];
62			for (var j = 0; j < 10; j++)
63			{
64				board[i][j] = NO_STONE;
65			}
66		}
67		//初期配置
68		board[4][5] = KURO; //黒
69		board[5][4] = KURO; //黒
70		board[4][4] = SIRO; //白
71		board[5][5] = SIRO; //白
72
73		showBoard();
74	};
75
76
77	var skip = function()
78	{
79		var kuroScore = 0;
80		var siroScore = 0;
81		moveInGame = KURO_SIRO - moveInGame;
82		var message = ((turn == KURO) ? "黒" : "白");
83		//選択した箇所の周囲8箇所に石が置けるかどうか判別する
84		for (var x = 1; x <= 8; x++)
85		{
86			for (var y = 1; y <= 8; y++)
87			{
88				if (board[x][y] == 0 && Direction_conversion(x, y, false))
89				{
90					document.getElementById("message").innerHTML = message + "の番だよ＾＾";
91					showBoard();
92					return;
93				}
94			}
95		}
96		moveInGame = KURO_SIRO - moveInGame;
97		message += "pass<br>" + ((turn == KURO) ? "黒" : "白") + "の番だよ＾＾";
98
99		for (x = 1 ;x <= 8; x++)
100		{
101			for (y = 1; y <= 8; y++)
102			{
103				if (board[x][y] == NO_STONE && Direction_conversion(x, y, false))
104				{
105					document.getElementById("message").innerHTML = message;
106					showBoard();
107					return;
108				}
109				else
110				{
111					if (board[x][y] == KURO) { kuroScore++; }
112					if (board[x][y] == SIRO) { siroScore++; }
113				}
114			}
115		}
116
117		message = "黒:" + kuroScore + "白:" + siroScore + "<br>";
118
119		if (kuroScore == siroScore)
120		{
121			message += "同点かよ";
122		}
123		else
124		{
125			message += ((kuroScore > siroScore) ? "黒" : "白") + "の勝ちやで";
126		}
127
128		alert("終了");
129		document.getElementById("message").innerHTML = message;
130		showBoard();
131	};
132
133
134	var Direction_conversion = function(x, y, Inside_out)
135	{
136		//周囲8箇所が壁,自分の石,空白の場合以降の処理を行わない
137		for (var fx = -1; fx <= 1; fx++)
138		{
139			for (var fy = -1; fy <= 1; fy++)
140			{
141				if (fx == 0 && fy == 0)
142				{
143					continue;
144				}
145				var s = x + fx;
146				var z = y + fy;
147				var l = 0;
148				//相手の石を挟んで自分の石がある場合、間の相手の石をひっくり返す
149				while (board[s][z] == KURO_SIRO - moveInGame)
150				{
151					l++;
152					s += fx;
153					z += fy;
154					if (n > 0 && board[s][z] == moveInGame)
155					{
156						Inside_out = ! Inside_out;
157						if (Inside_out)
158						{
159							s = x + fx;
160							z = y + fy;
161							while (board[s][z] == KURO_SIRO - moveInGame)
162							{
163								board[s][z] = moveInGame;
164								s += fx;
165								z += fy;
166							}
167							board[x][y] = moveInGame;
168						}
169					}
170				}
171			}
172		}
173	};
174});