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

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

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

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

Q&A

解決済

2回答

5273閲覧

オセロ(リバーシー)で駒をひっくり返す処理がわからない。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

1グッド

1クリップ

投稿2017/06/20 05:21

編集2017/06/20 06:05

お世話になります。
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; }
DrqYuto👍を押しています

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

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

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

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

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

m.ts10806

2017/06/20 05:51

ソースコードがきちんと囲えていません。質問編集画面の右側にプレビューが出ますので見ながら調整してください。また「エラー等が生じ」とありますがどのようなエラーがあるのか追記願います。
退会済みユーザー

退会済みユーザー

2017/06/20 06:08

ご連絡ありがとうございます。具体的に、オセロ初期表示段階で、 index.html:22 Uncaught ReferenceError: InitialBoardData is not defined at onload (index.html:22)とconsoleに表示されており、駒の初期配置と駒を置いた時の処理が出来ていない状態です。
m.ts10806

2017/06/20 06:11

bodyにonloadを書くのではなくjavascriptでonloadを書いてはどうでしょうか。 window.onload = InitialBoardData; あと、function内ではないのにreturnしている記述が散見されます。(エラーになります)転記ミスはないですか?
m.ts10806

2017/06/20 06:19

もちろんそれだけでは思ったとおりに動くものではありませんので、色々調整(かなり長い道のりで)は必要に思います。
guest

回答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

tacsheaven

総合スコア13703

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

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

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

m.ts10806

総合スコア80765

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

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

退会済みユーザー

退会済みユーザー

2017/06/20 07:00

アドバイス誠にありがとうございます。躓いており、周りに聞く人もいないので困っておりました。一通り、皆様がご指摘頂いた内容を試してみます。選び難いですが今回はmatsu1006様をベストアンサーにさせて頂きます。ありがとうございました。
m.ts10806

2017/06/20 07:07 編集

オセロの動作仕様的なところはtacsheavenさんの提案を参考にしてください。 他にも 置けないところに置こうとした際の処理とか 順番がきたものの置き場所がないから順番をスキップする処理とか 空きはあるけど両方置けないときの処理とか 結構考慮すべきことが多いですね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問