JavaScriptで定義した駒をひっくり返したい。

JavaScriptで盤と駒を定義して、表示させることまではできたのですが、その後、駒を置く処理と駒を置いた際にひっくり返す処理がどのように記述したらよいかわからない状態です。お手数ですが、ご教授頂けないでしょうか？下記、コードとなります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>オセロ</title>
6	<link rel="stylesheet" type="text/css" href="style.css">
7</head>
8<body>
9<div id="wrapper">
10	
11	<div id="main"><!-- 左側 -->
12	  <table id="board"></table>
13	</div><!-- 左側終わり -->
14	
15	
16	<div id="detail"><!-- 右側 -->
17	  <div id="turn">
18	    <a id="now_turn">黒</a><a>の番です</a>
19	  </div>
20	  <div id="score">
21	    <div id="white">
22	      <a>白:</a><a id="white_score">10</a>
23	    </div>
24	    <div id="black">
25	      <a>黒:</a><a id="black_score">10</a>
26	    </div>
27	  </div>
28	  <div id="start">
29	    <button>start</button>
30	  </div>
31	  <div id="reset">
32	    <button>reset</button>
33	  </div>
34	</div><!-- 右側終わり -->
35
36</div>
37</body>
38<script type="text/javascript" src="index.js"></script>
39</html>

javascript
1// 初期設定
2// 駒を定義する
3var empty = 0;
4var black = 1;
5var white = 2;
6// 盤を初期化する
7function init() {
8	var board = [];
9	for (var i = 0; i < N; i ++)
10		for (var j = 0; j < N; i++) {
11			board[[i,j]] = empty;
12		} 
13	return board;
14}
15//table id を取得し、盤を定義する
16var b = document.getElementById('board');
17for (var i = 0; i < 8 ; i++) {
18	var tr = document.createElement('tr');
19	for (var j = 0; j < 8 ; j++) {
20		var td = document.createElement('td');
21		td.className = 'cell';
22		td.id = 'cell' + i + j;
23		var a = document.createElement('a');
24		a.className ='piece';
25		a.id = 'piece' + i + j;
26		tr.appendChild(td);
27		td.appendChild(a);
28		var piece = document.getElementById('piece' + i + j);
29		a.innerHTML = "○";
30	}
31	b.appendChild(tr);
32}
33
34function put(board,i,j,color){
35 //駒が置けるかチェックする
36  if(check(board,i,j,color) == false){
37    return false;
38  }
39  //駒をひっくり返す処理
40  board[i][j] = color;
41}
42
43function check(board,i,j,color){
44  //すでに石がある場合
45  if(board[i],[j

css
1#board {
2	table-layout: fixed;
3	width: 300px;
4	height: 300px;
5	border-collapse: collapse;
6	background-color:green;
7}
8
9#board td {
10	border: 2px solid;
11	text-align: center;
12}
13#main{
14	float: left;
15}
16#detail{
17	margin:10px;
18	width:200px;
19	float: left;
20}
21#detail:after{
22	clear: both;
23}
24#score > #white{
25  margin:10px;
26  padding:10px;
27  border: 5px solid;
28  border-color:black;
29}
30
31#score > #black{
32  margin:10px;
33  padding:10px;
34  border: 5px solid;
35  border-color:black;
36}

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

回答1件

上下左右斜め計8方向に対して同じ色が出るでサーチしてでなければ何もしない
出ればその間の駒をひっくり返すだけですよね？

投稿2017/05/08 03:25

yambejp

総合スコア114747

退会済みユーザー

2017/05/08 04:00

ご確認ありがとうございます。はい、オセロと全く同じ原理でつくりたいです。

yambejp

2017/05/08 04:06 編集

その通りのロジックでやるだけですけど、何かわからないところがありますか？考え方は２つ (1)テーブル(table)タグで要素をチェックする (2)バックグラウンドに仮想配列をつくっておき、チェックするパズルゲームは往々にして後者の方がやりやすいですね

退会済みユーザー

2017/05/08 06:43

考え方はイメージがついてきました。ただ、コードの書き方がわからない所がいくつかありまして困っております。 1.初期表示で中心のオセロ四つを白、黒、白、黒と表示させるコードの書き方がわからない。 2.駒をひっくり返した時に、色を白から黒のように変更したいがコード上どのように書けばよいかがわからない。 3.盤の上に駒をクリックして置きたいがその書きかたがわからない。恐れ入りますがアドバイス頂けないでしょうか。よろしくお願いします。

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