如何獲得動態表

的財產，我有一些麻煩我的項目，如何獲得動態表

我需要建立一個遊戲：掃雷，

我在這個項目的主要問題是，我在動態表我html頁面，我建立一個矩陣在我的JavaScript頁面，

我想當前單元格我推它通過onclick事件，我只得到了第一個單元格（0,0）：

這是我的家工作項目，我只需要幫助聯合國derstand我怎樣才能得到每一個單元被點擊I`ve的指數，

我的html頁面：

<body onload="initGame()"> 
    <header> 
     <h1>My Mine Sweeper</h1> 
    </header> 

    <table class="mineTable" onclick="cellClicked(this)" border="1"> 
      <tbody class="mineSweeperTable" ></tbody> 
    </table>

我JavaScript頁面：

'use strict'; 

var gMINE = '&#10057;'; 
var gCELL = ' '; 
var gLevel = { 
     SIZE : 4 , 
     MINES: 0.2 
}; 
var gCell ={ 
    i : 0 , 
    j : 1 
} 

var gMineSweeper = []; 

function getRandomCell() { 

    return (Math.random() > gLevel.MINES)? gCELL : gMINE ; 
} 

function initGame() { 

    buildBoard(); 
    renderBoard(gMineSweeper); 
    countMines(gMineSweeper); 
    //setMinesNeighborsCount(gMineSweeper); 
} 

function buildBoard() { 
    var elCell = document.querySelectorAll ('td'); 
    for (var i = 0; i < gLevel.SIZE; i++) { 
    gMineSweeper.push([]); 
    for (var j = 0; j < gLevel.SIZE; j++) { 
     gMineSweeper[i][j] = getRandomCell(); 
    } 
    } 
} 

function renderBoard(board) { 

    var elMineSweeperTable = document.querySelector('.mineSweeperTable'); 

    var strHTML = ''; 
    board.forEach(function (row) { 
    strHTML += '<tr>'; 
    row.forEach(function (cell) { 

     strHTML += '<td> ' + cell + ' </td>' 
    });  
    strHTML += '</tr>' 
    }) 
    elMineSweeperTable.innerHTML = strHTML; 
} 

function countMines(board) { 
    var count = 0; 
    board.forEach(function(row) { 
    row.forEach(function(cell) { 
     if(cell === gMINE){ 
     count++; 
     } 
    }); 
    }); 
    console.log('Mines Count : ' , count); 
    return count; 
} 

function cellClicked(elCell,i,j) { 
    var elCell = document.querySelectorAll ('td'); 
    console.log('You Clicked on me ! : ' , elCell,i,j); 
    debugger; 

} 
function setMinesNeighborsCount(board) { 
    var elCell = document.querySelector('td'); 
    // debugger; 
    // for (var i = 0; i < board; i++) { 
    // gMineSweeper.push([]); 
    // for (var j = 0; j < board; j++) { 
    //  var ngbrsCount = countNgbrs(i, j); 
    //  console.log('Cell ', i, ', ', j, ' has: ', ngbrsCount ); 
    //  if (ngbrsCount > 0) { 
    //  debugger; 
    //  board.push(ngbrsCount); 
    //  // elCell.innerHTML = ngbrsCount; 
    //  cell[i][j] = ngbrsCount; 
    //  elCell = cell[i][j]; 

    //  } 
    //  // debugger; 
    //  if (cell === gMINE) { 
    //  console.log('This cell is Mine', i, j); 
    //  // debugger; 
    //  // board.push(ngbrsCount); 
    //  }  
    // } 
    // } 
    var c = elCell; 
    debugger; 
    board.forEach(function (row, i) { 
    row.forEach(function (cell, j) { 

     var ngbrsCount = countNgbrs(i, j); 
     console.log('Cell ', i, ', ', j, ' has: ', ngbrsCount ); 
     if (ngbrsCount > 0) { 
     //board.push(ngbrsCount); 
     // elCell.innerHTML = ngbrsCount; 
     //debugger; 
     c[i][j] = ngbrsCount; 

     } 
     debugger; 
     if (cell === gMINE) { 
     console.log('This cell is Mine', i, j); 
     //debugger; 
     // board.push(ngbrsCount); 
     }  
    }); 
}); 
} 
function countNgbrs(i, j) { 
    var count = 0; 

    for (var a = i-1; a <= i+1; a++){ 

    if (a < 0 || a >= gMineSweeper.length) continue; 

    for (var b = j-1; b <= j+1; b++){ 

     if (b < 0 || b >= gMineSweeper.length) continue; 
     if (a === i && b === j) continue; 

     if (gMineSweeper[a][b] === gMINE) count++; 
    } 

    } 
    return count; 
}

來源

2016-05-23 B.Arthur

要獲得的從現在的位置使用jQuery

HTML

<td onclick='Getposition($(this))'></td> 

function Getposition(e){ 
    var col = e.index() + 1; 
    var row = e.closest('tr').index() + 1; 
    alert([col,row].join(',')); 
}

表標籤

例小提琴 http://jsbin.com/lupifilike/2/edit?html,js,output

來源

2016-05-23 10:08:01

，如果我不能用jQuery做呢？，只有簡單的js .. –

可以請你解釋給我，如果我需要在我的表中的事件在HTML（onclick）或者如果有其他方式來解決它，但只是簡單的JS /純JS的 –

然後給onclick所有td和調用函數 –

function cellClicked(el) { 
    document.querySelector('.mineTable').onclick = function(){ 
    var el = event.target; 
    console.log('td clicked' , el); 
    debugger; 
    if(el.innerText === gMINE){ 
     console.log('Game Over! '); 

    } 
    }; 
}

其工作這樣:)

來源

2016-05-23 12:39:34

如何獲得動態表

回答

相關問題