Ich habe einige Probleme mit meinem Projekt,Wie Eigenschaft dynamischen Tisch bekommen
Ich brauche ein Spiel zu bauen: Mine Sweeper,
Mein Hauptproblem in diesem Projekt ist, dass ich dynamischen Tisch in meinem hTML-Seite , dass ich diese Matrix in meiner Javascript Seite bauen,
ich mag die aktuelle Zelle bekommen ich schob es von Onclick-Ereignisse, und ich habe nur die erste Zelle (0,0):
es ist mein Zuhause Arbeitsprojekt, ich brauche nur Hilfe zu un derstand wie kann ich den Index jeder Zelle `ve auf
meine HTML-Seite geklickt wurde, erhalten:
<body onload="initGame()">
<header>
<h1>My Mine Sweeper</h1>
</header>
<table class="mineTable" onclick="cellClicked(this)" border="1">
<tbody class="mineSweeperTable" ></tbody>
</table>
mein Javascript Seite:
'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;
}
und wenn ich es mit jQuery cant do? , nur einfache js .. –
können Sie mir bitte erklären, wenn ich dieses Ereignis in meiner Tabelle im html (onclick) benötige oder wenn es andere Weise gibt, es zu lösen, aber nur mit einfachem JS/reinem JS –
Dann Geben onclick in alle td und rufen Sie die Funktion –