js, grid algorithm (full of all elements of the surrounding set-up.)



  • The essence of the task is that there is a NxN net (block div) if we click on the cell in it "5" and the cells around it are filled with "4." It's interesting to know how to get all the surrounding elements.
    is generated by the table (in this case, 5 by 5)

    function createTable(n) {
        var table = document.createElement('div');
        table.id = 'table';
    
    for(var i = 0; i < n; i++) {
        var row = document.createElement('div');
        for(var j = 0; j< n; j++) {
            var cell = document.createElement('div');
            cell.className = 'cell';
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    var doc = document.getElementById('root');
    doc.appendChild(table);
    console.log('createTable');
    

    }

    When a cell is clicked, it must be like,

    введите сюда описание изображения



  • Well, that's the way it is, and it's important to point out that a set of cells needs to be made two-way to find neighbors comfortable. x and y The current clicked cell.

    var root = document.getElementById('root');
    var cellDivs = {};
    var n = 5; 
    var cellSize = 40;
    var table;
    function createTable(n, cellSize) {
        var table = document.createElement('div');  table.id = 'table';
        var left = 0, top = 0, cell;
        for(var i = 0; i < n; i++) { cellDivs[i*cellSize] = {}; }
        for(var i = 0; i < n; i++) {     
            for(var j = 0; j < n; j++) {
                cell = document.createElement('div');
                cell.className = 'cell';
                cell.style.width = cellSize + "px";
                cell.style.height = cellSize + "px";
                cell.style.left = left + "px";
                cell.style.top = top + "px";
                table.appendChild(cell);
                cellDivs[left][top] = cell;
                left += cellSize;          
            }
            top += cellSize; left = 0;
        }
        root.appendChild(table);
        return table;
    }
    

    table = createTable(n, cellSize);
    table.onclick = function(e) {
    e = e || event;
    var x = parseInt(e.target.style.left);
    var y = parseInt(e.target.style.top);

    setCellValue( x, y, 5 );
    setCellValue( x + cellSize, y + cellSize, 4 );
    setCellValue( x - cellSize, y - cellSize, 4 );
    setCellValue( x + cellSize, y - cellSize, 4 );
    setCellValue( x - cellSize, y + cellSize, 4 );
    setCellValue( x + cellSize, y, 4 );
    setCellValue( x - cellSize, y, 4 );
    setCellValue( x, y + cellSize, 4 );
    setCellValue( x, y - cellSize, 4 );
    }

    function setCellValue(x, y, val) {

    && cellDivs[x][y]) {

    cellDivs[x][y].innerHTML = val;
    }
    }
    .cell {
    position: absolute;
    top: 0; left: 0;
    border: 1px solid black;
    text-align: center;
    }
    <div id="root"></div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2