お世話になります。
現在、HTMLとJavaScriptでオセロを作成しております。
白い駒と黒い駒を挟んだ処理を加えたのですが、エラーが生じてしまいどこをどう直したらよいのかわからなくなってしまいました。以下、エラー内容となります。
Uncaught TypeError: Cannot set property '4' of undefined
at set (index.js:198)
at setMark (index.js:118)
at HTMLTableCellElement.<anonymous> (index.html:123)
at HTMLTableCellElement.dispatch (jquery.min.js:3)
at HTMLTableCellElement.v.handle (jquery.min.js:3)
エラーを解決するように試行錯誤しましたが、どうしてもエラーが直らないのでアドバイス頂ければと思います。
/* 初期設定 */ // 駒を定義する処理 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" + j + i; } } //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; } var cellid = ''; var myPut_x = -1; var myPut_y = -1; // ひっくり返す最初の駒 var end_x = -1 var end_y = -1; // 盤を確認する方向 var dir_x = +1; var dir_y = 0; var target_x = myPut_x + dir_x; var target_y = myPut_y + dir_y; var changeFlag = false; var changeCount = 0; // 変数初期化 function init (obj) { cellid = obj.id; myPut_x = parseInt(cellid.slice(4,5)); myPut_y = parseInt(cellid.slice(5,6)); // ひっくり返す最初の駒 end_x = -1 end_y = -1; // 盤を確認する方向 dir_x = +1; dir_y = 0; target_x = myPut_x + dir_x; target_y = myPut_y + dir_y; changeFlag = false; changeCount = 0; } //盤をクリックした際の処理 function setMark(obj,color) { init(obj); if(board_data[myPut_x][myPut_y] === empty){ obj.textContent = "●"; // 右方向確認 dir_x = +1; dir_y = 0; set(); init(obj); // 左方向確認 dir_x = -1; dir_y = 0; set(); init(obj); // 上方向確認 dir_x = 0; dir_y = +1; set(); init(obj); // 下方向確認 dir_x = 0; dir_y = -1; set(); init(obj); // 斜め右横上 dir_x = +1; dir_y = +1; set(); init(obj); // 斜め左横下 dir_x = -1; dir_y = -1; set(); init(obj); // while((0 <= target_x <= 7) && (0 <= target_y <= 7 )) { // if (board_data[target_x][target_y] === empty) { // break; // } else if (board_data[target_x][target_y] === black) { // changeFlag = true; // break; // } else if (board_data[target_x][target_y] === white) { // end_x = target_x; // end_y = target_y; // target_x = target_x+dir_x; // target_y = target_y+dir_y; // } // } // //ループ終了後に、f が true ならば(はさんだ相手ゴマがある)、盤面[px+dx][py+dy]~[bx][by]までを自分のコマにする // if (changeFlag) { // var x = myPut_x; // var y = myPut_y; // do { // x = x + dir_x; // y = y + dir_y; // board_data[x][y] = black; // document.getElementById('cell' + x + y).textContent = "●"; // } while (x != end_x || y != end_y) // // for (var i = 0; i < changeCount; i++) { // // board_data[myPut_x + dir_x][myPut_y + dir_y] = black; // // } // } } else { alert('既に駒が配置されています。'); } } function set () { while((0 <= target_x <= 7) && (0 <= target_y <= 7 )) { if (board_data[target_x][target_y] === empty) { break; } else if (board_data[target_x][target_y] === black) { changeFlag = true; break; } else if (board_data[target_x][target_y] === white) { end_x = target_x; end_y = target_y; target_x = target_x+dir_x; target_y = target_y+dir_y; } } //ループ終了後に、f が true ならば(はさんだ相手ゴマがある)、盤面[px+dx][py+dy]~[bx][by]までを自分のコマにする if (changeFlag) { var x = myPut_x; var y = myPut_y; do { x = x + dir_x; y = y + dir_y; board_data[x][y] = black; document.getElementById('cell' + x + y).textContent = "●"; } while (x != end_x || y != end_y) // for (var i = 0; i < changeCount; i++) { // board_data[myPut_x + dir_x][myPut_y + dir_y] = black; // } } } // if (board_data[x][y] === empty) { // break; // } else if (board_data[x][y] === white) { // f = true; // } else if (board_data[x][y]) === black { // bx = x; // by = y; // x = x+dx; // y = y+dy; // } // // if (x < 0 || y < 0 || x > 7 || y > 7) { // board_data[x][y] === empty; // break; // } else if (board_data) {} //自分のおいた駒から、縦と横と斜めのセルを確認する処理を記述する // var dirs = [[-1,-1],[0,-1],[1,-1],[-1,0],[1,0],[-1,1],[0,1],[1,1]]; // var result = []; // for (var p = 0; i < dirs.length; p++) { // var flipped = getFlipCellsOneDir(i, j, dirs[p],[0], dirs[p][i], color); // result = result.concat(flipped); // // i,jに駒を置いた時に、(dx,dy)方向で駒を挟めるかを確認する処理 // var x = i + dx; // var y = j + dy; // var flipped = []; // if (x < 0 || y < 0 || x > 7 || y > 7 || // data[x][y] == color || data[x][y] === 0){ // return; // } // flipped.push([x,y]); // while (true) { // x += dx; // y += dy; // if (x < 0 || y < 0 || y > 7 || data[x][y] === 0) { // return true; // } // if (data[x][y] === color) { // return flipped // } // }
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>オセロ</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="main"><!-- 左側 --> <table id="board"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></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> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="index.js"></script> <script> $(function() { InitialBoardData(); $('td').click(function(e) { if ($(this).textContent != null) { return; }; setMark(this); }); }); </script> </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; }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。