HTMLで将棋ソフトを作ろうとしています

HTMLで将棋ができるものを作りたいと考えていますが、以下のコードのどこに問題があるのかわかりません。
問題の箇所と、それを見つけるやり方をご教授いただきたいです。

HTML5
1<!DOCTYPE html>
2<html>
3<head><meta charset="UTF-8">
4	<title>shogi</title><script>
5	<!--
6	var canvas;
7	var ctx;
8	var nametbl = [
9	"玉","飛","角","金","銀","桂","香","歩",
10	"","竜","馬","","全","圭","杏","と",
11	];
12	var x1 = [0,1,1,1,0,-1,-1,-1,1,-1];
13	var y1 = [-1,-1,0,1,1,1,0,-1,-2,-2];
14	var movtbl = [
15		[1,1,1,1,1,1,1,1,0,0],		//0
16		[2,0,2,0,2,0,2,0,0,0],		//1
17		[0,2,0,2,0,2,0,2,0,0],		//2
18		[1,1,1,0,1,0,1,1,0,0],		//3
19		[1,1,0,1,0,1,0,1,0,0],		//4
20		[0,0,0,0,0,0,0,0,1,1],		//5
21		[2,0,0,0,0,0,0,0,0,0],		//6
22		[1,0,0,0,0,0,0,0,0,0],		//7
23		[0,0,0,0,0,0,0,0,0,0],		//8
24		[2,1,2,1,2,1,2,1,0,0],		//9
25		[1,2,1,2,1,2,1,2,0,0],		//10
26		[0,0,0,0,0,0,0,0,0,0],		//11
27		[1,1,1,0,1,0,1,1,0,0],		//12
28		[1,1,1,0,1,0,1,1,0,0],		//13
29		[1,1,1,0,1,0,1,1,0,0],		//14
30		[1,1,1,0,1,0,1,1,0,0],		//15
31	];
32	var setup = [
33	[7,7,7,7,7,7,7,7,7],
34	[-1,2,-1,-1,-1,-1,-1,1,-1]
35	[6,5,4,3,0,3,4,5,6]
36	];
37	var fontcolor = ["black","maroon"];
38	var boxcolor = ["LimeGreen","gray","blue","red"];
39	var fillcolor = ["LimeGreen","Khaki","white","LightPink"];
40	var psize = 32;
41	var board = [];
42	var bw = 19,bh = 11;
43	var ofsx = 5,ofsx = 1;
44	var turn = 0;
45	var startx = -1,starty = -1;
46	var username = ["ipad","iphon","android"]
47	var playtbl = ["先手", "後手"];
48
49	function piece() {
50		this.id = -1;
51		this.player = 0;
52		this.movable = false;
53	}
54
55	function init() {
56		canvas = document.getElementById("world");
57		canvas.width = 640;
58		canvas.height = 400;
59		ctx = canvas.getContext('2d');
60		ctx.font = "24px 'MS Pゴシック'";
61		user = window.navigator.userAgent.toLowerCase();
62		for(i=0; i<username.length; i++){
63			if(user.indexOf(username[i]) > 0)break;
64		}
65		if(i < username.length){
66			document.addEventListener("touchstart", touchstart);
67		}else{
68			document.addEventListener("mousedown", mousedown);
69		}
70		board = new Array(bh);
71		for(y=0; y<bh; y++){
72			board[y] = new Array(bw);
73			for(x=0; x<bw; x++){
74				board[y][x] = new piece();
75			}
76		}
77		for(y=0; y<3; y++){
78			for(x=0; x<9; x++){
79				board[ofsy+y+6][ofsy+x].id = setup[y][x];
80				board[ofsy+y+6][ofsy+x].player = 0;
81				board[ofsy+2-y][ofsy+8-x].id = setup[y][x];
82				board[ofsy+2-y][ofsy+8-x].player = 1;
83			}
84		}
85		redraw();
86	}
87
88	function touchstart(e) {
89		if (e.targetTouches.length == 1){
90			touch = e.targetTouches[0];
91			touchpiece(touch.pageX ,touch.pageY);
92		}
93	}
94
95	function mousedown(e) {
96		touchpiece(e.clientX ,e.clientY);
97	}
98
99	function touchpiece(tx,ty) {
100		cx = Math.floor((tx-8)/psize);
101		cy = Math.floor((ty-8)/psize);
102		if (isinside(cx,cy,0,0,bw,bh)==false)return;
103		if (startx == -1){
104			movestart(cx,cy);
105		}else{
106			moveend(cx,cy);
107			startx = -1;
108			redraw();
109		}
110	}
111
112	function movestart(cx,cy){
113		id = board[cy][cx].id;
114		if(id ==-1)return;
115		player = board[cy][cx].player;
116		if(player!=turn)return;
117		startx = cx;
118		starty = cy;
119		drawpiece(startx,starty,id,player,2);
120		if(isinside(startx,starty,ofsx,ofsy,9,9)==false){
121			for(x=ofsx; x<(ofsy+9); x++){
122				pawn = 0;
123				for(y=ofsy; y<(ofsy+9); y++){
124					if(id != 7)break;
125					id2 = board[y][x].id;
126					player2 = board[y][x].player;
127					if((player == player2)&&(id2 == 7)){
128						pawn++
129					}
130				}
131				if(pawn > 0)continue;
132				margin = [ 0,0,0,0,0,2,1,1 ];
133				flip = 1-(player*2);
134				y = ofsy+(player*8)+(margin[id]*flip);
135				while(isinside(x,y,ofsx,ofsy,9,9) == true){
136					if(board[y][x].id == -1){
137						drawpiece(x,y,-1,0,3);
138						board[y][x].movable = true;
139					}
140					y += flip;
141				}
142			return;
143		}
144		for(dir=0; dir<10; dir++){
145			x = startx;
146			y = starty;
147			flip = 1-(player*2);
148			while(movtbl[id][dir] > 0){
149				x += x1[dir];
150				y += y1[dir]*flip;
151				if(isinside(x,y,ofsx,ofsy,9,9) == false)break;
152				id2 = board[y][x].id;
153				player2 = board[y][x].player;
154				if((id2 != -1)&&(player == player2))break;
155				drawpiece(x,y,id2,player2,3);
156				board[y][x].movable = true;
157				if(id2 != -1)break;
158				if(movtbl[id][dir] == 1)break;
159			}
160		}
161	}
162
163	function moveend(endx,endy){
164		if(board[endy][endx].movable == false)return;
165		id = board[starty][startx].id;
166		player = board[starty][startx].player;
167		if(isinside(startx,starty,ofsx,ofsy,9,9) == true){
168			exist1 = isinside(startx,starty,ofsx,ofsy+6*player,9,3);
169			exist2 = isinside(endx,endy,ofsx,ofsy+6*player,9,3);
170			if((exist1 == true)||(exist2 == true)){
171				if((id < 8)&&(nametbl[id | 8] !="")){
172					if(confirm("成りますか？")){
173						board[starty][startx].id |= 8;
174					}
175				}
176			}
177		}
178		if(board[endy][endx].id != -1){
179			tx = (1-player)*(bw-3)+1;
180			ty = (1-player)*(bh-3)+1;
181			tx1 = (player*2)-1;
182			ty1 = (player*2)-1;
183			for(i=0; i<20; i++){
184				x = tx+(i % 3)*tx1;
185				y = ty+Math.floor(i/3)*ty1;
186				if(board[y][x].id == -1)break;
187			}
188			board[y][x].id = board[endy][endx].id & 7;
189			board[y][x].player = player;
190		}
191		board[endy][endx].id = board[starty][startx].id;
192		board[endy][endx].player = board[starty][startx].player;
193		board[starty][startx].id = -1;
194		turn ^= 1;
195	}
196
197	function drawpiece(x,y,id,player,color){
198		px = x*psize;
199		py = y*psize;
200		ctx.fillStyle = boxcolor[color];
201		ctx.fillRect(px, py, psize, psize);
202		ctx.fillStyle = fillcolor[color];
203		ctx.fillRect(px+1, py+1, psize-2, psize-2);
204		if(id == -1)return;
205		ctx.fiiStyle = fontcolor[(id >> 3)& 1];
206		if(player){
207			px = -px-psize;
208			py = -py-psize;
209			ctx.rotate(Math.PI);
210		}
211		ctx.fillText(nametbl[id],px+4,py+24,300);
212		if(player)ctx.rotate(Math.PI);
213	}
214
215	function isinside(x,y,ax,ay,w,h){
216		if((x<ax)||(x>=(ax+w))||(y<ay)||(y>=(ay+h)))return(false);
217		return(true);
218	}
219
220	function redraw(){
221		for(y=0; y<bh; y++){
222			for(x=0; x<bw; x++){
223				if(isinside(x,y,ofsx,ofsy,9,9))c=1; else c=0;
224				id = board[y][x].id;
225				player = board[y][x].player;
226				drawpiece(x,y,id,player,c);
227				board[y][x].movable = false;
228			}
229		}
230		ctx.fillStyle = fontcolor[0];
231		ctx.fillText(playtbl[turn] ,280 ,(1-turn)*318+26,300);
232	}
233	//-->
234	</script>
235</head>
236<body onload="init()">
237<canvas id="world"></canvas>
238</body>
239</html>

ockeghem

2017/10/19 21:45

どううまくいかないのでしょうか? エラーが表示されるのか、期待通り動かないのか? 期待する動作は何で、それに対してどうなるのか? 等追記ください。

m.ts10806

2017/10/19 21:45

このあたりを読んで質問内容を修正してください。ソース置いただけの丸投げとなっていますよ。→ https://teratail.com/help/question-tips#questionTips2-1 https://teratail.com/help/question-tips#questionTips3-4 https://teratail.com/help/question-tips#questionTips3-4-3 https://teratail.com/help/question-tips#questionTips3-5-2

umyu

2017/10/19 21:55 編集

どんな問題が発生してるのか分かりませんが、構文エラーとしては 1,init関数で使ってるofsyが未定義です。var ofsx = 5,ofsx = 1; ←ofsyが定義されてません 2,movestartの閉じ括弧 }　が１個足りません。ぱっと見でわかったのはそれぐらいです。デベロッパーツールでデバックしてみてくださいな。