Search code examples
javascriptphpjqueryminesweeper

Neighbor count using dynamically generated table

So basically I want to let my mines be surrounded by numbers.

For instance if there are two bombs near each other and I click on a table cell next to them it should give the number 2 and when there is one bomb it should give the number 1, just like the normal minesweeper.

Now since I made my table and bomb placement using PHP I have no idea how I could add that feature. (bugs = bombs)

My PHP code:

<?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>";

?>

My JavaScript code:

$(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();
        });
    })
});
Solution

  • You can apply next function:

    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;
}

    And add one line in your click event:

            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>