使用动态生成的邻居计数 table

Question

所以基本上我想让我的地雷被数字包围。

例如，如果有两个炸弹彼此靠近，我点击它们旁边的一个 table 单元格，它应该给出数字 2，当有一个炸弹时，它应该给出数字 1，就像普通的扫雷艇。

自从我使用 PHP 制作了 table 和炸弹放置后，我不知道如何添加该功能。（错误 = 炸弹）

我的PHP代码：

<?php

$rows = 7;  //  aantal rijen
$cols = 7;  //  aantal kolommen

$bugs = 12;  // aantal bugs
$bugsPlaced = 0;

echo "<table border='1'>";

for($tr=1;$tr<=$rows;$tr++){
    echo "<tr>";
    for($td=1;$td<=$cols;$td++){
        echo "<td>";

        $random = rand(1,3);
        if($random == 1 && $bugsPlaced < $bugs) { // als het aantal bugs minder is dan de bugsplaced, worden er extra bugs geplaatst.
            echo "X";
            $bugsPlaced++;
        } else {
            echo "<div class='Geheim'></div>";
        }
        echo "</td>";
    }
    echo "</tr>";
}
echo "</table>";

?>

我的JavaScript代码：

$(document).ready(function () {
    $("td").click(function () {

        if ($(this).text() == '') {
            $(this).css('background-color', 'DarkGray');
            console.log("Je hebt op een leeg vakje geklikt");
        }

        if ($(this).text() == 'X') {
            $("td:contains('X')").css('background-color', 'Gray');
            $("td:not(:contains('X'))").css('background-color', 'DarkGray');
            console.log("Je hebt op een bug geklikt");
        }

        $("#renew").click(function () {
            location.reload();
        });
    })
});

Answer 1

您可以应用下一个功能：

function count_mines(cel){
    let mines = 0, 
       col_ind = cel[0].cellIndex, 
       row_ind = cel.parent()[0].rowIndex, 
       cols = cel.parent()[0].childElementCount - 1, 
       rows = cel.parent().parent()[0].childElementCount - 1; 

    let ar_x = [], ar_y = [];

    if (row_ind - 1 >= 0)    ar_y.push(row_ind - 1);
    ar_y.push(row_ind);
    if (row_ind + 1 <= rows) ar_y.push(row_ind + 1);

    if (col_ind - 1 >= 0)    ar_x.push(col_ind - 1);
    ar_x.push(col_ind);
    if (col_ind + 1 <= cols) ar_x.push(col_ind + 1);

    let l_y = ar_y.length, l_x = ar_x.length;

    for(let i = 0; i < l_x; i++){
        for(let j = 0; j < l_y; j++){
            if ($('table').find('tr').eq(ar_y[j]).find('td').eq(ar_x[i]).text() == 'X'){
                mines++; 
            } 
        } 
    }

    return (mines == 0) ? '' : mines;
}

并在您的点击事件中添加一行：

        if ($(this).text() == '') {
            $(this).css('background-color', 'DarkGray');
            $(this).text(count_mines($(this)));                // <--- this one
          //  console.log("Je hebt op een leeg vakje geklikt");
        }

$(document).ready(function () {
    $("td").click(function () {

        if ($(this).text() == '') {
            $(this).css('background-color', 'DarkGray');
            $(this).text(count_mines($(this)));
          //  console.log("Je hebt op een leeg vakje geklikt");
        }

        if ($(this).text() == 'X') {
            $("td:contains('X')").css('background-color', 'Gray');
            $("td:not(:contains('X'))").css('background-color', 'DarkGray');
          //  console.log("Je hebt op een bug geklikt");
        }

        $("#renew").click(function () {
            location.reload();
        });
    })
});

function count_mines(cel){
    let mines = 0;
    let col_ind = cel[0].cellIndex;
    let row_ind = cel.parent()[0].rowIndex; 
    let cols = cel.parent()[0].childElementCount - 1; 
    let rows = cel.parent().parent()[0].childElementCount - 1; 
    
    let ar_x = [];
    let ar_y = [];
    
    if (row_ind - 1 >= 0)    ar_y.push(row_ind - 1);
    ar_y.push(row_ind);
    if (row_ind + 1 <= rows) ar_y.push(row_ind + 1);
    
    if (col_ind - 1 >= 0)    ar_x.push(col_ind - 1);
    ar_x.push(col_ind);
    if (col_ind + 1 <= cols) ar_x.push(col_ind + 1);
     
    let l_y = ar_y.length, l_x = ar_x.length;
 
    for(let i = 0; i < l_x; i++){
        for(let j = 0; j < l_y; j++){
            if ($('table').find('tr').eq(ar_y[j]).find('td').eq(ar_x[i]).text() == 'X'){
                mines++; 
            } 
        } 
    }
     
    return (mines == 0) ? '' : mines;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<table border="1"><tbody><tr><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td></tr><tr><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;"><div class="Geheim"></div></td></tr><tr><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td></tr><tr><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td></tr><tr><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;">X</td></tr><tr><td style="width:30px; height:30px;">X</td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td></tr><tr><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td><td style="width:30px; height:30px;"><div class="Geheim"></div></td></tr></tbody></table>

使用动态生成的邻居计数 table

Neighbor count using dynamically generated table

javascript

php

jquery

minesweeper