オセロ 多次元配列データ
Q&A
Closed
解決したいこと
ここに解決したい内容を記載してください。
現在JavaScriptでオセロを作成しています。
そこで、マス目のデータを多次元配列で取得したのち、
64マスの全多次元配列のデータをチェックして、黒、白の石をUIに反映させる処理を実装したいです。
※黒＝1 白＝ー1 とし、石を置く順番も交互に実装済み
現状、黒と白が変なタイミングででてきてしまいます、、
原因がわからず、なにかアドバイスやヒント、など、いただきたいです
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
ソースコードを入力
<script>
window.onload = function () {
const boardSize = 8;
let board = [];
const black = 1;
const white = -1;
const enpty = 0;
let order = true; //trueは黒（先行）
const othelloWhite = "◯";
const othelloBlack = "●";
for (let i = 0; i < boardSize; i++) {
let tmpArray = [];
for (let j = 0; j < boardSize; j++) {
tmpArray[j] = 0;
}
board[i] = tmpArray;
}
board[3][3] = white;
board[3][4] = black;
board[4][3] = black;
document.getElementById("orderWhite").style.visibility = "hidden";
let tableElements = document.getElementsByTagName("td");
console.log(`tableElements.length: ${tableElements.length}`);
//tableの全てにclickイベントを付与する
for (let $i = 0; $i < tableElements.length; $i++) {
tableElements[$i].addEventListener("click", function () {
//配列に変換する
let tableElement = [].slice.call(tableElements);
//クリックした位置の取得
let index = tableElement.indexOf(this);
console.log(`マス番号: ${index}`);
//位置の座標入れる
const col = Math.floor(index / 8);
const row = index - col * 8;
console.log(`行: ${col}`, `列: ${row}`);
//石を置く場所の制御
if (board[col][row] !== 0) {
alert("そこには置けません");
return;
}
board[2][2] = white;
putOthello(index, col, row);
console.log(board);
});
}
function putOthello(index, col, row) {
if (order) {
//黒の番
document.getElementById("orderWhite").style.visibility = "visible";
document.getElementById("orderBlack").style.visibility = "hidden";
board[col][row] = black;
tableElements[index].innerHTML = othelloBlack;
} else {
//白の番
document.getElementById("orderBlack").style.visibility = "visible";
document.getElementById("orderWhite").style.visibility = "hidden";
board[col][row] = white;
tableElements[index].innerHTML = othelloWhite;
}
//64個の多次元配列のデータを取得
for (let i = 0; i < 8; i++) {
for (let j = 0; j < 8; j++) {
console.log("[" + i + "][" + j + "] = " + board[i][j]);
//多次元配列に入っている数字が1の場合は黒、-1の場合は白の石を置く
if (board[i][j] === 1) {
tableElements[index].innerHTML = othelloBlack;
} else if (board[i][j] === -1) {
tableElements[index].innerHTML = othelloWhite;
}
}
}
// for (let i = 0; i < tableElements.length; i++) {
// if ((tableElements[index] = white)) {
// tableElements[index].innerHTML = othelloWhite;
// } else if ((tableElements[index] = black)) {
// tableElements[index].innerHTML = othelloBlack;
// }
// }
order = !order;
}
};
</script>
0
