teratail
回答率
85.48%
質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

新規登録して質問してみよう
ただいま回答率
85.48%
トップJavaScriptに関する質問
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1738閲覧

JavaScriptで作成したオセロの駒の配置方法がわからない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/06/06 16:11

0

0

はじめまして。JavaScriptでオセロを作成しているのですが、以下の処理の記述内容がわからなくて困っております。ご教授頂けないでしょうか？

1.『○』、『●』を置く、区別の仕方がわからない。

2.オセロの駒を挟んだらひっくりかわる（色を変更する）処理の記述方法がわからない

3.『○』の上をクリックすると『●』になってしまう。

<!DOCTYPE html>
<html lang="ja">
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
	<meta charset="UTF-8">
	<title>オセロ</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="InitialBoardData();">
<div id="wrapper">
	<div id="main"><!-- 左側 -->
	  <table id="board">
	  	<tr>
			<td onClick="setMark(this)"></td>
			<td onclick="setMark(this)"></td>
			<td onclick="setMark(this)"></td>
			<td onclick="setMark(this)"></td>
			<td onclick="setMark(this)"></td>
			<td onclick="setMark(this)"></td>
			<td onclick="setMark(this)"></td>
			<td onclick="setMark(this)"></td>
		</tr>
		<tr>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
		</tr>
		<tr>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
		</tr>
		<tr>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
		</tr>
		<tr>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
		</tr>
		<tr>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
		</tr>
		<tr>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
		</tr>
		<tr>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
			<td onClick="setMark(this)"></td>
		</tr>
	  </table>
	</div><!-- 左側終わり -->
	<div id="detail"><!-- 右側 -->
	  <div id="turn">
	    <a id="now_turn">黒</a><a>の番です</a>
	  </div>
	  <div id="score">
	    <div id="white">
	      <a>白:</a><a id="white_score">10</a>
	    </div>
	    <div id="black">
	      <a>黒:</a><a id="black_score">10</a>
	    </div>
	  </div>
	  <div id="start">
	    <button>start</button>
	  </div>
	  <div id="reset">
	    <button>reset</button>
	  </div>
	</div><!-- 右側終わり -->
</div>
</body>
</html>


a {
	text-decoration: none;
}

#board {
	table-layout: fixed;
	width: 300px;
	height: 300px;
	border-collapse: collapse;
	background-color:green;
}

#board td {
	border: 2px solid;
	text-align: center;
	height: 20px;
}

a.black {
	color: black;
}

a.white {
	color: white;
}

#main{
	float: left;
}
#detail{
	margin:10px;
	width:200px;
	float: left;
}
#detail:after{
	clear: both;
}
#score > #white{
  margin:10px;
  padding:10px;
  border: 5px solid;
  border-color:black;
}

#score > #black{
  margin:10px;
  padding:10px;
  border: 5px solid;
  border-color:black;
}


/* 初期設定 */

// 駒を定義する処理
var empty = 0;
var black = 1;
var white = 2;
var board_data = [];
var piece = "";
// 盤の中身を配列で初期化する処理
function InitialBoardData() {
	for (var i = 0; i < 8; i++) {
		board_data[i] = [];
		for (var j = 0; j < 8; j++) {
			board_data[i][j] = empty;
		}
	}
	// 初期配置
	board_data[4][4] = 1;
	board_data[3][3] = 1;
	board_data[4][3] = 2;
	board_data[3][4] = 2;
	//盤にidを設定する
	var table = document.getElementById("board");
	for(var i = 0; i < table.rows.length; i++){
		for(var j = 0; j < table.rows[i].cells.length; j++){
			table.rows[i].cells[j].id = "cell" + i + j;
		}
	}
	//idごとに値を設定する
	for (var i = 0; i < 8; i++) {
		for (var j = 0; j < 8; j++) {
			if(board_data[i][j] == empty){
				piece = "";
			}
			else if(board_data[i][j]
				 == black){
				piece = "●";
			}
			else if(board_data[i][j] == white){
				piece = "○";
			}
			else{
				piece = "エラー";
			}
			document.getElementById("cell" + i + j).textContent = piece;
		}
	};
}

//盤に駒を配置する処理
function put(i,j,color){
 //盤に駒が置けるかチェックする処理
  if(check(i,j,color) == false){
    return false;
  }
  //駒をひっくり返す処理
  board_data[i][j] = color;

}
//盤に駒があるかチェックする処理
function check(i,j,color){
  //すでに石がある場合
  if(board_data[i][j] != 0){
    return false;
  }
  return true;
}

//盤に駒がある場合の処理
// fucntion existPiece(i,j,color) {
// 	if (data[i][j] === black || data[i][j] === white) {
// 		//return true;
// 	}
// }


//盤をクリックした際の処理
function setMark(obj) {
	for (var i = 0; i < 8; i++) {
		for (var j = 0; j < 8; j++) {
			//盤に駒がない場合の処理
			if(board_data[i][j] == empty){
				obj.textContent = "●";
			} else {
				
			}
		}
	}
	
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1件

0

ベストアンサー

現在の手番（黒の手番なのか白の手番なのか）という概念を設けましょう。

１．初期はランダムもしくは、ユーザに手番を指定させる。（白を選んだと仮定）
２．１で指定された手番が先行として、コマを置く（白の手番）
３．コマが置けたらコマの置いた位置によって別のコマの判定（白の手番）
４．手番を逆にする（黒の手番へ変更）
５．相手手番がコマを置けるかの判定＞終了判定（黒の手番）
６．相手手番として２に戻る

こんなフローになるんじゃないでしょうか。あとは、置ける位置をなどありますが
その辺りは実装してみてください。

投稿2017/06/06 22:15

kanimaru
kanimaru

総合スコア1013

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

JavaScriptで作成したオセロの駒の配置方法がわからない