的財產,我有一些麻煩我的項目,如何獲得動態表
我需要建立一個遊戲:掃雷,
我在這個項目的主要問題是,我在動態表我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 = '❉';
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;
}
,如果我不能用jQuery做呢? ,只有簡單的js .. –
可以請你解釋給我,如果我需要在我的表中的事件在HTML(onclick)或者如果有其他方式來解決它,但只是簡單的JS /純JS的 –
然後給onclick所有td和調用函數 –