I want to create a field of cells. The field has a size of 10x10. When reaching a maximum count of cells in a row, it should start a new row.
Currently all my cell divs are placed below.
function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }
.cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>
use display:inline-block;
for .cells and to stop 10 each row add a <br>
tag after 10 divs in row.
function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); } $(document.body).append("<br>"); } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }
.cell { height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>
Create wrapper for each 10 cell.
function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { $(document.body).append("<div>"); for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } $(document.body).append("</div>"); } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css $(document.body).append(cellDiv); // add the cell div to the parent }
.cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>
You can use absolute positioning and set for each of them css property. Here is the fiddle
function initGame() { var mapSize = 10; // create a field of 10x10 var cellsPerRow = 10; // 10 cells per row for (var x = 0; x < mapSize; x++) { for (var y = 0; y < mapSize; y++) { createCell(x, y); // create a cell on index x (horizontal) and y (vertical) } } } function createCell(x, y) { // store this cell position to a data class var cellDiv = $("<div></div>"); // create the cell div cellDiv.addClass("cell"); // add some css cellDiv.css({ left: Math.floor(x*50), top: Math.floor(y*50) }); $(document.body).append(cellDiv); // add the cell div to the parent } initGame()
.cell{ height: 50px; width: 50px; border-style: solid; border-width: 1px; border-color: black; background: red; position: absolute; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
You can create a row div
that contains multiple cell div
function initGame() { const rows = 10; const columns = 10; for(let r=0;r<rows;r++){ let row = createRow(r); for(let c=0;c<columns;c++){ createCell(row, r, c); } } } function createRow(rowNumber){ let row = document.createElement('DIV'); row.className += ' row' $(document.body).append(row); return row; } function createCell(domRow, rowNumber, columnNumber){ let column = document.createElement('DIV'); column.className += ' cell'; $(domRow).append(column); }
.cell{ height: 50px; width: 50px; border: 1px solid grey; background: tomato; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body onLoad="initGame()"> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.