任意に作成できるマインスイーパ のエラー

Question

前提・実現したいこと

Typescirptを用いて、任意の値から作成されるマインスイーパ を作成しています。

１０＊１０のマインスイーパ の基本機能は実装できました。
しかし、フォームからデータを受け取るようにしたところ爆弾を枠外に設置するエラー。そして現在のコードでも加算されるはずの爆弾が加算されないといったエラー。そしてそもそも爆弾が設置されず真っ白な枠だけが生成されるエラーが発生しています。

発生している問題・エラーメッセージ

index.js:60 Uncaught TypeError: Cannot read property 'bomb' of undefined
    at init (index.js:60)
    at HTMLInputElement.onclick (index.html:33)
最後のエラーが発生する場合に出てくるエラーです。if (!cell[x][y].bomb)の部分とHTMLのボタンの部分に対して出ます。

該当のソースコード

type Cell = HTMLTableCellElement & { 
    x: number,
    y: number,
    bomb: boolean,
    opened: boolean,
};
let cell: Cell[][]=[];
let opened: number=0;



function init() {
    let removeElem : HTMLTableElement =<HTMLTableElement>document.getElementById("main");
    for (var i = removeElem.childNodes.length - 1; i >= 0; i--) {
            removeElem.removeChild(removeElem.childNodes[i]);
    }
    const form = document.forms.namedItem('txtbox'); 
    const bombInput = form && form.elements.namedItem('BOMB') as HTMLInputElement; 
    if(!bombInput) return alert('爆弾入力してください'); 
    let BOMB: number= parseInt(bombInput.value); 
    if (!BOMB){
        alert("爆弾入力してください");    
        return false;    
    }

    const heightInput = form && form.elements.namedItem('H') as HTMLInputElement; 
    if(!heightInput) return alert('高さ入力してください'); 
    let H: number= parseInt(heightInput.value); 
    if (!H){
        alert("高さ入力してください");   
        return false;    
    }

    const widthInput = form && form.elements.namedItem('W') as HTMLInputElement; 
    if(!widthInput) return alert('横幅入力してください'); 
    let W: number= parseInt(widthInput.value); 
    if (!W){
        alert("横幅入力してください");    
        return false;    
    }
    
    

    let main = document.getElementById("main"); 
    if(main == null){
        alert('Error');
        return;
    }
    for (let i=0; i<H; i++){ 
        cell[i]=[];
        let tr = document.createElement("tr");  
        for (let j=0; j<W; j++){
            let td = document.createElement("td") as Cell; 
            td.addEventListener('click', function(event: MouseEvent){ 
                click(event);
            });
            td.className="cell";
            td.y = i;
            td.x = j;
            cell[i][j]=td;
            tr.appendChild(td);
        }
        main.appendChild(tr);
    }
    for(let i=0; i<BOMB; i++){
        while(true) {
            let x=Math.floor(Math.random()*W);
            let y=Math.floor(Math.random()*H);
            console.log(x);
            console.log(y);
            
            if (!cell[x][y].bomb){
                cell[x][y].bomb =true;
                break;
            }
        }
    }
}
function count(x: number,y: number){
    const form = document.forms.namedItem('txtbox'); 

    const heightInput = form && form.elements.namedItem('H') as HTMLInputElement; 
    if(!heightInput) return alert('Error'); 
    let H: number= parseInt(heightInput.value); 
    if (!H){
        alert("高さ入力してください"); 
        return false;    
    }

    const widthInput = form && form.elements.namedItem('W') as HTMLInputElement; 
    if(!widthInput) return alert('Error'); 
    let W: number= parseInt(widthInput.value); 

    let b =0; 
    
        for(let j= y-1; j<=y+1; j++){ 
            for(let i =x-1; i<=1; i++){
                if (cell[j] && cell[j][i]){ 
                        if(cell[j][i].bomb) b++; 
                }
            }
        }
        return b;
}

function openCell(x: number,y: number){
    for (let j = y-1; j<= y+1; j++){
        for (let i = x-1; i<= x+1; i++){
            if (cell[j]&&cell[j][i]){
                let c=cell[j][i]; 
                if(c.opened || c.bomb){ 
                    continue;
                }
                flip(c);
                let n = count(i,j); 
                if(n==0){
                    openCell(i,j); 
                }else {
                c.textContent = String(n); 
                }
            }
        }
    }
}


function flip(cell: Cell) {
    const form = document.forms.namedItem('txtbox'); 
    const bombInput = form && form.elements.namedItem('BOMB') as HTMLInputElement; 
    if(!bombInput) return alert('Error'); 
    let BOMB: number= parseInt(bombInput.value);
    if (!BOMB){
        alert("爆弾入力してください");    
        return false;    
    }

    const heightInput = form && form.elements.namedItem('H') as HTMLInputElement; 
    if(!heightInput) return alert('Error'); 
    let H: number= parseInt(heightInput.value); 
    if (!H){
        alert("高さ入力してください");    
        return false;    
    }

    const widthInput = form && form.elements.namedItem('W') as HTMLInputElement; 
    if(!widthInput) return alert('Error'); 
    let W: number= parseInt(widthInput.value); 
    if (!W){
        alert("横幅入力してください");   
        return false;    
    }


    cell.className = "cell-open"; 
    cell.opened = true; 
    if (++opened >= (W * H -BOMB)){ 
        setTitle('Open');
    }
}



function click(e: MouseEvent) {
    let src = e.currentTarget as Cell;
    if(src.bomb){
        src.textContent = "★";
        setTitle('Game Over');
    }else{
        openCell(src.x,src.y); 
    }
}

試したこと

console.logで爆弾のx,y座標を調べたところ、本来あるはずの場所になかったり、ある場所の座標が入っていなかったりしました。

丸々２日間検索しても原因がわからなかったので投稿させていただきました。ご助力願います。

Answer 1

init関数の最後の方にある

for(let i=0; i<BOMB; i++){
  while(true) {
    let x=Math.floor(Math.random()*W);
    let y=Math.floor(Math.random()*H);
    ...

    if (!cell[x][y].bomb){
      ...
    }
  }
}

というループですが、cell変数に対する同関数内でのそれ以前の処理では

cell[i][j] = td;

のような代入を行なっており、この時iはH未満、jはW未満です。

そしてループ内ではxがW未満、yがH未満となるような実装になっているかと思うので、
ここでのcell変数の参照(とbombの参照)は、cell[x][y].bombではなくcell[y][x].bombが適当であったりしませんでしょうか？

Comments

[Tanakakko]

x,yをおっしゃられていた通り入れ替えてみましたが、やはりうまく動作しません。
10*10の時はこのコードでもうまく起動し、またうまくカウント、爆弾の表示が行われることもあり何が原因なのかわからず困っております。