Q&A
ソースコードがきちんと囲えていません。質問編集画面の右側にプレビューが出ますので見ながら調整してください。また「エラー等が生じ」とありますがどのようなエラーがあるのか追記願います。
お世話になります。
JavaScriptでオセロを作成しているのですが、駒をひっくり返す処理がどうしてもできなくて困っております。駒を置いた場所から、縦と横と斜めのセルを確認し、同じ駒が次の次のセルにある場合に駒をひっくり返す処理を記述すればよいかと思い記述したのですが、エラー等が生じわからない状態になってしまいました。アドバイス等頂けれると非常に助かります。
/* 初期設定 */ // 駒を定義する処理 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; } //盤をクリックした際の処理 function setMark(obj) { var cellid = obj.id; var first = cellid.slice(4,5); var second = cellid.slice(5,6); if(board_data[first][second] == empty){ obj.textContent = "●"; //考え方:隣を一個づつ監視する } //自分のおいた駒から、縦と横と斜めのセルを確認する処理を記述する 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"> <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> <script> $(function() { // ボタンクリックで時刻を更新 $('td').click(function(e) { if ($(this).textContent != null) { return; }; setMark(this); }); }); </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></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> </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; }
ご連絡ありがとうございます。具体的に、オセロ初期表示段階で、 index.html:22 Uncaught ReferenceError: InitialBoardData is not defined at onload (index.html:22)とconsoleに表示されており、駒の初期配置と駒を置いた時の処理が出来ていない状態です。
bodyにonloadを書くのではなくjavascriptでonloadを書いてはどうでしょうか。 window.onload = InitialBoardData; あと、function内ではないのにreturnしている記述が散見されます。（エラーになります）転記ミスはないですか？
もちろんそれだけでは思ったとおりに動くものではありませんので、色々調整（かなり長い道のりで）は必要に思います。
回答2件
0
まず、「次の次のセル」というのが誤りです。オセロは自色で挟んだすべての敵ゴマをひっくりかえしますから、次の次だけを見てはいけません。
x軸プラス方向の判定をする時を考えると、以下のようになります。
盤面を[0][0]～[7][7]として、座標(x,y）が[x][y]でデータ上表現されるものとします。
1: 打った場所の座標を、（px, py）とする。
2: 変数 bx, by を それぞれ -1 で初期化しておく
3: 変数 dx を +1 に、変数 dy を 0 に初期化しておく。
4: 変数 x を px+dx で初期化しておく
5: 変数 y を py+dy で初期化しておく
6: 変数 f を false で初期化しておく
7: （0 ≦ x ≦ 7) かつ (0 ≦ y ≦ 7) である間、以下をループする
- 盤面[x][y] が空白であれば、ループを終了する
- 盤面[x][y] が自色のコマであれば、f を true にしてループを終了する
- 盤面[x][y] が相手のコマであれば、bx=x, by=y とし、x=x+dx, y=y+dy とする
8: ループ終了後に、f が true ならば（はさんだ相手ゴマがある）、盤面[px+dx][py+dy]～[bx][by]までを自分のコマにする
縦方向、横方向、斜め方向のいずれであっても、3. の部分でdx,dy の値を変化させれば適用できます。
（縦方向ならばdxの代わりにdyが0ではなくなります。斜めならdxとdyのそれぞれが0ではありません）
投稿2017/06/20 06:31
総合スコア13707
0
ベストアンサー
現状できそうなアドバイス・・。
- エラーメッセージは意味がわからなければGoogle翻訳を利用し、そこからヒントを得る
プログラマ向けにいい感じに訳してくれます。そこから原因となりそうな検索キーワードも得られます。
- index.jsよりjquery読み込みを先に。一連のjs関係の処理はbody閉じの直前の方が良い。
例：
HTML
1<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 2<script type="text/javascript" src="index.js"></script> 3<script> 4//直書き部分 5</script> 6</body> 7</html>
- onloadはbodyじゃなくjsで書こう
javascript
1window.onload = InitialBoardData;
その方が統一感が出ます。
折角jqueryで書いてあるので、$(function() {直後でも同様の効果が得られます。
javascript
1$(function () { 2 InitialBoardData(); 3//以下略
- 定義してない関数、変数を使っていないか？
getFlipCellsOneDir()って？とか
forの中のループ用変数とかちゃんと揃ってる？とか
あとはオセロ的な動きの再現ですね。
複合的な要素が含まれますし、課題としてはかなり面白いものだと思います。
エラーの解消からだとは思いますが、
がんばってください。
投稿2017/06/20 06:37
総合スコア80888
アドバイス誠にありがとうございます。躓いており、周りに聞く人もいないので困っておりました。一通り、皆様がご指摘頂いた内容を試してみます。選び難いですが今回はmatsu1006様をベストアンサーにさせて頂きます。ありがとうございました。
オセロの動作仕様的なところはtacsheavenさんの提案を参考にしてください。
他にも
置けないところに置こうとした際の処理とか
順番がきたものの置き場所がないから順番をスキップする処理とか
空きはあるけど両方置けないときの処理とか
結構考慮すべきことが多いですね。
あなたの回答
tips
プレビュー
