JavaScriptの再帰的関数がうまくいきません。マインスイーパーを作成中

Question

コード
//変数の設定
const MS_SIZE=8;//マインスイーパーのサイズ
var i,j;
var tate,yoko,x,y;
const number_of_mines=8;//地雷の数
var counter=0;

// 配列を用意
var cell = new Array(MS_SIZE);
for(i=0; i<MS_SIZE; i++){
  cell[i] = new Array(MS_SIZE);
}
for(i=0; i<MS_SIZE; i++){
  for(j=0; j<MS_SIZE; j++){
    cell[i][j]=0;
  }
}

//地雷を配置
for(i=0; i<number_of_mines; i++){
  tate=Math.floor(Math.random()*(number_of_mines));
  yoko=Math.floor(Math.random()*(number_of_mines));
  if(cell[yoko][tate]!=-1){
    cell[yoko][tate]=-1;
  }
  else{
    i--;
  }
}


//地雷の周囲
for(tate=0; tate<MS_SIZE; tate++){
  for(yoko=0; yoko<MS_SIZE; yoko++){
    if(cell[yoko][tate]==-1){
      for(j=-1; j<2; j++){
        for(i=-1; i<2; i++){
          if(yoko+j<MS_SIZE && yoko+j>=0 && tate+i<MS_SIZE && tate+i>=0){
            if(cell[yoko+j][tate+i]!=-1){
               cell[yoko+j][tate+i]++;
            }
          }
        }
      }
    }
  }
}

//ボードを開いたとき、クリックした時
function openBoard(x,y){
  id="cell"+x+y;
  target = document.getElementById(id);
  if(cell[x][y]!=-1 && cell[x][y]!=0){
    target.innerHTML = cell[x][y];
    target.style.padding="7px 13.5px";
    target.style.textAlign="center";
    counter++;
    if(counter==(MS_SIZE*MS_SIZE-number_of_mines)){
      window.alert("クリア");
    }
  }
  else if(cell[x][y]==0){
    target.innerHTML = cell[x][y];
    target.style.padding = "7px 13.5px";
    target.style.textAlign = "center";
    openBoard0(x,y);
  }
  else{
    target = document.getElementById(id);
    target.innerHTML = "外れ";
    window.alert("あなたは爆死しました。")
  }
}

//0が出た時その周りの0も開く関数
function openBoard0(x,y){
  for(j=-1; j<2; j++){
    for(i=-1; i<2; i++){
      yoko=x+j;
      tate=y+i;
      if(yoko<MS_SIZE && yoko>=0 && tate<MS_SIZE && tate>=0){
        id="cell"+yoko+tate;
        target = document.getElementById(id);
        target.innerHTML = cell[yoko][tate];
        target.style.padding = "7px 13.5px";
        target.style.textAlign = "center";
        if(cell[yoko][tate]==0){
           openBoard0(yoko,tate);
        }
      }
    }
  }
}

openBoard0という関数は０(地雷が周りにゼロ)を開いたら、その周りのcellを開く関数です。これ自体はうまく動作します。
問題はopenBoard0という関数の中の、再帰的にopenBoard0(yoko,tate)を出すところがうまくいきません。
教えていただけたらとても嬉しいです。

Comments

[退会済みユーザー]

あなたは、自分の求める回答以外のことやアドバイスに興味を示さないようだけれど
tate=Math.floor(Math.random()*(number_of_mines));
yoko=Math.floor(Math.random()*(number_of_mines));
これはまずいよ！前回もそういったのだけれど。直す気が無いのかな？

[oika77]

なるほど確かに！ありがとうございます
すみません。前回はあまり気にしてませんでした。

Answer 1

無限ループしているみたいですね。
1111
1AB1
1111
↑のAとBは0だとして、Aを押された時にAを中心に関数が呼ばれますが、周りに0(B)があるのでBを中心にもう一度関数が呼ばれます。Bの周りには0(A)があるのでAを中心にもう一度関数が呼ばれます。
既に開いた0を示す値(-1とか？)を入れるか、開いてあるかどうかを示すフラグセットを用意してみてはいかがでしょうか？

Comments

[oika77]

回答していただき、本当にありがとうございます。その点に関して気づいていませんでした。訂正いたします。

Answer 2

蓋を開けてみれば単純な話です。

問題はopenBoard0という関数の中の、再帰的にopenBoard0(yoko,tate)を出すところがうまくいきません。

教えていただけたらとても嬉しいです。

質問文のここがバグってます。

開いたマスが偶然0だったとしましょう。
じゃあその周りの8マスは全部0なのですか？

いやいや、自分の周り8マスに「地雷は埋まっていない」事が保証されるだけで、
周り8マスは全て0以上ですよね。
0かも知れないし、1以上かもしれない。

従って実行すべきなのはopenBoard0ではなく、openBoardです。

Comments

[oika77]

回答本当にありがとうございます。
今回は再帰関数を「もしcell==0ならば」の中に入れているので大丈夫なのではないでしょうか。

[miyabi-sun]

あー、cellは数字でしたか。
なら主原因は無限ループですね。

ですが、やはりopenBoard0ではなく、openBoardだけを叩くようにして下さい。
0の箇所をクリックして残ったマスを全部埋めてもクリア条件を満たせないようになり、
結局同じようなコードをあちこちにコピペすることになります。
なので、openBoard0はあくまで自分の周囲8マスをクリックするだけにした方が良いですね。

[oika77]

確かにその通りでした。ありがとうございます。

Answer 3

関数openBoard0の中で使うyoko,tateは当該関数の中で定義するローカル変数にしておかないとまずいのではないでしょうか。

Comments

[oika77]

回答ありがとうございます。ただローカル変数にしてもうまくいきませんでした。

Answer 4

何人もの方に回答していただき、本当にありがおうございました。
今回の問題点は、結論から言うと、この３人の方からご指摘いただいた箇所が全てです。
iとjをローカル変数に直したのと、cellを開いたかどうかを記録するようにしました。

つまり、スクリプトはこれです。

コード
//変数の設定
const MS_SIZE=8;//マインスイーパーのサイズ
var tate,yoko,x,y;
var check0=0;
const number_of_mines=8;//地雷の数
//var counter=0;
var close, open;

close=0;
open=1;

// ゲームボードの配列を用意
var cell = new Array(MS_SIZE);

for(var i=0; i<MS_SIZE; i++){
  cell[i] = new Array(MS_SIZE);
}

for(var i=0; i<MS_SIZE; i++){
  for(var j=0; j<MS_SIZE; j++){
    cell[i][j]=0;
  }
}
//ゲームボードの状態を表す配列を用意(状態とは開いたか開いてないか)
var cellState = new Array(MS_SIZE);
for(var i=0; i<MS_SIZE; i++){
  cellState[i] = new Array(MS_SIZE);
}
for(var i=0; i<MS_SIZE; i++){
  for(var j=0; j<MS_SIZE; j++){
    cellState[i][j]=close;
  }
}

//地雷を配置
for(var i=0; i<number_of_mines; i++){
  tate=Math.floor(Math.random()*(MS_SIZE));
  yoko=Math.floor(Math.random()*(MS_SIZE));
  if(cell[yoko][tate]!=-1){
    cell[yoko][tate]=-1;
  }
  else{
    i--;
  }
}

//地雷の周囲
for(var tate=0; tate<MS_SIZE; tate++){
  for(var yoko=0; yoko<MS_SIZE; yoko++){
    if(cell[yoko][tate]==-1){
      for(var j=-1; j<2; j++){
        for(var i=-1; i<2; i++){
          if(yoko+j<MS_SIZE && yoko+j>=0 && tate+i<MS_SIZE && tate+i>=0){
            if(cell[yoko+j][tate+i]!=-1){
               cell[yoko+j][tate+i]++;
            }
          }
        }
      }
    }
  }
}

//ボードを開いたとき、クリックした時
function openBoard(x,y){
//  console.log('openBoard : ' + x + ',' + y);
  id="cell"+x+y;
  target = document.getElementById(id);
  if(cellState[x][y]==close){
    if(cell[x][y]>0){
      target.innerHTML = cell[x][y];
      target.style.padding="7px 13.5px";
      target.style.textAlign="center";
      cellState[x][y]=open;

    }
    else if(cell[x][y]==0){
      target.innerHTML = cell[x][y];
      target.style.padding = "7px 13.5px";
      target.style.textAlign = "center";
      cellState[x][y]=open;
      openBoard0(x,y);
    }
    else if(cell[x][y]==-1){
      target = document.getElementById(id);
      target.innerHTML = "外れ";
      window.alert("あなたは爆死しました。")
    }
  }
}

//0が出た時その周りの0も開く関数
function openBoard0(x,y){
  for(var j=-1; j<2; j++){
    var yokox=x+j;
    if(yokox<0 || yokox>=MS_SIZE) continue;
    for(var i=-1; i<2; i++){
      var tatey=y+i;
      if(tatey<0 || tatey>=MS_SIZE) continue;
　　　　　cellState[yokox][tatey]);
        if(cellState[yokox][tatey]==close){
          openBoard(yokox,tatey);
        }
    }
  }
}