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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

2回答

2174閲覧

オセロ(リバーシー)のエラー解決方法がわからない。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/06/22 08:46

お世話になります。
現在、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; }

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

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

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

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

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

guest

回答2

0

試しにコンソール

x=3 y=4 end_x=3 end_y=4 x=1 y=4 end_x=-1 end_y=-1 x=0 y=4 end_x=-1 end_y=-1 x=-1 y=4

なのでエラーはこの箇所かと

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)

投稿2017/06/22 09:10

koji9412

総合スコア158

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

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

0

InitialBoardData が呼ばれる前に setMark が呼ばれている為です。以下で試してみて下さい。

javascript

1$(function() { 2 InitialBoardData(); 3 $('td').click(function(e) { 4 if ($(this).textContent != null) { 5 return; 6 }; 7 setMark(this); 8});

投稿2017/06/22 08:51

mattn

総合スコア5030

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

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

退会済みユーザー

退会済みユーザー

2017/06/22 09:01 編集

ご返信ありがとうございます。上記のコードは今現在、HTMLの117-125行目に記載しているのですが、こちらをInitialBoardDataの関数の後に記述する認識で合ってますでしょうか?試してみたところ、同様のエラーが生じておりまして...
mattn

2017/06/22 09:10

エラーの内容は board_data が初期化されていない場合にでるエラーです。正しく8個の配列が作れていない場合にこのエラーが出ます。
mattn

2017/06/22 09:14

あーわかりました x が -1 になってますね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問