投稿2020/09/25 05:39
編集2020/09/29 03:26お世話様です。ebifurai55です。私はWeb系の仕事に就きたく最近、Javascriptを勉強しています。800ページぐらいあった本を読破したのですが、実際のコードは書いたことがないので、自分なりに目標を定め、とりあえずリバーシを作ろうと思ってネット検索を含め、ソースがないかどうか探しました。そこでたどり着いたのがteratailなのですが、以前ここにリバーシ（オセロ）のサンプルプログラムがあったので、実装してみました。ただ少し残念なのは、黒白、順番の表示は点数の判定などがなかったので、自分で考えようと思いましたが、プログラミング初心者の為、どこから手をつけていいのかわからない、わからないことがわからない、、、という状態になっています。一応自分なりの概念は
・盤面の状態の保存
・チェック
・白黒の数値を表示
・勝利判定
・再スタート
という流れなのかな？と思いますが、いろいろと検索しても変数やパラメーターが違うので、どこを変えればいいのか？という結論になりました。私のメンターの人もゆっくりやっていいよ、と言ってくれますが、概念がわからないと同実装したらわかりません。ちょっと自分でもやってみますが、どうしようもない時にこちらに投稿してもいいでしょうか？
今現在勝利判定の所で何を対象にチェックをしたらいいのか、苦戦しています。できれば解決方法のソースを教えてもらいたいです。が、自分の力でどこまでやれるか頑張ります
以下にこのサイトで参考にしたソースコードを載せます。
index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta http-equiv="content-language" content="ja"> 5 <meta charset="UTF-8"> 6</head> 7<html> 8 <body> 9 <div id="othello"></div> 10 <script type="text/javascript" src="reversi.js"></script> 11 </body> 12</html>
reversi.js
1var STONE_BLACK = 'url("http://i.imgur.com/CLEpdaJ.png")'; 2var STONE_WHITE = 'url("http://i.imgur.com/VZgXNBM.png")'; 3var BLACK = 1; 4var WHITE = 2; 5 6var turn = BLACK; // 先手は黒 7 8// 10×10のフィールドを作って、石の色を保持する。 9// 0: 石がない, BLACK: 黒石, WHITE: 白石、9: 壁 10var field = [ 11 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9], 12 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 13 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 14 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 15 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 16 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 17 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 18 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 19 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 20 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9] 21]; 22// ------------------------------------------------------- 23// 盤面を表示する。 24function showBoard() { 25 var element = document.getElementById("othello"); 26 27 for (var y = 1; y <= 8; y++) { 28 for(var x = 1; x <= 8; x++) { 29 var f = document.createElement("div"); 30 f.id = "p" + y + x; 31 f.style.border = "1px solid black"; 32 f.style.cssFloat = "left"; 33 f.style.height = "60px"; 34 f.style.width = "60px"; 35 f.style.background = "lime"; 36 f.style.cursor = "pointer"; 37 f.addEventListener("click", clickEvent, false); 38 39 if ((x % 8) == 1) { 40 f.style.clear = "both"; 41 } 42 43 if (field[y][x] !== 0) { 44 var image = (field[y][x] == BLACK)? STONE_BLACK :STONE_WHITE; 45 f.style.backgroundImage = image; 46 } 47 element.appendChild(f); 48 } 49 } 50} 51 52function playable(y, x, player) { 53 var ans = false; 54 var opponent = (player == BLACK) ? WHITE : BLACK; 55 var delta_y = [-1, -1, 0, 1, 1, 1, 0, -1]; 56 var delta_x = [0, 1, 1, 1, 0, -1, -1, -1]; 57 58 if (field[y][x] === 0) { 59 for (var pos = 0; pos < 8; pos++) { 60 var count = 0; 61 var n = y + delta_y[pos]; 62 var m = x + delta_x[pos]; 63 64 if (field[n][m] === 9 || field[n][m] === player || field[n][m] === 0) { 65 continue; 66 } 67 68 while (field[n][m] === opponent) { 69 n += delta_y[pos]; 70 m += delta_x[pos]; 71 count++; 72 73 if (field[n][m] === player) { 74 ans = true; 75 while (count >= 0) { 76 n -= delta_y[pos]; 77 m -= delta_x[pos]; 78 var f = document.getElementById("p" + n + m); 79 f.style.backgroundImage = (player == BLACK)? STONE_BLACK : STONE_WHITE; 80 field[n][m] = player; 81 count--; 82 } 83 84 } 85 } 86 } 87 } 88 return ans; 89 90} 91 92function showWinner(field) { 93 var nt = {}; 94 nt[BLACK] = 0; 95 nt[WHITE] = 0; 96 97 for (var x = 1; x < 8; x++) 98 for (var y = 1; y < 8; y++) 99 nt[field[[x, y]]]++; 100 101 console.log((nt[BLACK] == nt[WHITE]) 102 ? 'The game ends in a draw.' 103 : 'The winner is ' + (nt[WHITE] < nt[BLACK] ? BLACK : WHITE) + '.' 104 ); 105} 106 107function clickEvent() { 108 var element = document.getElementById(this.id); 109 var y = parseInt(element.id.substr(-2, 1)); 110 var x = parseInt(element.id.substr(-1, 1)); 111 112 var check = playable(y, x, turn); 113 if (check) { 114 turn = (turn == BLACK)? WHITE : BLACK; 115 if ( turn == BLACK) { 116 console.log('黒の番です'); 117 } else { 118 console.log('白の番です'); 119 } 120 } 121 var win = showWinner(field); 122 123} 124 125onload = function() { 126 // 黒と白の初期配置 127 field[4][5] = BLACK; 128 field[5][4] = BLACK; 129 field[4][4] = WHITE; 130 field[5][5] = WHITE; 131 showBoard(); 132}; 133 134//オセロ実践写経
showWinnerはどこからか引っ張ってきたメソッドです。普通に動きません。なにかご助言いただけないでしょうか？たくさんの方からの投稿まっています。
情報追記
やりたい事
・黒と白の数を表示
・64マスに達したら黒か白かどちらが勝ったか判定をする
現状の問題
・nt[board[[x,y]]]++;
で nt[BLACK]とnt[WHITE]の値が更新されてない。
そのため、ずっと”引き分けの"の表示になる。
・nt[BLACK]とnt[WHITE]をカウントしたいが、どの様に表現しないといけないのか分からない。
将来の実装
64マスに達したらというのではあれば
if ( any === 64 )とかで判定して処理を書きたい
09/29
あれから試したものの、nt[BLACK]とnt[white]の動きがどうしてもわからなかったので、以下の様な実装をしてみました
reversi.js
1 2 // 左端からすべてのマスの確認を行う 3 var white_cnt = 0 4 var black_cnt = 0 5 for (var x = 0; x < 8; x++) { 6 for (var y = 0; y < 8; y++) { 7 // 空白マスのみおけるのでチェック 8 // それ以外は石の数を加算 9 switch( field[x][y] ) { 10 //case 0: 11 //console.log('何もしない'); 12 //break; 13 case 1: 14 black_cnt++; 15 console.log('黒を1加算'); 16 console.log('黒の数' + black_cnt); 17 18 break; 19 case 2: 20 white_cnt++; 21 console.log('白を1加算'); 22 console.log('白の数' + white_cnt); 23 break; 24 } 25 } 26 } 27 28}
これで正常に動いた！と思ったのですが、譜面が進むと、白か黒か枚数が同一ではなくなります。どうすればいいのか思案してましたが、当方playable関数に関してまったく理解がないので、どうも自分流で作れれば作った方がいいのではないかと思いました。トレーニングしてないのに野球の実践で活躍できるかと言うと、リトルリーグと大リーグぐらい違うものだと認識しました。たかだか100行くらいですけど、明日までに解決策が出なかったら、メンターに失敗だったと報告します。
他に何かご助言ありますでしょうか？人格攻撃とか向いてないとか言うのはご遠慮ください。
追記。Switchの0も何を指してるかわかりません
回答5件
0
普通に動きません。なにかご助言いただけないでしょうか？
「動かない」という言葉だけでは、情報がありません。
以下のような条件を揃えてはじめて、何が問題なのか議論できる状態になります。
投稿2020/09/25 05:42
総合スコア145183
0
う～ん。ここに書くのをずっとためらっていました。
質問者様みたいなタイプの方も結構このサイト利用されていて、同じような事になっています。
その為みなさん回答したくないんですよ...。
まず基本的なお話
慌てる気持ち判ります。早く習得したいですよね？
でも「プログラム言語の理解」と「ロジックの理解」は別なんです。
例えるなら英問で書かれた数式とけますか？という事です
この場合「英問」が「プログラム言語」で「ロジック」が「数式」に当てはまります。
ただ「動かない」と言われても「プログラム言語の翻訳」でつまづいているのか？
「数式の解き方」でつまづいているのか？が判りません。
まずどっちで判らないのかはっきりしましょう。
一応教育担当者も経験あるのでその時の良くあるパターンで
「辞書片手にやれば問題ないだろう」
と思っている場合です。
普通の言葉と違って1文字1単語位置や誤りがあると動かないのがプログラムです。
せっかく人に指摘されたら確認修正してまずは動かしましょう。
「言われた通りにしたのに治らなかった」ならまた修正方法、症状を伝えれば必ず教えてくれます。
また修正により一部が動くようになっても別が動かない場合もあります。
とにかく指摘事項は一度試してうまくいってもいかなくても報告しましょう。
なれてくれば質問の回数も減るし質問内容も適切になってきます。
質問者様を責めているわけではありません。
「ロジックの理解」にはどうしても「センス」が必要なのです。
今回リバーシを課題に選択されたようですがこれがそもそも間違いで
なれている人でも書くのに結構手間がかかったりします。
そこに対戦者がPCとかなったら苦戦します。
(将棋AIでさえ最近話題になるぐらいですから)
ここでいう「ロジック」とはどれだけ処理を分解できるか？の事です。
例として針の時計を思い浮かべて下さい。
プログラマはここまで動作を分解します。
0. 針の中心位置はどこか？
0. 長針、短針、秒針の位置はどこか？
0. 1秒過ぎたか？
0. 秒針の位置は1秒過ぎたらどこが適切か？
0. 短針の位置は1秒過ぎたらどこが適切か？
0. 長針の位置は1秒過ぎたらどこが適切か？
0. 新しい針の位置にする為に時計を針の無い状態で描写
0. 針の中心位置から長針の位置までの角度を計算
0. 計算結果に合わせ長針を描写
0. 針の中心位置から短針の位置までの角度を計算
0. 計算結果に合わせ短針を描写
0. 針の中心位置から秒針の位置までの角度を計算
0. 計算結果に合わせ秒針を描写
時計の針を1秒動かすだけでも13工程の事を最低限考えます。
この作業を正確にかつ最適に分割する事を行わなければならない為
「センス」が必要となります。
追記。Switchの0も何を指してるかわかりません
この辺りもセンスがある人が見ればすぐに判るのですが
javascript
1var field = [ 2 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9], 3 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 4 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 5 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 6 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 7 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 8 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 9 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 10 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 11 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9] 12];
これせっかくリバーシの画面を再現していますよね？
そうしたら0はまだ置かれていない場所と判りますよね？
この辺りを気づくかどうかも「センス」なんです。
「センス」は磨くことができます。
ただ人の意見を紳士に受け止めて確認しなければすぐに曇ります。
今回のお題リバーシについて
リバーシはじつは処理がめんどくさいです。
大きく分けて以下の処理が必要です
リバーシ画面を表示する
はじめ中心2x2に白黒のコマを設定
リバーシ画面を更新する
初期の状態で先手(例として白)が「白のコマ」を置ける位置を算出しておく
「白のコマ」が置ける位置に置かれたか確認
置かれた「白のコマ」から8方向に対して「黒のコマ」が続いて
最後「白のコマ」で終わるか確認
0. その様な方向が見つかった場合「黒のコマ」を「白のコマ」に変える
0. 「白のコマ」に変えたらリバーシ画面を更新する
最後「黒のコマ」で終わるか確認
0. その様な方向が見つかった場合「白のコマ」を「黒のコマ」に変える
0. 「黒のコマ」に変えたらリバーシ画面を更新する
以下繰り返し
最後は先手で「白のコマ」が置ける位置がなくなり
後手で「黒のコマ」が置ける位置がなくなるかで終了を判定
(面全体にコマが配置されなくても終了する場合がある)
以上の処理が適格にできていれば「人対人」のリバーシを作る事ができます。
以上が私からの回答とさせていただきます。
投稿2020/09/29 04:23
総合スコア2506
0
今現在勝利判定の所で何を対象にチェックをしたらいいのか、苦戦しています。
...略
showWinnerはどこからか引っ張ってきたメソッドです。普通に動きません。
showWinnerのロジック自体は動作するかと思います。
全コード中から必要な部分だけ抜き出していますが、下記を実行してみてください。
javascript
1var BLACK = 1; 2var WHITE = 2; 3var field = [ 4 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9], 5 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 6 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 7 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 8 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 9 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 10 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 11 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 12 [9, 0, 0, 0, 0, 0, 0, 0, 0, 9], 13 [9, 9, 9, 9, 9, 9, 9, 9, 9, 9] 14]; 15 16// 以下showWinnerより抜粋 17 18var nt = {}; 19nt[BLACK] = 0; 20nt[WHITE] = 0; 21 22for (var x = 1; x < 8; x++) 23 for (var y = 1; y < 8; y++) 24 nt[field[[x, y]]]++; 25 26console.log((nt[BLACK] == nt[WHITE]) 27 ? 'The game ends in a draw.' 28 : 'The winner is ' + (nt[WHITE] < nt[BLACK] ? BLACK : WHITE) + '.' 29); 30 31// 表示結果 32// -> The game ends in a draw.
画面上には表示されず、コンソールに表示があるかと思います。
行っていることはシンプルで、盤面状の1:黒と2:白の数をカウントしてどちらが多いかを比較しているだけです。
仮にshowWinnerがうまく動かないのだとすれば引数のfieldがどこかのタイミングで意図せず書き換わっていると思います。
投稿2020/09/25 05:51
総合スコア2409
0
・nt[board[[x,y]]]++;
で nt[BLACK]とnt[WHITE]の値が更新されてない。
nt[field[[x, y]]]++の間違いですよね？
さて、field は2次元配列ですので、field[x][y]のようにアクセスする必要があると思います。
nt[BLACK]とnt[WHITE]をカウントしたいが、どの様に表現しないといけないのか分からない。
nt[BLACK]とnt[WHITE]はカウンタとして使われている変数なので、その値自体がカウントなのですが、そういう意味ではなく？
白とか黒は最初は盤に置いてある数はあってるのですが、枚数が増えてくると同一ではない
fieldが10*10のところ、0~7までしかループしていないことが原因です。
投稿2020/09/28 04:25
編集2020/09/29 04:46総合スコア36074
0
リバーシの勝利判定の方法の理論は
ゲームのルールを考えます。以下のいずれかの条件で勝敗が決します。
クリックイベントのリスナである clickEvent() 関数内で playable() 関数を用いて「継続の可否」を判別しているが、それを無視して勝敗判定（showWinner()）しています。
模写では、とにかくコードリーディングしてください。
URL叩く（ページをGET要求） +-HTMLの読み込み +-javascriptの読み込み(reversi.js) 1. 定数や変数の宣言 STONE_BLACK, STONE_WHITE, BLACK, WHITE, turn, field 2. 関数の宣言 showBoard(), playable(y, x, player), showWinner(field), clickEvent() 3. load イベントで開始(エントリポイント) onload = function() { }
ブラウザ上で発火するイベントを併せて追いかける必要があります。
ちなみに、window.addEventListener("load", listener) を addEventListener("load", listener)と window の省略例は見かけますが、onload = function(){/* omitted */} のような省略は使われません。
別のスクリプトも読む場合、後から読んだスクリプト内に window.onload=function(){} の記述があると上書きされて実行されないためです。極めて限定的な条件で有効な記述と解釈し、showBoard() 内の実装のように addEvewntListener() を使ってください。
追記）
修正欄コメントより
playable関数に関してまったく理解がない
playable では 反転できる石の存在を確認するため、盤上の座標に対して周囲方向をチェックする機能です。
周囲方向の確認のため、field は 10x10 の２次元配列にし、壁 をチェックしたときに配列要素（9）が存在するフォーマットにしていることも読めます（添字番号の範囲は、0-7で実装することもできますが、敢えて0-9 にし、1-8 をそのままゲーム座標に 0, 9 を壁にしている）。
配列と反復処理の関係を理解しているかを試されているのだと感じます。
配列が理解できていないと、分からないところが判ったのは１つの成果ですね。
投稿2020/09/25 14:01
編集2020/09/29 07:14
総合スコア5432
あなたの回答
tips
プレビュー
Q&A
